HTML 脚本

最新推荐文章于 2024-04-12 09:29:54 发布

文丑颜不良啊

最新推荐文章于 2024-04-12 09:29:54 发布

阅读量2k

点赞数 2

本文链接：https://blog.csdn.net/jiaomubai/article/details/127089387

版权

HTML 与 CSS 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

html 页面与 JavaScript 脚本混合使用可以使原本的页面具有更强的动态和交互性。通过 <script> 标签来定义客户端脚本，比如 JavaScript。<script> 标签既可包含脚本语句，也可通过 src 属性指向外部脚本文件。JavaScript 最常用于图片操作、表单验证、事件响应以及内容动态更新等。当然也可以通过 <script> 标签在 html 页面上直接输出一段内容，如：

但是这种操作与直接在 html 的 body 中写 "Hello World !!!" 的效果一致，所以这并不是 html 脚本的正确使用方法。

常见的 html 脚本的使用方法如下：

动态更改页面样式(事件响应)

如上图所示，我们在 html 文件中创建了一个段落 <p>，设置了该段落的唯一标识 id 为 "p_id"，之后再该段落下边定义了一个按钮 button，点击该按钮会触发 "changeStyle()" 方法，而该方法的定义和实现则在 html 的 head 文件中使用 <script> 标签去关联，即我们代码中指定的 base.js。

function changeStyle() {
    var x;
    // 获取内容
    x = document.getElementById("p_id");
    // 修改样式
    x.style.color="#6495ED";
    x.style.fontSize="20px";
}

在该 js 文件中，我们改变段落中的内容的字体颜色和字体大小，因此，点击 "改变样式" 按钮之后的页面展示就为：

改变页面样式算是一种最基本的 html 的用处了，这种用处其实可以被称为事件响应。比如说我们可以通过页面按钮的事件相应去获取当前时间。操作方法与上面类似：

其实最常用的是通过 javaScript 脚本去验证表格中的内容，如，当选择 "有" 爱好时，内容正常显示，如果选择 "无" 爱好，则隐藏爱好的具体内容。

该表格有一行两列，第一列为是否有爱好列，td 的唯一标识记作 "td_1"，两个取值为单选框，单选框的名称记为 "hobby"，第二列为具体的爱好项，td 的唯一标识记作 "td_2"。当选择有无爱好时，会触发 "check()" 方法，该方法中会首先拿到选择项的内容，即选择的到底是有爱好，还是五爱好，如果没有爱好，则隐藏 "td_2" 的内容；如果有爱好，则正常展示。演示效果为：

可能是因为我的表格设置了宽度和高度的样式，导致第二次选择有爱好时页面展示内容不符合预期。希望有懂的大佬指教一下！！！

通过 JavaScript 脚本去验证表格内容应该是 html 使用 javaScript 脚本最大、最常用的用处了，比如常见的对输入框中的内容进行合法性校验之类，都是通过 javaScript 脚本实现的。

本文涉及到的所有代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../resource/javaScripts/base.js" type="text/javascript"></script>
    <title>HTML 脚本示例</title>
</head>
<body>

    <script>document.write("Hello World !!!")</script>
    <hr />

    <h3>html 使用脚本更改页面样式</h3>
    <p id="p_id">
        待更改样式的文本内容
    </p>
    <button type="button" onclick="changeStyle()">更改样式</button>
    <hr />

    <h3>html 使用脚本获取当前时间</h3>
    <p id="p_id">
        当前时间为：
    </p>
    <p id="p_id2"></p>
    <button type="button" onclick="getDate()">获取时间</button>
    <hr />

    <h3>html 使用脚本验证表格内容</h3>
    <table width="60%" border="1" cellspacing="1" cellpadding="4" bgcolor="#cccccc" align="center">
        <tr>
            <td id="td_1" width="30%">
                <p>爱好:
                    <input type="radio" name="hobby" value="yes" onclick="check();" />有
                    <input type="radio" name="hobby" value="no" onclick="check();" />无
                </p>
            </td>
            <td width="30%" id="td_2">
                <input type="radio" name="hobby2" value="eat" />吃<br />
                <input type="radio" name="hobby2" value="sleep" />睡
            </td>
        </tr>
    </table>

</body>
</html>

js 代码：

function changeStyle() {
    var x;
    // 获取内容
    x = document.getElementById("p_id");
    // 修改样式
    x.style.color="#6495ED";
    x.style.fontSize="20px";
}

function getDate() {
    var date = new Date();
    // 获取年分
    var year = date.getFullYear();
    // 获取月份
    var month = date.getMonth() + 1;
    // 获取日期
    var strDate = date.getDate();
    // 获取小时
	var hour = date.getHours();
    // 获取分钟
	var minute = date.getMinutes();
    // 获取秒
	var second = date.getSeconds();
 
    if (month >= 1 && month <= 9) {
        month = '0' + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate;
    }
    if (minute >= 0 && minute <= 9) {
        minute = '0' + minute;
    }
    if (second >= 0 && second <= 9) {
        second = '0' + second;
    }
    var currentdate = `${year}-${month}-${strDate} ${hour}:${minute}:${second}`;
    document.getElementById("p_id2").innerHTML=currentdate;
}

function check() {
    var value = document.getElementsByName("hobby");
    for (var i = 0; i < value.length; i++) {
        if (value[i].checked) {
            if (value[i].value == "no") {
            document.getElementById("td_2").style.display="none";
            } else {
                document.getElementById("td_2").style.display="block";
            }
        } 
    }
}

本文参考自：HTML 脚本 | 菜鸟教程