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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持站长技术。
9月11日,在腾讯2020全球数字生态大会数据库专场上,腾讯云正式发布面向混合云的...
默认情况下,ASP. NET Core应用会监听一下2个Url: http://localhost:5000 https:...
书接上回上回我们详细讲解了 Redis的RDB 机制RDB解决了redis数据持久化一部分的...
下面是Visual Studio和Visual Studio Code之间的详细差异。 如果你留意的话,.NE...
分支(branch)操作相关命令 查看本地分支: $ git branch 查看远程分支: $ git b...
在用java进行web业务开发的时候,对于页面上接收到的参数,除了极少数是步可预知...
1.看别人不顺眼,是自己修养不够。人愤怒的那一个瞬间,智商是零,过一分钟后恢...
Base64编码,是我们程序开发中经常使用到的编码方法。它是一种基于用64个可打印...
一、 问题描述 access_ok函数是什么原理? 问题 二、问题分析 我们在内核空间和用...
引言 当我们设计一个完整的电路而言我们除了要知道我们要设计的主芯片电路如FPGA...