大家好,本文将围绕js中如何动态显示日期时间展开说明,javascript设置指定年月日是一个很多人都想弄明白的事情,想搞清楚js动态显示当前时间需要先了解以下几个事情。
一、基本思路
创建showTime()函数,利用JavaScript中的Date对象的属性及方法获取时间,利用Window对象的 setInterval() 方法按照指定的周期(以毫秒计)来调用函数或计算表达式。最后利用document对象实现在页面上显示Python中的所有运算符号。
二、代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>显示时间</title> </head> <body onload="showTime()"> <> function showTime() { var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; //因为month属性从0开始所以加1 var day = date.getDate(); // 日 var week = date.getDay(); // 星期几,是个数字 var hour = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); second = second < 10 ? "0" + second : second; var current = year + "-" + month + "-" + day + " " + "星期" + week + " " + hour + ":" + minute + ":" + second; document.getElementById("time").innerHTML = current; } setInterval("showTime()", 1000);//每隔1000毫秒(即1秒)显示一次当前时间 </> <span id="time"></span> </body> </html>
复制
结果
三、优化
- 调整星期的显示格式,用汉字替换数字
- 对于月、日、时、分、秒,数字小于10时,用0放前面补充为2位数字
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>显示时间</title> </head> <body onload="showTime()"> <> function showTime() { var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; month = month < 10 ? "0" + month : month; var day = date.getDate(); day = day < 10 ? "0" + day : day; var week = "日一二三四五六".charAt(date.getDay()); // 使用charAt函数提取相应汉字 var hour = date.getHours(); hour = hour < 10 ? "0" + hour : hour; // 用三目运算符调整数字显示格式 var minute = date.getMinutes(); minute = minute < 10 ? "0" + minute : minute; var second = date.getSeconds(); second = second < 10 ? "0" + second : second; var current = year + "-" + month + "-" + day + " " + "星期" + week + " " + hour + ":" + minute + ":" + second; document.getElementById("time").innerHTML = current; } setInterval("showTime()", 1000); </> <span id="time"></span> </body> </html>
复制