DOM案例【2】注册文本倒计时 

<!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 @ 2018-01-14 10:44  LolitaGIS的笔记  阅读(163)  评论(0)    收藏  举报