第8章 JavaScript对象模型

习题解答

🙈 隐藏所有答案

编程题

1. 编写程序实现按时间随机变化的网页背景，如图 8-12 所示。
图 8-12 随机背景效果1 图 8-12 随机背景效果2

这道题用 setInterval 定时器每隔几秒随机更换页面背景颜色。就像给网页装了一个"变色灯"，每隔一段时间自动换一种颜色。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>按时间随机变化的网页背景</title>
    <style>
        body { text-align: center; transition: background-color 0.5s; }
        h1 { margin-top: 100px; color: #fff; font-size: 28px;
             text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
    </style>
</head>
<body>
    <h1>按时间随机变化的网页背景</h1>
    <script type="text/javascript">
        // 生成随机颜色的函数
        function randomColor() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        }

        // 每2秒更换一次背景颜色
        setInterval(function() {
            document.body.style.backgroundColor = randomColor();
        }, 2000);

        // 页面加载时先设置一次
        document.body.style.backgroundColor = randomColor();
    </script>
</body>
</html>

代码要点说明：

  • Math.random() 生成 0~1 之间的随机小数，乘以 256 再取整得到 0~255 的颜色值。
  • setInterval(函数, 毫秒) 每隔指定时间反复执行函数，2000 毫秒 = 2 秒。
  • document.body.style.backgroundColor 通过 DOM 操作修改页面背景色。

📖 参见 8.1.2 window 对象（setTimeout/setInterval）、8.1.3 document 对象（document.body）

2. 使用 window 对象的 setTimeout() 方法和 clearTimeout() 方法设计一个简单的计时器。当单击"开始计时"按钮后启动计时器，文本框从 0 开始进行计时；单击"暂停计时"按钮后暂停计时，如图 8-13 所示。
图 8-13 计时器初始 图 8-13 计时中

计时器的原理：用一个变量记录秒数，用 setTimeout 每隔1秒让秒数加1，想暂停就用 clearTimeout 停掉定时器。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>简单的计时器</title>
</head>
<body>
    <!-- 显示秒数的文本框 -->
    <input type="text" id="timer" value="0" size="5" readonly />
    <!-- 开始和暂停按钮 -->
    <input type="button" value="开始计时" onclick="startTimer()" />
    <input type="button" value="暂停计时" onclick="stopTimer()" />

    <script type="text/javascript">
        var count = 0;    // 计数器
        var timer = null; // 保存定时器ID

        function startTimer() {
            // 先清除之前的定时器，防止重复启动
            clearTimeout(timer);
            count++; // 秒数+1
            document.getElementById("timer").value = count;
            // 1秒后再次调用自己，形成循环
            timer = setTimeout(startTimer, 1000);
        }

        function stopTimer() {
            // 清除定时器，计时暂停
            clearTimeout(timer);
        }
    </script>
</body>
</html>

代码要点说明：

  • setTimeout(函数, 1000) 延迟1秒执行一次，配合递归调用实现持续计时。
  • clearTimeout(timer) 取消定时器，实现暂停功能。
  • 开始前先 clearTimeout，防止用户多次点击"开始"导致多个定时器同时运行。

📖 参见 8.1.2 window 对象（setTimeout/clearTimeout）

3. 使用对象的事件编程实现当用户选择下拉菜单的颜色时，文本框的字体颜色跟随改变，如图 8-14 所示。
图 8-14 下拉改字体颜色

通过下拉框的 onchange 事件，获取用户选择的颜色值，然后修改文本框的文字颜色。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用下拉文本框改变字体颜色</title>
</head>
<body>
    <!-- 文本输入框 -->
    <input type="text" id="txt" value="变换的文字" style="font-size:18px;" />

    <!-- 颜色选择下拉菜单 -->
    <select id="colorSelect" onchange="changeColor()">
        <option value="black">黑</option>
        <option value="yellow">黄</option>
        <option value="blue">蓝</option>
        <option value="green">绿</option>
        <option value="red">红</option>
        <option value="purple">紫</option>
    </select>

    <script type="text/javascript">
        function changeColor() {
            // 获取下拉菜单选中的颜色值
            var color = document.getElementById("colorSelect").value;
            // 修改文本框的字体颜色
            document.getElementById("txt").style.color = color;
        }
    </script>
</body>
</html>

代码要点说明：

  • onchange 事件在下拉菜单的选项被改变时触发。
  • select.value 获取当前选中的 <option> 的 value 值。
  • style.color 修改元素的文字颜色。

📖 参见 8.1.3 document 对象（getElementById）、8.2 DOM 的对象

4. 制作一个禁止使用鼠标右键操作的网页。当浏览者在网页中的图片上右击时，弹出一个警告对话框提示"网站展示的图片禁止下载!"，如图 8-15 所示。
图 8-15 禁止右键弹窗

