实验笔记——前端1：显示当前时间
Posted 叶落未落
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实验笔记——前端1：显示当前时间相关的知识，希望对你有一定的参考价值。
一、实验目的
实践DOM编程之文本内容修改，在网页上设置一个按钮，点击后显示当前时间。
二、实验环境
vscode; firefox
三、实验原理
1.“文档对象模型（DOM，Document Object Model）是html和XML文档的编程接口。DOM表示有多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。” 摘自《javascript高级程序设计》；
2.document对象的querySelector()和getElementByXX()方法可以获取节点；
3.节点对象的innerText和innerHTML属性对应节点的文本内容，innerText不识别标签并忽略空格和换行，innerHTML识别标签且不忽略空格和换行，innerHTML是H3C标准推荐使用这个；
4.javascript内置对象Date()可以提供时间。
四、实验步骤
1.准备好HTML和CSS；
2.封装函数getDate()以获取时间；
2.获取页面中的button对象，并绑定onclick事件（点击后调用函数获取当前时间）。
五、代码
<html>
<head>
<title>test</title>
</head>
<body>
<button>显示当前时间</button>
<div>时间</div>
<script>
function getDate() {
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth();
const dates = date.getDate();
const arr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
const day = date.getDay();
return "今天是" + year + "年" + month + "月" + dates + "日" + arr[day];
}
const btn = document.querySelector("button");
const div = document.querySelector("div");
btn.onclick = function() {
div.innerHTML = getDate();
}
</script>
</body>
</html>
以上是关于实验笔记——前端1：显示当前时间的主要内容，如果未能解决你的问题，请参考以下文章
在 Jupyter 实验室/笔记本中突出显示检查函数的源代码