HTML 脚本

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 脚本 | 菜鸟教程

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值