zoukankan      html  css  js  c++  java
  • 倒计时时钟-原创

    功能:

    1.实时显示距离目标年份剩余时间,精确到秒

    2.支持输入年份参数

    遇到的问题总结:

    1.window.setInterval(fn,s),其中fn参数需要使用""包裹,否则计时器只执行一次,不能实时显示。

    2.两个日期相减,得到的是毫秒数;需要转换成需要的单位(天+小时+分钟+秒)

    效果图:

    源码:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     6 <title>Examples</title>
     7 <meta name="description" content="">
     8 <meta name="keywords" content="">
     9 <link href="" rel="stylesheet">
    10 <style>
    11     #t{
    12         font-size: 1.5em;
    13         height:100px;
    14         width:600px;
    15         border:3px dotted #FFAACC;
    16         line-height: 100px;
    17         text-align:center;
    18         border-radius: 30px;
    19     }
    20     .mid{
    21         position:absolute;
    22         left:50%;
    23         top:50%;
    24         margin:-50px 0 0 -300px;
    25     }
    26 </style>
    27 </head>
    28 <body>
    29     <div id="t" class="mid"></div>
    30     <script type="text/javascript">
    31         function getDiffTime(y){
    32             var n = new Date("12/31/"+(y-1) +" 23:59:59");
    33             var c = new Date();
    34             var diff=n-c;
    35             var d=diff/(24*60*60*1000);
    36             var h=(d-Math.floor(d))*24;
    37             var m=(h-Math.floor(h))*60;
    38             var s=(m-Math.floor(m))*60;
    39             var str = "距离"+y+"年,还剩余"+Math.floor(d)+""+Math.floor(h)+"小时"+Math.floor(m)+"分钟"+Math.floor(s)+"";
    40             var divt = document.getElementById("t");
    41             t.innerHTML=str;
    42         }
    43         window.onload=init();
    44         function init(){
    45             var auto =window.setInterval("getDiffTime(2016)",1000);
    46         }
    47     </script>
    48 </body>
    49 </html>
    View Code
  • 相关阅读:
    CORS跨域漏洞学习
    CVE-2020-0796漏洞复现(RCE)
    Wfuzz使用学习
    DNSlog注入学习
    一些CTF练习记录
    数据结构与算法(十三):赫夫曼树
    数据结构与算法(十二):堆排序
    博客园自定义代码块样式
    Nginx入门(二):常用功能配置
    数据结构与算法(十一):二叉树
  • 原文地址:https://www.cnblogs.com/WebMobile/p/4133061.html
Copyright © 2011-2022 走看看