js实现倒计时功能。。。@慕课网原创_慕课网

js实现倒计时功能。。。原创

暝殇叶

2016-12-27 14:39:58浏览 7363

用函数实现数字自减功能，数字初始值为100显示在div中，单击”开始倒计时” 按钮后,每一秒数字减1,单击”暂停”按钮暂停计时, 单击”开始倒计时”继续。

</head>
<style type="text/css">
#p1{
    font-size: 100px;
    color:#F00;
    }
</style>
</head>

<body>
<div id="p1">100</div>
<input type="button" value="开始倒计时" onclick="px()"/>
<input type="button" value="暂停" onclick="px1()"/>
</body>

<script type=“text/javascript”>
    var a = 100;
    var tt;
    function px(){
        document.getElementById("p1").innerHTML=a;
        if(a>0){
            a--;
        }else{
            document.getElementById("p1").innerHTML='倒计时结束';
        }
        tt = setTimeout("px()",1000);   
    }
    function px1(){
        clearTimeout(tt);
    }
</script>

相关标签: JavaScript

8人推荐