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

找出当前显示的片段是啥的最佳方法是啥?

js-权威指南学习笔记14

20179223《Linux内核原理与分析》第十一周学习笔记

2019BJFU 网站设计(孙俏-web前端开发)实验代码-181002222