<! 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> javascript">
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>