JS倒计时两种种实现方式
JS 实现 方式 两种 倒计时
2023-09-14 08:56:57 时间
最近一个网站功能用到到计时,如下所示:
原文: JS倒计时两种种实现方式
作者:黑仔002
用js就实现倒计时的两种方式:
一:设置时长,进行倒计时。比如考试时间等等
代码如下:
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>简单时长倒计时</title> 5 <SCRIPT type="text/javascript"> 6 var maxtime = 60 * 60; //一个小时,按秒计算,自己调整! 7 function CountDown() { 8 if (maxtime >= 0) { 9 minutes = Math.floor(maxtime / 60); 10 seconds = Math.floor(maxtime % 60); 11 msg = "距离结束还有" + minutes + "分" + seconds + "秒"; 12 document.all["timer"].innerHTML = msg; 13 if (maxtime == 5 * 60)alert("还剩5分钟"); 14 --maxtime; 15 } else{ 16 clearInterval(timer); 17 alert("时间到,结束!"); 18 } 19 } 20 timer = setInterval("CountDown()", 1000); 21 </SCRIPT> 22 </head> 23 <body> 24 <div id="timer" style="color:red"></div> 25 <div id="warring" style="color:red"></div> 26 </body> 27 </html>
运行结果:
二:设置时间戳,进行倒计时。比如距离活动结束时间等等
代码如下:
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>js简单时分秒倒计时</title> 5 <script type="text/javascript"> 6 function countTime() { 7 //获取当前时间 8 var date = new Date(); 9 var now = date.getTime(); 10 //设置截止时间 11 var str="2017/5/17 00:00:00"; 12 var endDate = new Date(str); 13 var end = endDate.getTime(); 14 15 //时间差 16 var leftTime = end-now; 17 //定义变量 d,h,m,s保存倒计时的时间 18 var d,h,m,s; 19 if (leftTime>=0) { 20 d = Math.floor(leftTime/1000/60/60/24); 21 h = Math.floor(leftTime/1000/60/60%24); 22 m = Math.floor(leftTime/1000/60%60); 23 s = Math.floor(leftTime/1000%60); 24 } 25 //将倒计时赋值到div中 26 document.getElementById("_d").innerHTML = d+"天"; 27 document.getElementById("_h").innerHTML = h+"时"; 28 document.getElementById("_m").innerHTML = m+"分"; 29 document.getElementById("_s").innerHTML = s+"秒"; 30 //递归每秒调用countTime方法,显示动态时间效果 31 setTimeout(countTime,1000); 32 33 } 34 </script> 35 </head > 36 <body onload="countTime()" > 37 <div> 38 <span id="_d">00</span> 39 <span id="_h">00</span> 40 <span id="_m">00</span> 41 <span id="_s">00</span> 42 </div> 43 </body> 44 </html>
运行结果:
相关文章
- js实现时钟代码
- leetcode 141. 环形链表 js 实现
- 老弟教你用CSS和JS实现曾经风靡一时的微信打飞机游戏
- CSS+JS实现 | 简单的萤火虫效果
- js手写题汇总(面试前必刷)
- 【Node.js算法题】数组去重、数组删除元素、数组排序、字符串排序、字符串反向、字符串改大写 、数组改大写、字符替换
- 10种常用JS代码功能常规写法和优雅写法的对比发现,这差异也太大了吧
- 使用 Node.js + OPEN AI 实现一个自动生成图片项目
- leetcode 11. 盛最多水的容器 js实现
- JS实现继承的几种方式
- 使用JS实现Redis数据读取(js读取redis)
- 利用php和js实现页面数据刷新
- 常用js脚本
- 一个用js实现控制台控件的代码
- javascript[js]获取url参数的代码
- 纯js网页画板(Graphics)类简介及实现代码
- js获取系统的根路径实现介绍
- JS+flash实现chrome和ie浏览器下同时可以复制粘贴
- js距离某一时间点时间是多少实现代码
- 使用js实现关闭js弹出层的窗口
- js动态创建上传表单通过iframe模拟Ajax实现无刷新
- 采用call方式实现js继承
- js动态添加表格数据使用insertRow和insertCell实现
- js实现飞入星星特效代码
- js实现ArrayList功能附实例代码
- js实现局部页面打印预览原理及示例代码
- 在Ubuntu上安装最新版本的Node.js
- JS实现图片无间断滚动代码汇总
- JS来动态的修改url实现对url的增删查改