html 和js 中实现倒计时功能

倒计时主要用到的知识点:1、设置时间间隔的setinterval可以被clearinterval取消

            2、毫秒转换为时分格式

                这个是效果图   html 和js 中实现倒计时功能

  下面是js中的函数

var shijian=3600;    var time=null;    function start(){         time=setInterval("count()",1000);//返回值time只是为了需要暂停的时候clearInterval(time)清除时间间隔    }        function count(){        if(shijian<0){            alert("time out");            pause();//一般情况下这个if条件是用来提交数据用的,这里只是测试一下。        }else{            $("#time p").html(Math.floor(shijian/60)+":"+shijian%60);//这里用到将毫秒转换到时分格式            shijian--;            console.info(time);        }    }    function pause(){        clearInterval(time);    }    function goOn(){        time = setInterval("count()",1000);//重新设置时间间隔    }

第二个是html资源,为了方便我css直接写在html中了

立即学习“前端免费学习笔记(深入)”;

        Document                    input{            background-color: #9fc5f1;            width: 100px;             height: 30px;             line-height: 30px;             text-align: center;             color: #fff;             font-size:14px;             font-weight: bold;        }        #time p{            color: #1f6dc2;            font-size: 48px;             font-weight: bold;            margin-left:90px;            margin-bottom:0px;        }        

00:00

以上就是html 和js 中实现倒计时功能的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1544867.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 16:17:20
下一篇 2025年12月21日 16:17:27

相关推荐

发表回复

登录后才能评论
关注微信