【js效果】倒计时
16lz
2021-04-15
目录
- 节日倒计时
- 方法一
- 方法二
- 60s倒计时
节日倒计时
方法一
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>倒计时</title> <style> *{ margin: 0; padding:0; } p { font-size: 80px; text-align: center; } p span { color: red; } p span.time { color: black } body{padding-top:200px;} </style></head><body><p>距离2021年还有</p><p><span></span></p><script> var oSpan = document.getElementsByTagName('span')[0]; function tow(n) { return n >= 0 && n < 10 ? '0' + n : '' + n; } function getDate() { var oDate = new Date();//获取日期对象 var oldTime = oDate.getTime();//现在距离1970年的毫秒数 var newDate = new Date('2021/1/28 00:00:00'); var newTime = newDate.getTime();//2021年距离1970年的毫秒数 var second = Math.floor((newTime - oldTime) / 1000);//未来时间距离现在的秒数 var day = Math.floor(second / 86400);//整数部分代表的是天；一天有24*60*60=86400秒 ； second = second % 86400;//余数代表剩下的秒数； var hour = Math.floor(second / 3600);//整数部分代表小时； second %= 3600; //余数代表 剩下的秒数； var minute = Math.floor(second / 60); second %= 60; var str = tow(day) + '<span class="time">天</span>' + tow(hour) + '<span class="time">小时</span>' + tow(minute) + '<span class="time">分钟</span>'+ tow(second) + '<span class="time">秒</span>';console.log( tow(day))if(tow(day) > 1){oSpan.innerHTML = str;}else if(tow(day) == 1){oSpan.innerHTML = '只有2天啦！'}else if(tow(day) == 0){oSpan.innerHTML = '只有1天啦！'}else{oSpan.innerHTML = '已经过了'} // oSpan.innerHTML = str; } getDate(); setInterval(getDate, 1000);</script></body></html>方法二
参考：https://www.lanrenzhijia.com/others/10131.html
<div class="timecounter"> <span id="t_d"></span> <span id="t_h"></span> <span id="t_m"></span> <span id="t_s"></span></div>
<script type="text/javascript">function getRTime() {var EndTime = new Date("2020/01/01 00:00:00"); //截止时间var NowTime = new Date();var t = EndTime.getTime() - NowTime.getTime();var d = Math.floor(t / 1000 / 60 / 60 / 24);var h = Math.floor(t / 1000 / 60 / 60 % 24);var m = Math.floor(t / 1000 / 60 % 60);var s = Math.floor(t / 1000 % 60);document.getElementById("t_d").innerHTML = d + " 天";document.getElementById("t_h").innerHTML = h + " 时";document.getElementById("t_m").innerHTML = m + " 分";document.getElementById("t_s").innerHTML = s + " 秒";}setInterval(getRTime, 1000);</script>60s倒计时
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>60s倒计时</title></head><body> <input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /> <script type="text/javascript"> var countdown = 60; function settime(val) { if (countdown == 0) { val.removeAttribute("disabled"); val.value = "免费获取验证码"; countdown = 60; } else { val.setAttribute("disabled", true); val.value = "重新发送(" + countdown + ")"; countdown--; } setTimeout(function () { settime(val) }, 1000) } </script></body></html>©著作权归作者所有：来自51CTO博客作者wx605879fdc8dae的原创作品，如需转载，请注明出处，否则将追究法律责任
更多相关文章
- 【DB笔试面试692】在Oracle中，V$SYSSTAT中的CLASS列分别代表什么？
- 【DB笔试面试94】在MySQL中，VARCHAR与CHAR的区别是什么？VARCHAR(50
- mfs changelog日志解析
- 【css效果】实现简单的下拉菜单
- 4-20ma模拟量转无线wifi采集传输0-10v模拟量输入输出远距离免布
- 「课代表」帮你总结了全网最全的Redis知识点
- redis中的 geospatial（地理位置）使用
- 练习2-6 计算物体自由下落的距离 (5分)
- 2021-03-10：一个数组上共有 N 个点，序号为0的点是起点位置，序号为N-