春节将至，小梦相信大家跟小朦梦一样很激动呀。为了迎接虎年春节到来，小梦撸了一个虎年春节倒计时，仅20行代码用js就实现啦，是不是很简单呢？我们用这20行代码不仅能做个虎年春节倒计时，还能从中学到js相关知识，一举两得！话不多说，接下来小伙伴们跟着小梦一起也动手试试吧！
虎年春节倒计时局部效果图
虎年春节倒计时全局效果图，灰常可爱的小老虎呀~
js关键代码实现
window.oqq空间上传视频nload=function starttime(){ // 2022年春节时间 time(h1,'2022/2/1'); // 计时器 timer = ttimeout(starttime,1000); } function time(斗折蛇行obj,springtime){ // 获取当前时间 var nowtime = new date().gettime(); // 获取未来时间 var futruetime = new date(springtime).gettime(); // 获取当前时间到未来时间之差 var mtime = futruetime-nowtime; // 毫秒/1000 var time = (mtime/1000); // 天 var day = parint(time/(24*60*60)); 古木阴中系短篷// 小时 var hour = parint(time/(60*60))-24*day; // 分 var minute = parint(time%3600/60); var cond = parint(time%60); obj.innerhtml="<br> 虎年春节倒计时：<br> "+day+"天"+hour+"小时"+minute+"分"+cond+"秒"+"<br><span><br>龙腾虎跃，虎虎虎虎！</span>"; return true; }上述代码中实现倒计时的关键点在于ttimeout()函数，ttimeout()函数是一个起到定时器的作用，接快乐小精灵下来为小伙伴们简单讲解一下该知识点，在后面大家制作虎年春节倒计时的同时，也能学习与复习相关知识点。
ttimeout()函数
ttimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。
var timerid = ttimeout(func, delay)
在上面代码中，ttimeout函数中有两个参数，第一个参数func是将要延迟执行的函数或一段延迟执行的代码，第二个参数delay是延迟执行的毫秒数。
timer = ttimeout(starttime,1000);
在我们的虎年春节倒计时代码中，starttime是要延迟执行的函数，1000是延迟1s，也就是每隔1秒执行一次starttime函数来实现倒计时逻辑。
css样式相关代码
<style>h1{ position: fixed; top: 25%; left: 20; width: 100%; transform:translatey(-50%); font-family:'courier new', courier, monospace; font-size: 60px; color: #2c0712; padding: 0 20px;}h1 span{ position: fixed; left: 0; width: 100%; text-align: center;margin-top:250px; font-size:40px;}body{ background-image: url("c:\\urs\\administrator\\desktop\\博客图片\\虎虎.jpg"); background-size: cover; background-repeat: no-repeat; background-position: top center; display: flex; flex-direction: column; align-items: center; min-height: 100vm; margin: 0;</style>css样式用于控制我们的页面规整美观，与js强强结合，在这里小梦就不细说css啦，后期肝一篇css相关内容再分享给大家。
完整代码贴附，复制到thml文件中就可以直接运行啦！小伙伴们可以尝试一下哦~，图片资料有需要的话大家可以留言，小梦看到会发给你滴~
<!doctype html><html><head><meta chart="utf-8"><title>虎年倒计时</title><style>h1{ position: fixed; top: 25%; left: 20; width: 100%; transform:translatey(-50%); font-family:'courier new', courier, monospace; font-size: 60px; color: #2c0712; padding: 0 20px;}h1 span{ position: fixed; left: 0; width: 100%; text-align: center;margin-top:250px; font-size:40px;}body{ background-image: url("c:\\urs\\administrator\\desktop\\博客图片\\虎虎.jpg"); backg网络专业round-size: cover; background-repeat: no-repeat; background-position: top center; display: flex; flex-direction: column; align-items: center; min-height: 100vm; margin: 0;</style> </head><body bgcolor="red"><h1 id="h1"></h1> <script>window.onload=function starttime(){ // 2022年春节时间 time(h1,'2022/2/1'); // 计时器 timer = ttimeout(starttime,1000); } function time(obj,springtime){ // 获取当前时间 var nowtime = new date().gettime(); // 获取未来时间 var futruetime = new date(springtime).gettime(); // 获取当前时间到未来时间之差 var mtime = futruetime-nowtime; // 毫秒/1000 var time = (mtime/1000); // 天 var day = parint(time/(24*60*60)); // 小时 var hour = parint(time/(60*60))-24*day; // 分 var minute = parint(time%3600/60); var cond = parint(time%60); obj.innerhtml="<br> 虎年春节倒计时：<br> "+day+"天"+hour+"小时"+minute+"分"+cond+"秒"+"<br><span><br>龙腾虎跃，虎虎虎虎！</span>"; return true; }</script></body></html>到此这篇关于javascript用20行代码实现虎年春节倒计时的文章就介绍到这了,更多相关javascript倒计时内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！
本文发布于:2023-04-04 18:45:15，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/9722de5217685955ba7a8aef98781e12.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：JavaScript用20行代码实现虎年春节倒计时.doc
本文 PDF 下载地址：JavaScript用20行代码实现虎年春节倒计时.pdf
| 留言与评论（共有 0 条评论） |
