Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no"/>
</head>
<body>
<div class="container">
    <form class="registform">
        <div class="formgroup g1">
            <input type="tel" placeholder="手机验证码" />
            <button id="getCode">获取验证码</button>
        </div>
    </form>
</div>
</body>
</html>
 
button, input, select, textarea {
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  -webkit-appearance: none;
}
.container{
    width: 400px;
    margin:0 auto;
    padding: 30px 0;
}
.container h3{
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: #333333;
    text-indent: 5px;
}
.registform input{
    width: 100%;
    height: 50px;
    font-size: 18px;
    padding-left: 15px;
    border: 1px solid #aaaaaa;
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
}
.formgroup{ 
    position: relative;
    margin-top: 20px;
}
.g1{padding-right: 100px;}
.registform .g1 input{border-right: 0;}
.g2{padding-right: 50px;border: 1px solid #aaaaaa; }
.registform .g2 input{border: 0;}
#getCode{
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 50px;
    font-size: 18px;
    background-color: #e35437;
    color: #fff;
}
#getCode[disabled]{
    background-color: #B6B6B6;
}
​
 
var getCode = document.getElementById('getCode');
var wait = 60;
function time(btn){
    if (wait===0) {
        btn.removeAttribute("disabled");
        btn.innerHTML = "获取验证码";
        wait = 60;
    }else{
        btn.setAttribute("disabled",true);
        btn.innerHTML = wait + "秒后重试";
        wait--;
        setTimeout(function(){
            time(btn);
        },1000);
    }
}
getCode.onclick = function(){
    time(this);
};
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers