<! DOCTYPE html >
< html lang = " en" >
< head> < meta charset = " UTF-8" > < meta http-equiv = " X-UA-Compatible" content = " IE=edge" > < meta name = " viewport" content = " width=device-width, initial-scale=1.0" > < title> Document</ title> < style> * { margin : 0; padding : 0; } span { font-size : 10px; } input { width : 130px; height : 15px; margin-left : 20px; font-size : 10px; color : #999; } button { width : 80px; font-size : 10px; } </ style>
</ head> < body> < input type = " text" placeholder = ' 请输入手机号' id = " tele" > < button> 获取验证码</ button> < script> var input = document. querySelector ( '#tele' ) ; var btn = document. querySelector ( 'button' ) ; input. addEventListener ( 'focus' , function ( ) { this . style. color = '#000' ; } ) var time = 60 ; btn. addEventListener ( 'click' , function ( ) { var tele = input. value; if ( tele. length != 11 ) { input. value = '手机号输入有误!' ; input. style. color = '#ff0000' ; setTimeout ( function ( ) { input. value = tele; input. style. color = '#000' ; } , 1000 ) } else { this . disabled = true ; var timer = setInterval ( function ( ) { if ( time == 0 ) { clearInterval ( timer) ; btn. disabled = false ; btn. innerHTML = '获取验证码' ; time = 60 ; } else { btn. innerHTML = '剩余' + time + '秒' ; time-- ; } } , 1000 ) ; } } ) </ script>
</ body> </ html>