JS完成时间实时更新(Date)
程序员文章站
2022-07-02 11:29:57
今天学习了JS的Date对象,看到老师做了一个时间实时检测程序,我也手撸一下。这个程序我在body中调用了currenttime()函数,原因:提高用户体验,我们知道JS是脚本语言,无需编译,边解释边执行,但是解析过程中,浏览器首先会解析HTML文件构造DOM树,然后解析CSS文件构建渲染树,渲染树构建完成后,浏览器开始布局渲染树并将其绘制到屏幕。这个过程非常复杂,涉及到两个概念:reflow 和 repaint。页面首次加载的时候,reflow和repaint过程都会发生,这两个过程都很消耗性能,尤其...
今天学习了JS的Date对象,看到老师做了一个时间实时检测程序,我也手撸一下。
这个程序我在body中调用了currenttime()函数,原因:提高用户体验,我们知道JS是脚本语言,无需编译,边解释边执行,但是解析过程中,浏览器首先会解析HTML文件构造DOM树,然后解析CSS文件构建渲染树,渲染树构建完成后,浏览器开始布局渲染树并将其绘制到屏幕。这个过程非常复杂,涉及到两个概念:reflow 和 repaint。
页面首次加载的时候,reflow和repaint过程都会发生,这两个过程都很消耗性能,尤其是reflow,如果优化的不好,会造成很坏的用户体验。
详细请参考
因此我们可以进行优化,这个例子中我们可以在body中进行首次加载,可以节约大约1s的解析时间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示当前日期</title>
</head>
<body onload="currenttime()">
<h1 align="center" id="htime" style="color: blue"></h1>
</body>
<script language=JavaScript>
function currenttime(){
var now =new Date();
var week =now.getDay();
var str="";
switch (week) {
case 0:
str="星期日";break;
case 1:
str="星期一";break;
case 2:
str="星期二";break;
case 3:
str="星期三";break;
case 4:
str="星期四";break;
case 5:
str="星期五";break;
case 6:
str="星期六";break;
}
document.getElementById("htime").innerHTML='今天是:'+now.getFullYear()+'年'+(now.getMonth()+1)+'月'+now.getDate()+'日'+now.getHours()+'时'+now.getMinutes()+'分'+now.getSeconds()+'秒 '+str;
}setInterval("currenttime()", 1000);
</script>
</html>
思路:设置date对象的元素值now(这里其实也是一个对象now),表示现在的时间;之后通过date的getDay属性获取周几,由于JS中周日对应数字是:0,周一对应数字是:1
星期 | Value |
---|---|
日 | 0 |
一 | 1 |
二 | 2 |
三 | 3 |
四 | 4 |
五 | 5 |
六 | 6 |
这里var 定义出str存储星期几,str=‘’;
默认为字符串类型。
最后就是document(DOM)通过元素的id为其赋值(这个值为HTML类型),相当于放到<h1>中的字符串</h>
额好吧我是来凑文章数量的,毕竟jS我是真的没有认真学过,哎我菜菜的人生…
本文地址:https://blog.csdn.net/qq_46144237/article/details/109243612