温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么用JavaScript代码实现虎年春节倒计时

发布时间:2022-01-26 08:59:46 来源:亿速云 阅读:107 作者:iii 栏目:开发技术

这篇文章主要介绍“怎么用JavaScript代码实现虎年春节倒计时”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么用JavaScript代码实现虎年春节倒计时”文章能帮助大家解决问题。

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

怎么用JavaScript代码实现虎年春节倒计时

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

怎么用JavaScript代码实现虎年春节倒计时

JS关键代码实现

window.onload=function starttime(){
        // 2022年春节时间
        time(h2,'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>
h2{
  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;
}
h2 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>
h2{
  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;
}
h2 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">
<h2 id="h2"></h2>
 
<script>
window.onload=function starttime(){
        // 2022年春节时间
        time(h2,'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代码实现虎年春节倒计时

关于“怎么用JavaScript代码实现虎年春节倒计时”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI