1. 程式人生 > >自定義日期格式-炫酷

自定義日期格式-炫酷

inf clas hid 輸入 right ctype prompt rip san

代碼:

技術分享圖片
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>自定義日期格式</title>
  6     <style>
  7         *{margin: 0;padding:0;}
  8         html, body{width:100%;height:100%;}
  9         body{background: black url(../bg/bg1.jpg);background-size: 100% 100%}
10 #time{ 11 /* width:400px; */ 12 height:306px ; 13 position:fixed; 14 left:0;right:0;top:0;bottom:0; 15 margin: auto; 16 /* background:black; */ 17 /* line-height: 100px; */ 18 text-align: center; 19
font:bold 100px/1.5 georgia,sans-serif; 20 color:white; 21 text-shadow: 0 0 10px #fff, 22 0 0 20px #fff, 23 0 0 30px #fff, 24 0 0 40px #ff00de, 25 0 0 70px #ff00de, 26 0 0 80px #ff00de,
27 0 0 100px #ff00de, 28 0 0 150px #ff00de; 29 } 30 </style> 31 <script> 32 window.onload = function(){ 33 var oDiv = document.getElementById(‘time‘); 34 setInterval(function(){ 35 oDiv.innerHTML = showTime(); 36 },1000); 37 } 38 39 40 function showTime(){ 41 var d = new Date(); 42 var year = d.getFullYear(); 43 var month = d.getMonth() + 1; 44 var day = d.getDate(); 45 var week = d.getDay(); 46 var hour = d.getHours(); 47 var min = d.getMinutes(); 48 var sec = d.getSeconds(); 49 return year + ‘年‘ + doubleNum(month) + ‘月‘ + doubleNum(day) + ‘日 星期‘ + numOfChinese(week) + ‘ ‘ + doubleNum(hour) + ‘:‘ + doubleNum(min) + ‘:‘ + doubleNum(sec); 50 51 52 53 //單數變雙數 54 function doubleNum(num){ 55 if(num < 10){ 56 return ‘0‘ + num; 57 } 58 return num; 59 } 60 61 //星期 數字轉中文 62 function numOfChinese(num){ 63 switch(num){ 64 case 0: 65 return ‘天‘ 66 break; 67 case 1: 68 return ‘一‘ 69 break; 70 case 2: 71 return ‘二‘ 72 break; 73 case 3: 74 return ‘三‘ 75 break; 76 case 4: 77 return ‘四‘ 78 break; 79 case 5: 80 return ‘五‘ 81 break; 82 case 6: 83 return ‘六‘ 84 break; 85 default: 86 return ‘error‘; 87 break; 88 } 89 } 90 91 92 } 93 94 95 /* var res = prompt(‘輸入‘,‘1‘); 96 97 alert(numOfChinese(Number(res)));*/ 98 99 </script> 100 101 102 103 104 </head> 105 <body> 106 <div id="time"></div> 107 </body> 108 </html>
查看代碼

瀏覽器效果:

技術分享圖片

自定義日期格式-炫酷