代码：
<!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 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>
效果：
