学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>Javascript>>经验笔记>>

JS实现倒计时功能

发布时间:2020-08-05点击:

    在制作网站功能的时候,很多朋友需要实现倒计时的功能,但是没有具体思路,那么可以参考今天的这篇经验。

    1、js实现倒计时代码

    <body id="clock" onload="clock(3600)">      
    </body>
    <script>
    function clock(times){
     //页面加载时设置需要倒计时的秒数,计算小时
     var shi=parseInt(times/3600);
     //计算分钟
     var fen=parseInt((times%3600)/60);
     //计算秒
     var miao=(times%3600)%60;
     //写入页面显示
     document.getElementById("clock").innerHTML=shi+"时"+fen+"时"+miao+"秒";
     if(times>0){
         //倒计时的秒数递减1
         times=times-1;
         //定时1秒,然后调用自身clock方法
         //每次递减1,不停调用自身,实现循环,知道times=0
         setTimeout(function (){
    	clock(times);
    	}, 1000);  
      }else{
         alert("倒计时结束");
      }
    }
    </script>
    </html>

    2、js实现倒计时的效果图

    学习不止眼前的教程与笔记,还需实践与创新。小伙伴们,快动手试试吧~

赞一个(0)     踩一个(0)    

相关链接

搜索

昵称:*
邮箱:
电话:
评论: