信息管理实践第六周周记

最新推荐文章于 2024-09-16 08:47:17 发布

梦瑾い

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量269

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/bili_meng_jin/article/details/116272609

版权

这篇博客介绍了如何使用JavaScript响应HTMLDOM事件，如点击显示元素内容，以及如何实现表单输入后的文本显示。通过示例代码展示了如何在用户点击后改变页面元素的内容，包括显示作者名字和当前时间。此外，还展示了输入文本后点击按钮显示输入内容的功能，用于基础的表单验证概念。

摘要由CSDN通过智能技术生成

第六周周记

知识点

1.HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
2.HTML 表单验证可以通过 JavaScript 来完成。

网页展示

点击显示事件

点击前：

挨个点击后：
在这里插入图片描述

输入文本显示

点击前：
在这里插入图片描述
输入并点击后：

代码

点击显示事件

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title></title> 
    </head>
    <body>
        <p onclick="display()">显示作者名字</p>
        <p id="a1"></p>
        <p onclick="displayDate()">显示当前时间</p>
        <p id="a2"></p>
    <script>
        function display(){
            document.getElementById("a1").innerHTML='LSQ';
        }
        function displayDate(){
        	document.getElementById("a2").innerHTML=Date();
        }
    </script>
    </body>
</html>

输入文本显示

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
		<p>在下方显示框输入文本</p>
        <input id="a1">
        <p onclick="Function()">点击显示文本</p>
        <p id="a2"></p>
        <script>
            function Function() {
                var text;
                text = document.getElementById("a1").value;
                document.getElementById("a2").innerHTML=text;
            }
        </script>
    </body>
</html>