自定义日期（时间）格式

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义日期格式</title>
    <script>
            /*中外记月份和星期的区别
            
                 .getMonth()
                月份
                0~11
             */
            
            /*
            
                 .getDay()
                星期
                0~6
                0代表的星期日
*/    



        var d = new Date();//获取当前日期
        //自定义展示当前时间的函数
        function showTime(){
            var year = d.getFullYear();//获取日期对象的年
            var month = d.getMonth() + 1;//获取日期对象的月  外国人是从0 开始数月份的
            var date = d.getDate();//获取日期对象的天
            var week = d.getDay();//一周中的第几天
            var hour = d.getHours();//小时
            var min = d.getMinutes();//分钟
            var sec = d.getSeconds();//秒
            return year + '年' + doubleNum(month) + '月' + doubleNum(date) + '日 星期' + chineseFromNum(week) + ' ' + doubleNum(hour) + ':' + doubleNum(min) + ':' + doubleNum(sec);
        }

        //单数变双数
        function doubleNum(num){
            if(num < 10){
                return '0' + num;
            }else{
                return num;
            }
        }

        //将数字转换成中文数字的函数
        function chineseFromNum(num){
            switch(num){
                case 0:
                    return '天';
                    break;
                case 1:
                    return '一';
                    break;
                case 2:
                    return '二';
                    break;
                case 3:
                    return '三';
                    break;
                case 4:
                    return '四';
                    break;
                case 5:
                    return '五';
                    break;
                case 6:
                    return '六';
                    break;
                default:
                    return 'error';
                    break;
            }
        }



        alert(showTime());//2018年08月30日 星期四 11:28:20

    </script>

</head>
<body>
    
</body>
</html>

效果：

我们把它输入到页面上并利用定时器（setInterval）实时更新

1.首先把上例中自定义日期对象的函数封装到一个tool.js文件里，用的时候直接调用即可。

tool.js 代码内容如下

 1         function showTime(){
 2             var d = new Date();//获取当前日期
 3             var year = d.getFullYear();//获取日期对象的年
 4             var month = d.getMonth() + 1;//获取日期对象的月  外国人是从0 开始数月份的
 5             var date = d.getDate();//获取日期对象的天
 6             var week = d.getDay();//一周中的第几天
 7             var hour = d.getHours();//小时
 8             var min = d.getMinutes();//分钟
 9             var sec = d.getSeconds();//秒
10             return year + '年' + doubleNum(month) + '月' + doubleNum(date) + '日 星期' + chineseFromNum(week) + ' ' + doubleNum(hour) + ':' + doubleNum(min) + ':' + doubleNum(sec);
11         }
12 
13         //单数变双数
14         function doubleNum(num){
15             if(num < 10){
16                 return '0' + num;
17             }else{
18                 return num;
19             }
20         }
21 
22         //将数字转换成中文数字的函数
23         function chineseFromNum(num){
24             switch(num){
25                 case 0:
26                     return '天';
27                     break;
28                 case 1:
29                     return '一';
30                     break;
31                 case 2:
32                     return '二';
33                     break;
34                 case 3:
35                     return '三';
36                     break;
37                 case 4:
38                     return '四';
39                     break;
40                 case 5:
41                     return '五';
42                     break;
43                 case 6:
44                     return '六';
45                     break;
46                 default:
47                     return 'error';
48                     break;
49             }
50         }

2.开始编写代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>自定义时间格式-实时更新</title>
 6     <style>
 7         #time1 {
 8             margin: 50px auto;
 9             width: 400px;
10             height: 100px;
11             background: cyan;
12             line-height: 100px;
13             text-align: center;
14             font-size: 24px;
15 
16         }
17     </style>
18     <script src= "tool.js"></script><!--引入封装好的自定义日期的js文件-->
19     <script>
20         window.onload = function(){//等页面加载完毕后执行
21             var time = document.getElementById('time1');//获取文档节点
22             setInterval(function(){//定时器
23                 time.innerHTML = showTime();    //调用封装好的函数showTime();        
24             }, 1000)            
25         }
26 
27     </script>
28 </head>
29 <body>
30     
31 </body>
32     <div id = 'time1'></div>
33 </html>

效果：

自定义日期（时间）格式

猜你喜欢