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>
<script src="http://zeptojs.com/zepto.min.js"></script>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="format-detection" content="telephone=no" />
        <title>糖友医生注册</title>
        <link rel="stylesheet" type="text/css" href="css/badge.css" />
            </head>
    <body>
        <ul class="register_nav">
            <li class="register_nav_cur">糖友注册</li>
            <li>医生注册</li>
        </ul>
        <div class="register_main">
            <div class="register_wrap register_wrap_cur">
                <h2 class="register_tit">XXX医生邀请您加入血糖高管！</h2>
                <div class="register_fri_img"><img src="img/register_fri.jpg"/></div>
                <form>
                    <ul class="register_form">
                        <li><input type="tel" placeholder="请输入手机号码"/></li>
                        <li><input type="text" placeholder="请输入验证码"/><input type="button" id="fri_code_btn" value="获取验证码"></li>
                        <li><input type="password" placeholder="设置密码"/></li>
                    </ul>
                    <button class="register_btn white_font">注册并领取现金</button>
                </form>
            </div>
            <div class="register_wrap">
                <h2 class="register_tit">XXX医生邀请您加入血糖高管！</h2>
                <div class="register_doc_img"><img src="img/register_doc.jpg"/></div>
                <form>
                    <ul class="register_form">
                        <li><input type="tel" placeholder="请输入手机号码"/></li>
                        <li><input type="text" placeholder="请输入验证码"/><input type="button" id="doc_code_btn" value="获取验证码"></li>
                    </ul>
                    <button class="register_btn white_font">注册并领取现金</button>
                </form>
            </div>
        </div>
        <script>
            $(function(){
                $(".register_nav li").click(function(){
                    $(this).addClass("register_nav_cur").siblings().removeClass("register_nav_cur");
                    var index=$(".register_nav li").index(this);
                    $(this).parent().next(".register_main").find(".register_wrap").eq(index).addClass("register_wrap_cur").siblings().removeClass("register_wrap_cur");
                })
            })
        </script>
        <script>
            $(function () {
                $("#fri_code_btn").click(function () {
                    changeTime();
                })
            });
            var count=5;
            function changeTime(){
                $("#fri_code_btn").attr("disabled",true);
                $("#fri_code_btn").val(count+"秒后重新获取");
                count--;
                if(count>0){
                    setTimeout(changeTime,1000);
                }else{
                    count=5;
                    $("#fri_code_btn").removeAttr("disabled");
                    $("#fri_code_btn").val("获取验证码");
                }
            }
        </script>
        <script>
            $(function () {
                $("#doc_code_btn").click(function () {
                    changeTime1();
                })
            });
            var count1=5;
            function changeTime1(){
                $("#doc_code_btn").attr("disabled",true);
                $("#doc_code_btn").val(count1+"秒后重新获取");
                count1--;
                if(count1>0){
                    setTimeout(changeTime1,1000);
                }else{
                    count1=5
                    $("#doc_code_btn").removeAttr("disabled");
                    $("#doc_code_btn").val("获取验证码");
                }
            }
        </script>
    </body>
</html>
​
​
 
