自定义日期格式-炫酷

Posted taohuaya

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义日期格式-炫酷相关的知识，希望对你有一定的参考价值。

代码：

 

技术分享图片 
  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>
查看代码

浏览器效果：

 

技术分享图片

 

以上是关于自定义日期格式-炫酷的主要内容，如果未能解决你的问题，请参考以下文章

EXCEl表格里如何输入自定义格式的日期

自定义 Xcode 片段库

如何在 Java 中解析自定义的多种日期格式

TextBox 日期控件 - 日期格式自定义 asp.net

jqGrid 字符串自定义格式，如日期格式

炫酷 CSS 背景效果的 10 个代码片段