javascript实现情人节倒计时效果，可以吗？

最新推荐文章于 2023-10-29 09:21:38 发布

@longlong程序员

最新推荐文章于 2023-10-29 09:21:38 发布

阅读量161

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2302_76420666/article/details/130629762

版权

最近在学习js，发现js还是挺有意思的，今天学完js基础，想来试一试用js去实现一个倒计时效果，等我们写完成代码后，代码中的时间和文字都是可以修改的，我这里只是用情人节举一个例子，哈哈哈哈，要实现这个效果呢，我们要用到js中的时间和日期相关的知识，不想看文章的可以直接跳到最后拿代码哦，因为我的文章写的也不怎么样，哈哈哈哈哈。。。

首先，我们的思路是创建好一个日期和两个变量，情人节是8月22日，我们就用8月22日减去我们现在的时间，把它赋值给一个变量，我们在用这个变量去做为倒计时的时间。

 var targetData = new Date("2023/8/22")

  //console.log(targettime-currenData)
   function diffTime(current , target){
       var sub = Math.ceil((target-current)/1000)
       var day = parseInt(sub/(60*60*24))
       var hours = parseInt(sub%(60*60*24)/(60*60))
       var minutes = parseInt(sub%(60*60)/60)
       var seconds = sub%60
      //console.log(hours)
            var obj={
                day:day,
                hours:hours, 
                minutes:minutes, 
                seconds:seconds
            }
            return obj

  }

上面代码中我们创建了一个函数和一个对象用来获取距离情人节8月22日还有多少天，时，分，秒。函数中的两个参数一个是8月22日，一个是我们现在的时间，函数是我们以后要调用的。接下来我们在用一个延时计时器就可以实现了，把延时计时器的参数设置为1000，这里的1000指的是1000毫秒，也就是1秒，我们就可以让时间1秒1秒的倒计时了。

setInterval(function(){
   var currenData = new Date()
   var res = diffTime(currenData , targetData)
            
   box.innerHTML = `距离情人节还有${res.day}天${res.hours}时
   ${res.minutes}分${res.seconds}秒 `

},1000)

在上面的代码中，我们还要创建一个div盒子，并给这个盒子绑定事件，我们还可以用css设计一下这个盒子。

<div id="box" style="height: 400px; width: 400px;position: absolute; top :0;left:0; right:0; bottom: 0;margin: auto;">

</div>

这样我们创建设计了一个盒子，并且用box.innerHTML的方式给这个盒子绑定了事件，最后再调用对象就可以了，到这里代码就写完啦。

这个是在浏览器中的运行效果：

全部代码如下：

<body>
    <div id="box" style="height: 400px; width: 400px;position: absolute; top :0;left:0; right:0; bottom: 0;margin: auto;">

</div>
    <script>
        //var currenData = new Date()
        var targetData = new Date("2023/8/22")

        //console.log(targettime-currenData)
        function diffTime(current , target){
            var sub = Math.ceil((target-current)/1000)
            var day = parseInt(sub/(60*60*24))
            var hours = parseInt(sub%(60*60*24)/(60*60))
            var minutes = parseInt(sub%(60*60)/60)
            var seconds = sub%60
            

            var obj={
                day:day,
                hours:hours, 
                minutes:minutes, 
                seconds:seconds
            }
            return obj

        }
        
        setInterval(function(){
            var currenData = new Date()
            var res = diffTime(currenData , targetData)
            
            box.innerHTML = `距离情人节还有${res.day}天${res.hours}时
            ${res.minutes}分${res.seconds}秒 `

        },1000)
    </script>
</body>

其实还是比较简单的，谢谢各位的浏览啦！