Web前端课程复习题

打包下载链接：https://class.csz718.me/web.zip

第一题：自定义函数计算

编写程序, 实现自定义函数total，函数指定两个参数price和num，分别代表商品的单价和数量，在函数体内计算商品的总价，并输出，并对该函数进行调用。


x
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>total函数</title>
</head>
<body>
    <h2>自定义函数total计算商品总价</h2>
    <div id="result"></div>

    <script>
        function total(price, num) {
            var totalPrice = price * num;
            document.getElementById('result').innerHTML =
                '单价：' + price + ' 元，数量：' + num + '，总价：' + totalPrice + ' 元';
            return totalPrice;
        }

        total(25, 4);
    </script>
</body>
</html>

第二题：五秒弹窗

编写程序,实现在页面上每隔5秒钟就弹出一个显示当前时间的对话框。


xxxxxxxxxx
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>每隔5秒弹出当前时间</title>
</head>
<body>
    <h2>每隔5秒钟弹出显示当前时间的对话框</h2>
    <p>页面打开后，每隔5秒会弹出一个显示当前时间的对话框。</p>

    <script>
        function showCurrentTime() {
            var now = new Date();
            var timeStr = now.toLocaleTimeString();
            alert('当前时间：' + timeStr);
        }

        setInterval(showCurrentTime, 5000);
    </script>
</body>
</html>

第三题：随机答题

编写程序，实现随机答题小游戏，在程序中，系统随机生成两数相加的表达式，用户给出答案，系统判断答案是否正确。一轮答题结束后，询问是否继续，如果是，则继续进行答题，否则退出程序。程序运行后，用户根据提示输入答案，系统会给出判断，并提示是否继续。单击“确定”按钮会重新开始，单击“取消”按钮会退出程序。


xxxxxxxxxx
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>随机答题小游戏</title>
</head>
<body>
    <h2>随机答题小游戏</h2>
    <p>系统随机生成两数相加的表达式，请输入答案。</p>

    <script>
        function playGame() {
            var num1 = Math.floor(Math.random() * 100);
            var num2 = Math.floor(Math.random() * 100);
            var correctAnswer = num1 + num2;

            var userInput = prompt('请计算：' + num1 + ' + ' + num2 + ' = ?');

            if (userInput === null) {
                alert('退出程序');
                return;
            }

            var userAnswer = Number(userInput);

            if (userAnswer === correctAnswer) {
                alert('回答正确！');
            } else {
                alert('回答错误！正确答案是：' + correctAnswer);
            }

            var continuePlay = confirm('是否继续答题？');
            if (continuePlay) {
                playGame();
            } else {
                alert('感谢参与，退出程序！');
            }
        }

        playGame();
    </script>
</body>
</html>

第四题：猴子大王

写程序，利用循环及数组知识实现“猴子选大王”趣味小游戏，游戏基本规则为一群猴子排成一圈，按照“1，2，3，......，n”依次编号。之后从第1只猴子开始报数，数到第m只时，把它踢出圈，它后面的猴子再次从1开始报数，数到第m只猴子再把它踢出圈......，如此不停地进行下去，直到最后剩下一只猴子为止，那只猴子就是同学们们要找的大王，具体要求如下：

① 通过输入文本框输入猴子总数量。

② 通过输入文本框输入踢出第几只猴子。

③ 最后输出猴子大王编号。


xxxxxxxxxx
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>猴子选大王</title>
</head>
<body>
    <h2>猴子选大王</h2>
    <label>猴子总数量：<input type="number" id="monkeyCount" value="10"></label><br><br>
    <label>踢出第几只：<input type="number" id="kickNum" value="3"></label><br><br>
    <button onclick="findKing()">找出大王</button>
    <p id="result"></p>

    <script>
        function findKing() {
            var n = parseInt(document.getElementById('monkeyCount').value);
            var m = parseInt(document.getElementById('kickNum').value);

            if (isNaN(n) || isNaN(m) || n < 1 || m < 1) {
                document.getElementById('result').innerText = '请输入有效的正整数';
                return;
            }

            var monkeys = [];
            for (var i = 1; i <= n; i++) {
                monkeys.push(i);
            }

            var index = 0;
            while (monkeys.length > 1) {
                index = (index + m - 1) % monkeys.length;
                monkeys.splice(index, 1);
            }

            document.getElementById('result').innerText = '猴子大王的编号是：' + monkeys[0];
        }
    </script>
</body>
</html>

第五题：计时器

利用BOM中的定时器实现简单计时器，HTML和CSS代码已经给出，计时器具体功能如下：

① 单击【启动计时器】按钮，系统从0秒开始计时，每隔1秒增1。

② 单击【停止计时器】按钮，系统停止计时，当再次单击【启动计时器】按钮时，计时器继续累加计时。

③ 单击【重启计时器】按钮，系统从0秒开始计时。


xxxxxxxxxx
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>计时器</title>
        <style>
            #box{
                width: 280px;
                height: 80px;
                margin: 20px auto;
                background-color: plum;
                text-align: center;
            }
            #showCount{
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="showCount">计时0秒</div>
            <button onclick="start()">启动计时器</button>
            <button onclick="stop()">停止计时器</button>
            <button onclick="reStart()">重启计时器</button>
        </div>
        <script>
            var seconds = 0;
            var timer = null;

            function start() {
                if (timer !== null) return;
                timer = setInterval(function () {
                    seconds++;
                    document.getElementById('showCount').innerText = '计时' + seconds + '秒';
                }, 1000);
            }

            function stop() {
                clearInterval(timer);
                timer = null;
            }

            function reStart() {
                stop();
                seconds = 0;
                document.getElementById('showCount').innerText = '计时0秒';
            }
        </script>
    </body>
</html>