倒计时主要用到的知识点:1、设置时间间隔的setinterval可以被clearinterval取消
2、毫秒转换为时分格式
这个是效果图
下面是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中了
立即学习“前端免费学习笔记(深入)”;
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="1.js"></script> <script src="jquery-1.8.3.min.js"></script> <style type="text/css"> 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; } </style> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <body> <div id="time"> <p>00:00</p> <input type="button" value="开始" onclick="start()"/> <input type="button" value="暂停" onclick="pause()"/> <input type="button" value="继续" onclick="goOn()"/> </div> </body> </html>
以上就是html 和js 中实现倒计时功能的详细内容,更多请关注php中文网其它相关文章!
HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号