通过监听 oncontextmenu（右键菜单）事件，弹出警告并阻止默认的右键菜单弹出。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>展示图片</title>
</head>
<body>
    <h2>此网页显示</h2>
    <!-- 用占位色块替代实际图片，实际使用时替换src为真实图片路径 -->
    <div style="width:300px;height:200px;background:#8a9b6e;
         display:flex;align-items:center;justify-content:center;color:#fff;">
        风景图片占位
    </div>

    <script type="text/javascript">
        // 禁止整个页面的右键菜单
        document.oncontextmenu = function(e) {
            alert("网站展示的图片禁止下载!");
            return false; // 阻止默认的右键菜单弹出
        }
    </script>
</body>
</html>

代码要点说明：

  • document.oncontextmenu 监听右键菜单事件。
  • return false 阻止浏览器默认弹出右键菜单。
  • alert() 弹出警告对话框提醒用户。

📖 参见 8.1.3 document 对象、8.1.2 window 对象（alert）

5. 编写程序实现年月日的联动功能，当改变"年""月"菜单的值时，"日"菜单的值的范围也会相应地改变，如图 8-16 所示。
图 8-16 年月日联动

年月日联动的关键在于：不同月份的天数不同（大月31天、小月30天、2月要看是否闰年）。每当用户改变"年"或"月"时，就重新计算"日"的选项。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>年月日的联动</title>
</head>
<body>
    <!-- 年份下拉 -->
    <select id="year" onchange="updateDays()"></select>年
    <!-- 月份下拉 -->
    <select id="month" onchange="updateDays()"></select>月
    <!-- 日期下拉 -->
    <select id="day"></select>日

    <script type="text/javascript">
        var yearSel = document.getElementById("year");
        var monthSel = document.getElementById("month");
        var daySel = document.getElementById("day");

        // 初始化年份选项（2000~2030）
        for (var y = 2000; y <= 2030; y++) {
            var opt = document.createElement("option");
            opt.value = y;
            opt.textContent = y;
            yearSel.appendChild(opt);
        }
        yearSel.value = 2020; // 默认2020年

        // 初始化月份选项（1~12）
        for (var m = 1; m <= 12; m++) {
            var opt = document.createElement("option");
            opt.value = m;
            opt.textContent = m;
            monthSel.appendChild(opt);
        }
        monthSel.value = 2; // 默认2月

        // 获取某年某月的天数
        function getDays(year, month) {
            // 用下个月的第0天，就是本月的最后一天
            return new Date(year, month, 0).getDate();
        }

        // 更新日期下拉选项
        function updateDays() {
            var year = parseInt(yearSel.value);
            var month = parseInt(monthSel.value);
            var days = getDays(year, month);
            // 记住之前选的日期
            var oldDay = parseInt(daySel.value) || 1;
            // 清空旧选项
            daySel.innerHTML = "";
            // 生成新选项
            for (var d = 1; d <= days; d++) {
                var opt = document.createElement("option");
                opt.value = d;
                opt.textContent = d;
                daySel.appendChild(opt);
            }
            // 尽量保持之前选的日期
            daySel.value = Math.min(oldDay, days);
        }

        // 页面加载时初始化日期
        updateDays();
    </script>
</body>
</html>

代码要点说明：

  • new Date(year, month, 0).getDate() 是获取某月天数的技巧——"下个月的第0天"就是"本月的最后一天"。
  • 闰年2月29天的判断已包含在 Date 对象的内部逻辑中，不需要手动判断。
  • 年或月改变时通过 onchange 触发 updateDays() 重新生成日的选项。

📖 参见 8.1.2 window 对象、8.2 DOM 的对象（createElement/appendChild/innerHTML）

6. 设计简易加法计算器，如图 8-17 所示。
图 8-17 简易加法计算器

从截图看：两个输入框中间有"+"号，右边有"="按钮，点击后在最右边的框里显示加法结果。比第7章的四则运算计算器更简单，只做加法。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>简易加法计算器</title>
</head>
<body>
    <!-- 第一个数 -->
    <input type="text" id="num1" size="10" />
    +
    <!-- 第二个数 -->
    <input type="text" id="num2" size="10" />
    <!-- 等号按钮 -->
    <input type="button" value="=" onclick="calc()" />
    <!-- 结果 -->
    <input type="text" id="result" size="10" readonly />

    <script type="text/javascript">
        function calc() {
            // 获取两个输入框的值并转为数字
            var a = parseFloat(document.getElementById("num1").value);
            var b = parseFloat(document.getElementById("num2").value);
            // 计算结果并显示
            document.getElementById("result").value = a + b;
        }
    </script>
</body>
</html>

代码要点说明：

  • parseFloat() 把字符串转为浮点数，否则 "100"+"200" 会得到字符串拼接 "100200"。
  • getElementById().value 获取/设置输入框的值。
  • 结果框加了 readonly 属性，防止用户手动修改结果。

📖 参见 8.1.3 document 对象（getElementById）、8.2 DOM 的对象