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