练习案例 _注册按钮倒计时

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>注册按钮倒计时</title>
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            var remainTime = 10;
            var intervalId = setInterval(function () {
                remainTime--;
                if(remainTime>0){
                    $("#registerBtn").val("请先阅读服务条款（"+remainTime+"）");
                }else{
                    $("#registerBtn").val("注册");
                    $("#registerBtn").prop("disabled",false);
                    clearInterval(intervalId);
                }
            },1000);

        });

    </script>
</head>
<body>
    <div style="width: 600px;height: 371px;background-color: lightgray">
        服务条款。。。
    </div>
    <br/>
    <input id="registerBtn" type="submit" value="请先阅读服务条款（10）" disabled="disabled"/>
</body>

</html>

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>注册按钮倒计时练习案例</title>
    <style type="text/css">

        .div1{
            width: 600px;
            height: 371px;

            background-color: lightgray;
        }

    </style>
</head>
<body>

    <div class="div1">服务条款。。。</div>
    <br/>
    <input id="registerBtn" type="submit" value="请先阅读服务条款（10）" disabled="disabled" />

</body>
</html>
<script type="text/javascript">

    //注册按钮在倒计时期间每隔一秒显示的剩余时间减一
    //当剩余时间为0的时候，注册按钮显示注册，并且按钮可以被点击


    //1 先获取要操作的元素
    var registerBtn = document.getElementById("registerBtn");

    //2 需要一个定时器每隔一秒刷新一次剩余时间
    var remainTime = 10;

    var intervalId = setInterval(function(){

        remainTime--;

        //3 判断剩余的时间，如果剩余时间大于0，继续倒计时，否则，取消倒计时
        if(remainTime>0){
            registerBtn.value = "请先阅读服务条款（"+remainTime+"）";
        }else{
            clearInterval(intervalId);
            registerBtn.value = "注册";
            registerBtn.disabled = false;
        }


    },1000);

</script>

 

posted @ 2016-06-05 15:55  linyongqin  阅读(117)  评论(0)    收藏  举报