Date对象创建带小时分钟秒的日期格式

倒计时：
  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>Document</title>
  8     <style>
  9 
 10     /* a */
 11     .seckill-countdown {
 12     position: relative;
 13     float: left;
 14     width: 190px;
 15     height: 260px;
 16     color: #fff;
 17     background-color: #e83632;
 18     background-image: url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/4a15d8883775742e3efbb850ae14def7.png);
 19     background-size: contain;
 20     background-position: 50%;
 21     background-repeat: no-repeat;
 22     }
 23     
 24     a {
 25     color: #666;
 26     text-decoration: none;
 27     }
 28 
 29     * {
 30         margin: 0;
 31         padding: 0;
 32     }
 33     user agent stylesheet
 34     a:-webkit-any-link {
 35         color: -webkit-link;
 36         cursor: pointer;
 37         text-decoration: underline;
 38     }
 39     body {
 40         -webkit-font-smoothing: antialiased;
 41         background-color: #fff;
 42         font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
 43         color: #666;
 44     }
 45 
 46 
 47     /* countdown-title */
 48     .seckill-countdown .countdown-title {
 49     width: 100%;
 50     text-align: center;
 51     font-size: 30px;
 52     font-weight: 700;
 53     margin-top: 31px;
 54     }
 55 
 56     /* countdown-desc */
 57     .seckill-countdown .countdown-desc {
 58     margin-top: 90px;
 59     font-size: 14px;
 60     text-align: center;
 61     }
 62 
 63     .seckill-countdown .countdown-main {
 64     margin-left: auto;
 65     margin-right: auto;
 66     width: 130px;
 67     height: 30px;
 68     margin-top: 10px;
 69     display: block;
 70     }
 71 
 72     .seckill-countdown .countdown-main .timmer__unit {
 73     position: relative;
 74     float: left;
 75     width: 30px;
 76     height: 30px;
 77     text-align: center;
 78     background-color: #2f3430;
 79     margin-right: 20px;
 80     color: white;
 81     font-size: 20px;
 82     }
 83 
 84     .seckill-countdown .countdown-main .timmer__unit--second {
 85     margin-right: 0;
 86     }
 87 
 88 
 89     .seckill-countdown .countdown-main .timmer__unit:after {
 90     content: ":";
 91     display: block;
 92     position: absolute;
 93     right: -20px;
 94     font-weight: bolder;
 95     font-size: 18px;
 96     width: 20px;
 97     height: 100%;
 98     top: 0;
 99     }
100     .seckill-countdown .countdown-main .timmer__unit--second:after {
101     content: none;
102 }
103     
104     </style>
105 </head>
106 <body>
107     <a class="seckill-countdown" href="https://miaosha.jd.com/" target="_blank" clstag="h|keycount|core|seckill_a">
108         <div class="countdown-title">京东秒杀</div>
109         <div>
110             <div class="countdown-desc">
111                 <strong>20:00</strong>点场 距结束
112             </div>
113             <div id ="container">
114                 <!-- js输出倒计时时间 -->
115             </div>
116         </div>
117     </a>
118 
119     <script>
120         function countDown(){
121             var target = new Date("2021/4/21 20:00:00");
122             var r = target.getTime() - Date.now();
123             var hours = parseInt( r / 1000 / 3600 % 24);
124             var minutes = parseInt( r / 1000 / 60 % 60);
125             var seconds = parseInt( r / 1000 % 60);
126             if (hours < 10) hours = '0' + hours;
127             if (minutes < 10) minutes = '0' + minutes;
128             if (seconds < 10) seconds = '0' + seconds;
129             var html =  '<span class="timmer countdown-main">' +
130                         '<span class="timmer__unit timmer__unit--hour">'+ hours +'</span>'+ 
131                         '<span class="timmer__unit timmer__unit--minute">' + minutes +'</span>' + 
132                         '<span class="timmer__unit timmer__unit--second">' + seconds + '</span>' + 
133                         '</span>';
134             container.innerHTML = html;
135         }
136         setInterval( countDown , 1000);
137         countDown();
138 
139 
140         
141     </script>
142 </body>
143 </html>
posted on 2021-04-20 20:52 Topcoder-V 阅读(92) 评论(0) 编辑收藏举报