时钟 倒计时 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>无缝滚动动画</title>
 6     <script type="text/javascript">
 7         window.onload = function(){
 8             function fnGet(){
 9                 var oDiv = document.getElementById("box");
10                 var sTime = new Date();
11                 var iYear = sTime.getFullYear();
12                 var iMonth = sTime.getMonth()+1;
13                 var iDay = sTime.getDay();
14                 var iHours = sTime.getHours();
15                 var iMinutes = sTime.getMinutes();
16                 var iSeconds = sTime.getSeconds();
17                 var sTr = iYear+'年'+iMonth+'月'+iDay+'日'+iHours+'时'+iMinutes+'分'+fnTonormal(iSeconds)+'秒';
18                 oDiv.innerHTML = sTr;
19             }
20             function fnTonormal(iSeconds){
21                 if(iSeconds<10)
22                     return '0'+iSeconds;
23                 else
24                     return iSeconds;
25             }
26 
27             //解决第一次会有空白问题
28             fnGet();
29             setInterval(fnGet,1000);
30         }
31     </script>
32     <style type="text/css">
33         .box{
34             background-color:lightgreen;
35             font-size:30px;
36             width:600px;
37             height:50px;
38             line-height:50px;
39             color:#000;
40             text-align:center;
41             margin:50px auto 0;
42         }
43     </style>
44 </head>
45 <body>
46 <div class="box" id="box">
47 </div>
48 </body>
49 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>无缝滚动动画</title>
 6     <script type="text/javascript">
 7         window.onload = function(){
 8         var oDiv = document.getElementById('box');
 9         function fnGet(){
10             var sNow = new Date();
11             var sFuture = new Date(2019,3,30,24,0,0);
12             var iLeft = parseInt((sFuture - sNow)/1000);
13             var iDays = parseInt(iLeft/86400);
14             var iHours = parseInt((iLeft%86400)/3600);
15             var iMinutes = parseInt((iLeft%86400%3600)/60);
16             var iSeconds = parseInt(iLeft%60);
17             var sTr = '距离5月1日还剩：'+ iDays + '天' + fnTodou(iHours) + '时' +
18                             fnTodou(iMinutes) + '分'+ fnTodou(iSeconds) + '秒';
19             oDiv.innerHTML = sTr;
20             }
21             function fnTodou(n){
22 
23                 if(n<10)
24                 {
25                     return '0'+n;
26                 }
27                 else{
28                     return n;
29                 }
30             }
31             fnGet();
32             setInterval(fnGet,1000);
33         }
34     </script>
35     <style type="text/css">
36         .box{
37             background-color:lightgreen;
38             font-size:30px;
39             width:900px;
40             height:50px;
41             line-height:50px;
42             color:#000;
43             text-align:center;
44             margin:50px auto 0;
45         }
46     </style>
47 </head>
48 <body>
49 <div class="box" id="box">
50 </div>
51 </body>
52 </html>

 

posted @ 2019-03-20 11:03  Priceless  阅读(179)  评论(0)    收藏  举报