倒计时案例

代码 代码 1398 人阅读 | 0 人回复

<
1、html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>倒计时</title>
  8.     <style>
  9.     .div {
  10.         width: 190px;
  11.         height: 260px;
  12.         background: url(&#39;../bg.png&#39;);
  13.         margin: 100px auto;      
  14.     }
  15.     a {
  16.         text-decoration: none;
  17.         color: #fff;
  18.         font-weight: 700;
  19.         font-size: 28px;
  20.     }
  21.     .text {
  22.         display: inline-block;
  23.         width: 100%;
  24.         text-align: center;
  25.         margin-top: 20px;
  26.     }
  27.     .box {
  28.         width: 100%;
  29.         margin-top: 120px;
  30.         text-align: center;
  31.     }
  32.     .box span {
  33.         display: inline-block;
  34.         width: 30px;
  35.         height: 30px;
  36.         background-color: #2f3430;
  37.         font-size: 18px;
  38.         text-align: center;
  39.         line-height: 30px;
  40.         position: relative;
  41.     }
  42.     .hour:after {
  43.         content: &#39;:&#39;;
  44.         position: absolute;
  45.         right: -6px;
  46.         top: 0;
  47.     }
  48.     .minute:after {
  49.         content: &#39;:&#39;;
  50.         position: absolute;
  51.         right: -6px;
  52.         top: 0;
  53.     }
  54.     </style>
  55.    
  56. </head>
  57. <body>
  58.     <a href="#">
  59.         <div class="div">
  60.             倒计时
  61.             <div class="box">
  62.                 1
  63.                 2
  64.                 3
  65.             </div>
  66.         </div>
  67.     </a>
  68.     <script type="text/javascript" src="index.js"></script>
  69. </body>
  70. </html>
复造代码
2、js代码

  1. // 获得元素
  2. var hour = document.querySelector(&#39;.hour&#39;);
  3. var minute = document.querySelector(&#39;.minute&#39;);
  4. var second = document.querySelector(&#39;.second&#39;);
  5. // 开启按时器
  6. setInterval(timer,1000);
  7. function timer() {
  8.     // 获得当前体系工夫
  9.     var timeNow = new Date();
  10.     // 脚动设置的工夫
  11.     var newTime = new Date(&#39;2021-09-01 00:00:00&#39;);
  12.     // 盈余工夫的工夫戳转换为秒
  13.     var times = (newTime - timeNow) / 1000;
  14.     // 赋值给span
  15.     var hours  = parseInt(times / 60 / 60 % 24); // 时
  16.     var minutes = parseInt(times / 60 % 60); // 分
  17.     var seconds = parseInt(times % 60); // 秒
  18.     hours = hours < 10 ? &#39;0&#39;+ hours:hours;  // 假如单元数前里便补0
  19.     minutes = minutes < 10 ? &#39;0&#39; + minutes:minutes;
  20.     seconds = seconds < 10 ? &#39;0&#39;+seconds:seconds;
  21.     // 赋值给元素
  22.     hour.innerHTML = hours;
  23.     minute.innerHTML = minutes;
  24.     second.innerHTML = seconds;
  25. }
  26. timer(); // 挪用函数
复造代码
免责声明:假如进犯了您的权益,请联络站少,我们会实时删除侵权内乱容,感谢协作!
1、本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,按照目前互联网开放的原则,我们将在不通知作者的情况下,转载文章;如果原文明确注明“禁止转载”,我们一定不会转载。如果我们转载的文章不符合作者的版权声明或者作者不想让我们转载您的文章的话,请您发送邮箱:Cdnjson@163.com提供相关证明,我们将积极配合您!
2、本网站转载文章仅为传播更多信息之目的,凡在本网站出现的信息,均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性,但不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。
3、任何透过本网站网页而链接及得到的资讯、产品及服务,本网站概不负责,亦不负任何法律责任。
4、本网站所刊发、转载的文章,其版权均归原作者所有,如其他媒体、网站或个人从本网下载使用,请在转载有关文章时务必尊重该文章的著作权,保留本网注明的“稿件来源”,并自负版权等法律责任。
回复 关闭延时

使用道具 举报

 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则