关注微信公众号 太平洋学习网 扫描二维码
最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

js实现时分秒倒计时案例

JS/CSS 太平洋学习网 浏览 评论

 js实现时分秒倒计时功能,本案例实用到了jquery选择器,自己注意点,要引入jquery框架,倒计时的时间随意你怎么写,js 60秒倒计时,1小时倒计时等等,都没ok,下面先看看效果,如图。

js倒计时

js实现时分秒倒计时代码如下,js部分复制到你的项目中即可。

<html>
<body>
<span class="time-text" style="font-size: 20px;">00:30:00</span>
</body>
<script type="text/javascript">
    $(function () {
        //一秒后执行(有好处的)
        setTimeout("changeTimeText()",1000);
    });
    //修改倒计时时间
    function changeTimeText() {
        var timeStr = $(".time-text").text();
        var arr = timeStr.split(":");
        var hour = parseInt(arr[0]);
        var minute = parseInt(arr[1]);
        var second = parseInt(arr[2]);
        var totalSecond = hour * 60 * 60 + minute * 60 + second;
        totalSecond--;
        if(totalSecond == -1){
            //时间到停止
            //do something
            return;
        }
        var h = Math.floor(totalSecond / 3600);
        var m = Math.floor(totalSecond / 60 % 60);
        var s = Math.floor(totalSecond % 60);
        var hourStr = h < 10 ? ('0' + h) : h;
        var minuteStr = m < 10 ? ('0' + m) : m;
        var secondStr = s < 10 ? ('0' + s) : s;
        $(".time-text").text(hourStr+':'+minuteStr+':'+secondStr);
        //不要用setInterval()方法,否则会出问题
        setTimeout(changeTimeText,1000);
    }
</script>
</html>


来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/js_css/2017/0904/203.html

    与本文相关的文章