如何用JS写一个倒计时功能?
Admin 2021-05-07 群英技术资�
对于网页倒计时功能大家应该都不陌生,倒计时效果能应用的常见有很多,例如商品秒杀,活动倒计时,考试倒计时等等。这篇文章主要给大家分享使用JS实现倒计时效果的代码,感兴趣的朋友可以看看�
代码�
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .wrap { overflow: hidden; width: 500px; height: 500px; background-color: #eeeeee; margin: 0 auto; } h2 { margin-top: 20px; text-align: center; color: #fff; } input { width: 70px; } .ipt { text-align: center; margin-top: 50px; } .run { width: 100px; height: 100px; background-color: #000; text-align: center; line-height: 100px; color: #fff; font-size: 30px; border-radius: 50%; margin: 30px auto 0; } .juli { text-align: center; margin-top: 30px; } .sytime { text-align: center; margin-top: 60px; font-size: 25px; color: #fff; } .sytime span { font-size: 30px; color: red; } .juli span { font-size: 18px; color: red; } </style> </head> <body> <div class="wrap"> <h2>倒计�</h2> <!-- 表单 --> <div class="ipt"> 请输�: <input type="text">�<input type="text">�<input type="text">� </div> <!-- 开始按� --> <div class="run">开�</div> <!-- 距离时间 --> <p class="juli">现在距离-<span class="julitime">0000</span>-还剩:</p> <!-- 剩余时间 --> <div class="sytime"> <span>00</span>� <span>00</span>小时 <span>00</span>� <span>00</span>� </div> </div> <script> // 获取元素 // 表单 var ipt = document.getElementsByTagName('input'); // 按钮 var btn = document.getElementsByClassName('run')[0]; // 距离年份 var julitime = document.getElementsByClassName('julitime')[0]; // 倒计� var sytime = document.getElementsByClassName('sytime')[0]; var time = sytime.getElementsByTagName('span'); console.log(ipt, btn, julitime, time); var timerId = null; // 点击事件 btn.onclick = function() { if (ipt[1].value > 12 || ipt[2].value > 30) { alert('月份要小�12且日要小�30'); return; } else if (ipt[0].value.trim() == '' || ipt[1].value.trim() == '' || ipt[2].value.trim() == '') { alert('内容不能为空'); return; } timerId = setInterval(countTime, 1000); } function countTime() { // 获取输入年份 var ipty = ipt[0].value; // 获取输入月份 var iptm = ipt[1].value; // 获取输入日份 var iptd = ipt[2].value; // console.log(ipty, iptm, iptd); var str = ipty + '-' + iptm + '-' + iptd; // console.log(str); // 赋值给距离时间 julitime.innerHTML = str; // 当前距离1970�1,1毫秒� var nowDate = +new Date(); // 输入时间距离1970�1,1毫秒� var inputFr = +new Date(ipty + '-' + iptm + '-' + iptd) // 未来减去现在 秒数 var times = (inputFr - nowDate) / 1000; var d = parseInt(times / 60 / 60 / 24) //� d = d < 10 ? '0' + d : d; var h = parseInt(times / 60 / 60 % 24) //� h = h < 10 ? '0' + h : h; var m = parseInt(times / 60 % 60); //� m = m < 10 ? '0' + m : m; var s = parseInt(times % 60); //� s = s < 10 ? '0' + s : s; // console.log(d, h, m, s); time[0].innerHTML = d; time[1].innerHTML = h; time[2].innerHTML = m; time[3].innerHTML = s; } </script> </body> </html>
以上就是关于js实现倒计时效果的介绍,文本有具体的代码,有一定的借鉴价值,有需要的朋友可以参考一下,希望对大家学习有帮助,想要了解更多JS倒计时的内容大家可以继续关注其他文章�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
今天我们来了解websocket封装的内容,下文给大家分享了websocket封装过程,及引入和使用,需要的朋友可以参考,下面我们一起来学习一下吧�
这篇文章给大家分享的是React实现文件转base64的方法。小编觉得挺实用的,因此分享给大家做个参考,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧�
本文实例为大家分享了vue实现列表无缝循环滚动的具体代码,供大家参考,具体内容如下
这篇文章主要给大家介绍了关于JS如何实现页面截屏功能的相关资�,文中主要利用了html2canvas和canvas绘制两个方法来实�,需要的朋友可以参考下
computed是vue的配置选项,它的值是一个对�,其中可定义多个计算属�,每个计算属性就是一个函�,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲�,需要的朋友可以参考下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078