js实现有趣的倒计时效果

时间：2021-05-26

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章