/*----------reset------------*/
body,h1, h2, h3, h4, h5, h6, p, form{margin:0;}
ul,input,button,label{margin:0; padding:0;}
ul{list-style: none}
button,input{background:none; border:none; outline: none; cursor: pointer; -webkit-tap-highlight-color:transparent;font-family:'Microsoft YaHei',Helvetica,sans-serif; vertical-align: middle; -webkit-appearance:none;}
::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
/*----------gobal------------*/
html{background-color:#fff; font-family:'Microsoft YaHei',Helvetica,sans-serif; font-size:62.5%;-webkit-tap-highlight-color:transparent;}
img{width:100%;}
​
.pink_font{color:rgb(234,78,115);}
.black_font{color:rgb(49,49,49);}
.orange_font{color:rgb(234,78,29);}
.white_font{color:rgb(255,255,255);}
.center_font{text-align:center;}
​
​
/*----------badge------------*/
.badge_icon{width:85px; height:77px; margin: 14px auto 0;}
.badge_icon_lv{font-size:1.2rem; text-align: center; line-height: 2;}
.badge_title{margin:16px 0 18px; font-size:1.4rem; font-weight:normal; text-align: center; }
.badge_txt{font-size:1.2rem; text-align: center; line-height: 1.6;}
.badge_txt b{font-size:1.4rem; font-weight:normal;}
.twoline{padding-bottom:18px; border-bottom:2px solid rgb(228,230,228); margin: 0 4% 16px;}
.threeline{padding-bottom:8px; border-bottom:2px solid rgb(228,230,228); margin: 0 4% 16px;}
#badge_login{width:70%; margin:16px auto 20px;}
#badge_login li{
    position: relative; 
    height:35px; line-height:35px; 
    margin-bottom: 10px; padding-left:3%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color:#eeeded;
    color:rgb(120,120,120)
}
input{ color:rgb(120,120,120);-webkit-appearance:none;}
::-webkit-input-placeholder { color:rgb(120,120,120) }
::-moz-placeholder { color:rgb(120,120,120)}
:-ms-input-placeholder { color:rgb(120,120,120) }
input:-moz-placeholder { color:rgb(120,120,120)}
#code_btn{position: absolute; right:0; top:0; width:44%; height:35px; background-color:rgb(246,205,22); color:rgb(49,49,49);-webkit-border-radius: 0; border-radius:0;}
​
.badge_btn{display:block; width:70%; margin: 0 auto 40px; padding:12px 0; border:1px solid rgb(234,78,29); -webkit-border-radius:8px; border-radius:8px; font-size:1.4rem; text-align: center;}
​
/*----------progressbar------------*/
.progressbar{
    position:relative;
    width: 70%; height:10px;
    margin: 8px auto 0; padding:0;
    -webkit-border-radius:10px; border-radius:10px;
    overflow: hidden; background: #607fa6;
}
#progressbar_value{
    position: absolute; left:0; top:0; z-index: 999;
    width:100%; height:10px; line-height: 10px;
    color:#787978; font-size: 1rem; text-align: center;
}
.progressbar progress {
    position:absolute; top:0; left:0; z-index: 990;
    width:100%;
    height:10px;
    background-color:#ddd; margin: 0; padding:0;
}
​
.progressbar progress::-moz-progress-bar { background: #f6cd16; -webkit-border-radius:10px; border-radius:10px; }
.progressbar progress::-webkit-progress-bar { background: #ddd;-webkit-border-radius:10px; border-radius:10px;  }
.progressbar progress::-webkit-progress-value  { background: #f6cd16; -webkit-border-radius:10px; border-radius:10px; }
​
/*----------download------------*/
.download_doc_img{display:block; width:74%; margin:46px auto;}
.download_fri_img{width:231px; height:65px; margin: 86px auto 0;}
.download_fri_tit{font-size:1.4rem; margin: 35px 0;}
.download_fri_btn{
    display:block; margin: 0 auto; overflow: hidden;
    width:84%; height:40px; line-height: 40px;
    background-color:#ff9831;
    -webkit-border-radius:8px; border-radius:8px;
    color:#fff; font-size: 1.4rem;
}
.download_icon{display:inline-block; width:17px; height:19px;  margin:0 0 -4px 10px;background:url(../img/download_icon.png) no-repeat center top ; -webkit-background-size: 17px; -moz-background-size:17px; -o-background-size: 17px; background-size: 17px;}
.download_fri_txt{font-size:1.4rem; margin-top:24px; font-weight:normal;}
​
/*----------register------------*/
.register_nav{height:40px; line-height: 40px; display:flex; display:-webkit-flex; display:-moz-box; display:-webkit-box;}
.register_nav li{-webkit-box-flex:1; -moz-box-flex:1; box-flex:1; background:#eeeded; text-align: center; font-size:1.4rem; color:#787978}
.register_nav li.register_nav_cur{background:#42e693; color:#fff;}
​
.register_tit{text-align:center; font-size:1.4rem; margin:30px 0 15px; font-weight:normal;}
.register_fri_img{width:131px; margin: 0 auto;}
.register_doc_img{width:155px; margin: 0 auto;}
.register_main{margin-top:44px;}
.register_wrap{display:none;}
.register_wrap_cur{display:block;}
.register_form{width:70%; margin:16px auto 20px;}
.register_form li{
    position: relative;
    height:35px; line-height:35px;
    margin-bottom: 10px; padding-left:3%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color:#eeeded;
    color:rgb(120,120,120);
    -webkit-box-shadow: inset 0 2px 5px #c3c3c3;
    -moz-box-shadow: inset 0 2px 5px #c3c3c3;
    box-shadow: inset 0 2px 5px #c3c3c3;
    -webkit-border-radius:5px;
    border-radius:5px;
    overflow: hidden;
}
#fri_code_btn,#doc_code_btn{position: absolute; right:0; top:0; -webkit-border-radius: 0; border-radius:0; width:46%; height:35px; background-color:#42e693; color:#fff;}
​
.register_btn{display:block; width:70%; margin: 0 auto 40px; padding:12px 0; background-color:#ff9831; -webkit-border-radius:8px; border-radius:8px; font-size:1.4rem; text-align: center;}
​
input#fri_code_btn,input#doc_code_btn,button.register_btn,input#code_btn,button.download_fri_btn{-webkit-appearance:none;}
​
 
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers