脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript倒计时

JavaScript用20行代码实现虎年春节倒计时

 更新时间：2022年01月25日 16:32:07   作者：_超 梦  
春节将至，相信大家跟小编一样很激动呀。为了迎接虎年春节到来，小编为大家准备了一个虎年春节倒计时，仅20行代码用js就实现啦。感兴趣的可以动手试一试

春节将至，小梦相信大家跟小朦梦一样很激动呀。为了迎接虎年春节到来，小梦撸了一个虎年春节倒计时，仅20行代码用js就实现啦，是不是很简单呢？我们用这20行代码不仅能做个虎年春节倒计时，还能从中学到JS相关知识，一举两得！话不多说，接下来小伙伴们跟着小梦一起也动手试试吧！

虎年春节倒计时局部效果图

虎年春节倒计时全局效果图，灰常可爱的小老虎呀~

JS关键代码实现

window.onload=function starttime(){
        // 2022年春节时间
        time(h1,'2022/2/1');
        // 计时器
        timer = setTimeout(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 = parseInt(time/(24*60*60)); 
        // 小时 
        var hour = parseInt(time/(60*60))-24*day; 
        // 分   
        var minute = parseInt(time%3600/60);  
        var second = parseInt(time%60); 
        obj.innerHTML="<br>      虎年春节倒计时：<br>     "+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"<br><span><br>龙腾虎跃，虎虎虎虎！</span>";
        return true;
    }

上述代码中实现倒计时的关键点在于setTimeout()函数，setTimeout()函数是一个起到定时器的作用，接下来为小伙伴们简单讲解一下该知识点，在后面大家制作虎年春节倒计时的同时，也能学习与复习相关知识点。

setTimeout()函数

setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

var timerId = setTimeout(func, delay)

在上面代码中，setTimeout函数中有两个参数，第一个参数func是将要延迟执行的函数或一段延迟执行的代码，第二个参数delay是延迟执行的毫秒数。

timer = setTimeout(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:\\Users\\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 charset="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:\\Users\\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>
 
</head>
<body bgcolor="red">
<h1 id="h1"></h1>
 
<script>
window.onload=function starttime(){
        // 2022年春节时间
        time(h1,'2022/2/1');
        // 计时器
        timer = setTimeout(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 = parseInt(time/(24*60*60)); 
        // 小时 
        var hour = parseInt(time/(60*60))-24*day; 
        // 分   
        var minute = parseInt(time%3600/60);  
        var second = parseInt(time%60); 
        obj.innerHTML="<br>      虎年春节倒计时：<br>     "+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"<br><span><br>龙腾虎跃，虎虎虎虎！</span>";
        return true;
    }
</script>
</body>
</html>

到此这篇关于JavaScript用20行代码实现虎年春节倒计时的文章就介绍到这了,更多相关JavaScript倒计时内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript实现类似淘宝的购物车效果

    JavaScript实现类似淘宝的购物车效果

    这篇文章主要介绍了JavaScript实现购物车特效的相关资料，文中通过示例代码详细介绍了，利用Javascript如何实现类似淘宝购物车中商品的单选、全选、删除、修改等功能，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-03-03
  • JS数组的高级使用方法示例小结

    JS数组的高级使用方法示例小结

    这篇文章主要介绍了JS数组的高级使用方法,结合实例形式总结分析了JavaScript数组的增删改查、排序、随机数等相关操作技巧,需要的朋友可以参考下
    2020-03-03
  • 基于JS简单实现手持弹幕功能+文字抖动特效代码

    基于JS简单实现手持弹幕功能+文字抖动特效代码

    这篇文章主要介绍了基于JS简单实现手持弹幕功能+文字抖动特效代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-03-03
  • JavaScript获取某一天所在的星期

    JavaScript获取某一天所在的星期

    我们会遇到的需求是，获取今天或者某一天所在星期的开始和结束日期。今天小编通过实例代码给大家分享JavaScript获取某一天所在的星期，感兴趣的朋友跟随小编一起看看吧
    2019-09-09
  • js中的事件捕捉模型与冒泡模型实例分析

    js中的事件捕捉模型与冒泡模型实例分析

    这篇文章主要介绍了js中的事件捕捉模型与冒泡模型,实例分析了js事件的执行顺序与冒泡模型的原理,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • avalon js实现仿微博拖动图片排序

    avalon js实现仿微博拖动图片排序

    玩微博的朋友都上传过图像吧，当图片上传后用户是可以随意拖动图片的，调整图片的顺序，那么此功能是怎么实现的，下面小编通过此篇文章给大家详解基于avalon js实现仿微博拖动图片排序，需要的朋友可以参考下
    2015-08-08
  • JS delegate与live浅析

    JS delegate与live浅析

    这篇文章主要介绍了JS delegate与live，有需要的朋友可以参考一下
    2013-12-12
  • 记录一次websocket封装的过程

    记录一次websocket封装的过程

    这篇文章主要介绍了记录一次websocket封装的过程，帮助大家更好的理解和封装websocket，感兴趣的朋友可以了解下
    2020-11-11
  • JS中如何实现复选框全选功能

    JS中如何实现复选框全选功能

    本文通过实例代码给大家介绍了js中实现复选框全选功能，代码简单易懂，非常不错，需要的朋友参考下
    2016-12-12
  • Bootbox将后台JSON数据填充Form表单的实例代码

    Bootbox将后台JSON数据填充Form表单的实例代码

    通过控制器创建一个Index视图，写入下列HTML代码，这里我创建了一个分部视图，不创建直接写在同一个页面也是一样的效果。这篇文章主要介绍了Bootbox将后台JSON数据填充Form表单 ,需要的朋友可以参考下
    2018-09-09

最新评论