实验笔记——前端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 实验室/笔记本中突出显示检查函数的源代码