Web前端开发技术：实验14-16-CSDN博客

本文链接：https://blog.csdn.net/KslgmrDry/article/details/120249481

实验14

1. 编写JavaScript程序实现“九九乘法口诀”表，如图14-40所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
</head>
<body>
    <h1>九九乘法表</h1>
</body>
<script>
    for (let i = 1; i <= 9; i++) {
        for (let j = 1; j <= i; j++) {
            document.write(i + "*" + j + "=" + i * j + " ");
        }
        document.write('<br />')
    }
</script>
</html>

2. 编写JavaScript代码，找出符合条件的数。如图14-41所示。

（1）页面标题为：“找出符合条件的数”；

（2）页面内容为：3号标题标记显示“找出1000~9999之间能够被17和13同时整除的整数的个数及累加和”，要求输出区间累计有多少个符合条件的整数，并计算符合条件的整数的累加和，同时输出符合条件的整数，输出格式：每行10个整数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>找出符合条件的数</title>
</head>
<body>
    <h3>找出1000~9999之间能够被17和13同时整除的整数个数及累加和</h3>
</body>
<script>
    let count = 0, sum = 0;
    document.write("区间中符合条件的数共有（输出格式：10个1行）<br />");
    for (let num = 1000; num <= 9999; num++) {
        if (num % 13 === 0 && num % 17 === 0) {
            document.write(num + " ");
            count++;
            sum += num;
            if (count % 10 === 0) document.write('<br />');
        }
    }
    document.write(`<br />区间中符合条件的数共有个${count}<br />个`);
    document.write(`区间中符合条件的数的累加和为${sum}`);
</script>
</html>

实验15

1. 编写JavaScript代码实现用户登录时数据合法性校验功能，界面如图15-16所示，具体要求如下：

（1）必填项验证——用户名文本输入框、密码输入框必须含有值。

（2）有效性验证——用户名、密码长度大于等于8个字符，小于等于20个字符。

（3）当提交数据时，如果输入框中的数据不合法，则给出对应的提示信息并将焦点聚焦到对应的输入框上。

提示：使用域和域标题进行窗口布局，背景颜色为#663399。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单处理</title>
    <style>
        body {
            background: #663399;
        }
        legend {
            color: white;
            font-size: 24px;
            font-weight: bold;
            text-align: left;
        }
        fieldset {
            padding: 20px;
            text-align: center;
        }
        input {
            margin: 20px;
        }
        label {
            width: 50px;
            text-align: left;
            display: inline-block;
        }
    </style>
</head>
<body>
    <form action="/" method="POST" onsubmit="return controller()">
        <fieldset>
            <legend>用户登录</legend><br />
            <label for="username">用户名</label>
            <input type="username" name="username" id="username" autocomplete="on" /><br />
            <label for="password">密码</label>
            <input type="password" name="password" id="password" /><br />
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </fieldset>
    </form>
</body>
<script>
    const form = document.querySelector('form');
    function requiredVerify(arr) {
        return arr.filter(item => item.value.length === 0);
    }
    function efficientVerify(arr) {
        return arr.filter(item => item.value.length < 8 || item.value.length > 20);
    }
    function controller() {
        const efficient = efficientVerify([form.username, form.password]),
            required = requiredVerify([form.username, form.password]);
        if (required.length) {
            const str = document.querySelector(`label[for=${required[0].id}]`).innerText;
            alert(str + '不能为空');
            required[0].focus();
            return false;
        }
        else if (efficient.length) {
            const str = document.querySelector(`label[for=${efficient[0].id}]`).innerText;
            alert(str + '必须在8-20位')
            efficient[0].focus();
            return false;
        }
        return true;
    }
</script>
</html>

2. 编写JavaScript程序实现单击列表框任一选项时，通过告警消息框显示教材名称及定价，如图15-17所示。

（1）页面标题为“显示列表项的内容”；

（2）页面内容：3号标题标记显示标题“显示列表项的内容”，插入一个大小为5的列表框，用于显示教材名称，教材定价保存在value中，分别如下：

计算机组成原理35元、数据结构38元、计算机网络43元、Java程序设计40元、算法分析28元。

（3）编写displayItem()函数，实现当用户选择某一列表项时通过告警框分行显示选中的教材名称和定价（列表项中的内容和value值）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示列表项的内容</title>
</head>
<body>
    <h3>显示列表项的内容</h3>
    <select size="5" onchange="disaplayItem()">
        <option value="35元">计算机组成原理
        <option value="38元">数据结构
        <option value="43元">计算机网络
        <option value="40元">Java程序设计
        <option value="28元">算法分析
    </select>
</body>
<script>
    function disaplayItem() {
        const select = document.querySelector('select'),
                selectedItem =  select[select.selectedIndex],
            msg = "教材名称："+selectedItem.innerText + "\n"+"定价："+selectedItem.value;
        alert(msg)
    }
</script>
</html>

实验16

1. 设计模拟幸运数字机游戏。设幸运数字为8，每次由计算机随机生成三个1~9之间的随机数，当这三个随机数中有一个数字为8时，就算赢一次，如图16-20所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机幸运数字</title>
</head>
<body></body>
<script>
    function setThreeNumber() {
        const array = [];
        for (let i = 0; i < 3; i++) {
            array.push(Math.floor(Math.random() * 9) + 1);
        }
        return array;
    }
    function judge(array) {
        return array.some(elem => elem === 8);
    }
    let flag = true,
        count = 0,
        winCount = 0;
    while (flag) {
        const array = setThreeNumber(),
            result = array.join('');
        let winOrLose;
        if (judge(array)) {
            winCount++;
            count++;
            winOrLose = '赢';
        } else {
            count++;
            winOrLose = '输';
        }
        const message =result+"\n"+winOrLose+"\n"+
        "您累计玩了"+count+"次，赢了"+winCount+"次，胜率"+Math.floor(winCount / count * 100)+"%,继续吗？";
        if (confirm(message)) {
            flag = true;
        } else {
            flag = false;
        }
    }
</script>
</html>

2. 按如图16-21所示的布局，完成下列功能：

（1）单击“随机产生20个整数”按钮时，能够随机产生20个4为整数（1000~9999），并将产生的20个整数写入到数组，将其从小到大进行排序，输出在多行文本框中；

（2）单击“找出能被5整除的整数”的按钮时，从产生的20个整数中找出能够被5整除的整数，并在多行文本框中输出；

（3）单击“重置”按钮时，将多行文本框中的所有内容清空。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机产生20个4位整数并从小到大进行排序</title>
</head>
<body>
    <textarea id="display" name="display" rows="10" cols="50"></textarea>
    <br />
    <button onclick="setNumbers()">随机产生20个整数</button>
    <button onclick="getNumbers()">找出能被5整除的整数</button>
    <button onclick="reset()">重置</button>
</body>
<script>
    const numArr = [];
    function setNumbers() {
        numArr.length = 0;
        for (let i = 0; i < 20; i++) {
            numArr.push(Math.floor(Math.random()*9000 + 1000)); 
        }
        display.value = "随机产生20个四位整数，分别如下：\n"+numArr.join(',');
        display.value += "\n从小到大排序的结果为：\n"+numArr.sort().join(',');
    }
    function getNumbers() {
        const filterNum = numArr.filter(num => num % 5 === 0);
        display.value += "\n能被5整除的数有：\n"+filterNum.join(',')
    }
    function reset() {
        display.value = "";
        numArr.length = 0;
    }
</script>
</html>