网络编程
位置：首页>> 网络编程>> JavaScript>> JavaScript实现前端倒计时效果

JavaScript实现前端倒计时效果

作者：L在前方　　发布时间：2024-06-05 09:34:10　

标签：js,倒计时

本文实例为大家分享了JavaScript实现前端倒计时效果的具体代码，供大家参考，具体内容如下

JavaScript实现前端倒计时效果

代码：


<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
   div {
     padding: 10px;
     font-size: 100px;
   }

p {
     float: left;
     width: 300px;
     height: 300px;
     border: 1px solid #000000;
     color: #ffffff;
     background-color: #333333;
     text-align: center;
     line-height: 300px;
   }
 </style>
</head>

<body>
 <div>
   <p class="hour">1</p>
   <p class="minute">2</p>
   <p class="second">3</p>
 </div>
 <script>
   window.addEventListener('load', function() {
     //获取元素
     var hour = document.querySelector('.hour'); //小时的黑盒子
     var minute = document.querySelector('.minute'); //分钟的黑色盒子
     var second = document.querySelector('.second'); //秒数的黑色盒子
     var inputTime = +new Date('2021-2-6 18:00:00'); //返回的是用户输入时间总的毫秒数
     countDown(); //先调用一次这个函数，防止第一次刷新页面有空白
     //开启定时器
     setInterval(countDown, 1000);

function countDown() {
       var nowTime = +new Date(); //返回的是当前时间总的毫秒数
       var times = (inputTime - nowTime) / 1000; //tiems是剩余时间总的毫秒数
       var h = parseInt(times / 60 / 60 ％ 24); //时
       h = h < 10 ? '0' + h : h;
       hour.innerHTML = h; //把剩余的小时给小时黑盒子
       var m = parseInt(times / 60 ％ 60); //分
       m = m < 10 ? '0' + m : m;
       minute.innerHTML = m;
       var s = parseInt(times ％ 60); //当前的秒
       s = s < 10 ? '0' + s : s;
       second.innerHTML = s;
     }
   })
</script>

来源：https://blog.csdn.net/qq_45828598/article/details/113727446

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com