js实现倒计时功能。。。-原创手记-慕课网

首页课程实战体系课手记专栏慕课教程

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

暝殇叶 2016-12-27 14:39:58 浏览 7714

暝殇叶

关注TA

手记 4

粉丝 5

获赞 236

用函数实现数字自减功能，数字初始值为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>