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

    JS倒计时Date

    代码如下:

     1 <style type="text/css">
     2 * {
     3 margin: 0;
     4 padding: 0;
     5 }
     6 
     7 #box {
     8 border: 1px solid cyan;
     9 background-color: #000;
    10 height: 50px;
    11 width: 500px;
    12 margin: 100px auto 0;
    13 border-radius: 20px;
    14 text-align: center;
    15 }
    16 
    17 #sj {
    18 margin: 5px 0 5px 0;
    19 color: darkgray;
    20 width: 500px;
    21 border-radius: 20px;
    22 height: 40px;
    23 font-size: 30px;
    24 text-shadow: 2px 10px 5px #FFFFF0;
    25 }
    26 
    27 #djs {
    28 height: 120px;
    29 width: 500px;
    30 color: darkgray;
    31 text-align: center;
    32 border-radius: 20px;
    33 margin: 100px auto 0;
    34 background-color: #000;
    35 border: 1px solid cyan;
    36 }
    37 </style>
    38 
    39  
    40 
    41  
    42 
    43 <body>
    44 <div id="box">
    45 <p id="sj"></p>
    46 </div>
    47 <h1 id="djs"></h1>
    48 <script type="text/javascript">
    49 var time = new Date;
    50 //加上定时器,让它每隔一秒刷新
    51 setInterval(function() {
    52 var time = new Date;
    53 var year = time.getFullYear();
    54 var month = time.getMonth() + 1;
    55 var dat = time.getDate();
    56 var hours = time.getHours();
    57 var mm = time.getMinutes();
    58 var ss = time.getSeconds();
    59 sj.innerText = year + "" + month + "" + dat + "" + hours + "" + mm + "" + ss + "";
    60 }, 1000);
    61 
    62 //倒计时:
    63 //我们来定义一个未来时间 用它来进行倒计时。
    64 setInterval(function(){
    65 var time = new Date;
    66 var future = new Date(2019, 04, 02, 0, 0, 0);
    67 
    68 
    69 var p = (future - time) / 1000;
    70 //时分秒转换公式     
    71 var day = Math.floor(p / 86400);
    72 var h = Math.floor(p % 86400 / 3600);
    73 var m = Math.floor(p % 86400 % 3600 / 60);
    74 var s = Math.floor(p % 60);
    75 //我们加了</br>标签,所以要改用djs.innerHTML
    76 djs.innerHTML ="距离4月2号还有:</br></br>"+ day + "" + h + "" + m+ "" + s + "";
    77 },1000);
    78 
    79 
    80 //另外有两个写很不错打的可以直接引用 http://momentjs.cn day.js
    81 </script>
    82 </body>
  • 相关阅读:
    6.5 列出当前目录所有文件
    6.4 协程写文件
    6.3 写文件
    6.2 创建空目录
    6.1 os 获取文件状态
    5.13 json
    es2016
    短路原理
    fexbox
    vue @
  • 原文地址:https://www.cnblogs.com/xuyx/p/10637109.html
Copyright © 2011-2022 走看看