JavaScript实现对象定义、数组操作与表单验证示例-CSDN博客

本文链接：https://blog.csdn.net/qq_62639985/article/details/134533218

1.用三种不同的方式定义学生对象，姓名、学号、性别、年龄、学校、专业、班级年级，可以上课、写作业、做实验等。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>三种方法定义学生对象</title>
</head>

<body>
    <script>
        // 使用构造函数定义学生对象
        function Student1(name, id, gender, age, school, major, grade) {
            this.name = name;
            this.id = id;
            this.gender = gender;
            this.age = age;
            this.school = school;
            this.major = major;
            this.grade = grade;
            this.attendClass = function () {
                console.log(this.name + "正在上课");
            };
            this.doHomework = function () {
                console.log(this.name + "正在写作业");
            };
            this.doExperiment = function () {
                console.log(this.name + "正在做实验");
            };
        }
        var stu1 = new Student1("小宋", "001", "男", 21, "山东科技大学", "计算机科学与技术", "2021级1班");
        console.log(stu1);

        // 使用对象字面量定义学生对象
        var stu2 = {
            name: "小亚",
            id: "002",
            gender: "女",
            age: 19,
            school: "山东科技大学",
            major: "计算机科学与技术",
            grade: "2021级2班",
            attendClass: function () {
                console.log(this.name + "正在上课");
            },
            doHomework: function () {
                console.log(this.name + "正在写作业");
            },
            doExperiment: function () {
                console.log(this.name + "正在做实验");
            }
        };
        console.log(stu2);

        // 使用ES6的类定义学生对象
        class Student3 {
            constructor(name, id, gender, age, school, major, grade) {
                this.name = name;
                this.id = id;
                this.gender = gender;
                this.age = age;
                this.school = school;
                this.major = major;
                this.grade = grade;
            }
            attendClass() {
                console.log(this.name + "正在上课");
            }
            doHomework() {
                console.log(this.name + "正在写作业");
            }
            doExperiment() {
                console.log(this.name + "正在做实验");
            }
        }
        var stu3 = new Student3("小轩", "003", "男", 20, "山东科技大学", "计算机科学与技术", "2021级3班");
        console.log(stu3);
    </script>
</body>

</html>

2.写一个函数，参数是数组a，能够返回a出现最多的元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function mostFrequentElement(arr) {
            // 创建一个空对象，用于存储每个元素及其出现次数  
            let frequencyObj = {};

            // 遍历数组中的每个元素  
            for (let i = 0; i < arr.length; i++) {
                // 如果元素已经在对象中，增加其计数  
                if (frequencyObj[arr[i]]) {
                    frequencyObj[arr[i]]++;
                } else {
                    // 否则，将元素添加到对象中并设置计数为1  
                    frequencyObj[arr[i]] = 1;
                }
            }

            // 将对象转换为数组并按照出现次数降序排序  
            let sortedFreq = Object.entries(frequencyObj).sort((a, b) => b[1] - a[1]);

            // 返回出现次数最多的元素  
            return sortedFreq[0][0];
        }
        let arr = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4];
        console.log(mostFrequentElement(arr));  // 输出：4
    </script>
</body>

</html>

3.制作一个密码输入控件，能够通过小眼睛按钮控制内容以密码形式显示还是以明文形式显示。提示:改变input的type属性。

<!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">
    <title>Document</title>

</head>
<style>
    /* 为div设置样式 */
    #box {
        width: 400px;
        border: 1px solid #ccc;
        margin: 100px auto;
        padding: 1px;
        position: relative;
    }

    /* 为input设置样式 */
    #box input {
        width: 370px;
        height: 30px;
        border: 0;
        outline: none;
    }

    /* 为img设置样式 */
    #box img {
        position: absolute;
        top: 4px;
        right: 6px;
        width: 24px;
    }
</style>

<body>
    <div id="box">
        <input type="password" id="pwd">
        <img src="close_eye.png" id="eye">
    </div>
    <script>
        //1、获取元素
        var pwd = document.getElementById("pwd");
        var eye = document.getElementById("eye");
        var flag = 0;//默认眼睛是关上的
        //2、注册事件，定义事件处理程序
        eye.onclick = function () {
            if (flag == 0) {
                pwd.type = "text";//密码框样式换成文本，即可显示密码
                eye.src = "open_eye.png";
                flag = 1;
            } else {
                pwd.type = "password";//文本框换成密码框
                eye.src = "close_eye.png";
                flag = 0;
            }
        }
    </script>
</body>

</html>

4.实现复选框全选和全不选的效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            padding-left: 100px;
        }
        div{
            height: 200px;
            width: 200px;
            background-color: rgba(153, 195, 209, 0.635)
        }
    </style>
</head>

<body>
    <div>
        <strong>选中数5</strong></strong><input type="checkbox" id="selectAllCheckbox">
        <span style="padding-left: 38px;"><strong>name</strong></span> <br>
        <input type="checkbox" class="checkbox"><span>小明</span> <br>
        <input type="checkbox" class="checkbox"><span>小红</span> <br>
        <input type="checkbox" class="checkbox"><span>小蓝</span> <br>
        <input type="checkbox" class="checkbox"><span>小bai</span> <br>
        <input type="checkbox" class="checkbox"><span>王小二</span> <br>
    </div>

    <script>
        document.getElementById("selectAllCheckbox").addEventListener("click", function () {
            // 获取所有的复选框  
            let checkboxes = document.querySelectorAll(".checkbox");
            // 遍历复选框  
            for (let i = 0; i < checkboxes.length; i++) {
                // 如果全选框被选中，则选中所有复选框；如果全选框未被选中，则取消所有复选框的选中状态  
                checkboxes[i].checked = this.checked;
            }
        });
    </script>
</body>

</html>

5.做一个简易计算器。
它能够处理加、减、乘、除四种基本的数学运算。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input id="num1" type="number" placeholder="输入第一个数字">
    <select id="operator">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input id="num2" type="number" placeholder="输入第二个数字">
    <button onclick="calculate()">计算</button>
    <h2 id="result"></h2>
    <script>
        function calculate() {
            let num1 = document.getElementById('num1').value;
            let num2 = document.getElementById('num2').value;
            let operator = document.getElementById('operator').value;
            let result;

            switch (operator) {
                case '+':
                    result = Number(num1) + Number(num2);
                    break;
                case '-':
                    result = Number(num1) - Number(num2);
                    break;
                case '*':
                    result = Number(num1) * Number(num2);
                    break;
                case '/':
                    if (num2 != 0) {
                        result = Number(num1) / Number(num2);
                    } else {
                        alert("除数不能为0");
                        return;
                    }
                    break;
                default:
                    alert("无效的操作符");
                    return;
            }
            document.getElementById('result').innerText = "结果: " + result;
        }
    </script>
</body>

</html>

6.制作注册表单，能够提交用户名、2个初始密码（设置密码和确认密码）、电子邮件、手机号等内容，提交时验证下述4项：是否为空、设置密码和确认密码是否匹配、密码是否符合复杂度要求(密码必须包含至少一个小写字母、一个大写字母和一个数字，且长度至少为6位)、手机号长度和是否均为数字、电子由件的@符号和.符号。采用点击提交时进行验证和离开输入框时进行验证两种方式。

<!DOCTYPE html>
<html>

<head>
    <title>注册表单</title>
    <style>
        .error {
            color: red;
        }
    </style>
</head>

<body>
    <h1>注册表单</h1>
    <form id="registrationForm" onsubmit="return validateForm()">
        <div>
            <label for="username">用户名:</label>
            <input type="text" id="username" required>
        </div>
        <div>
            <label for="password">设置密码:</label>
            <input type="password" id="password" required>
        </div>
        <div>
            <label for="confirmPassword">确认密码:</label>
            <input type="password" id="confirmPassword" required>
        </div>
        <div>
            <label for="email">电子邮件:</label>
            <input type="email" id="email" required>
        </div>
        <div>
            <label for="phone">手机号:</label>
            <input type="tel" id="phone" required>
        </div>
        <div>
            <input type="submit" value="注册">
        </div>
    </form>

    <script>
        function validateForm() {
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            var confirmPassword = document.getElementById('confirmPassword').value;
            var email = document.getElementById('email').value;
            var phone = document.getElementById('phone').value;
            var isValid = true;

            if (username.trim() === '') {
                displayErrorMessage('username', '用户名不能为空');
                isValid = false;
            } else {
                hideErrorMessage('username');
            }

            if (password.trim() === '') {
                displayErrorMessage('password', '设置密码不能为空');
                isValid = false;
            } else {
                hideErrorMessage('password');
            }

            if (confirmPassword.trim() === '') {
                displayErrorMessage('confirmPassword', '确认密码不能为空');
                isValid = false;
            } else if (password !== confirmPassword) {
                displayErrorMessage('confirmPassword', '设置密码与确认密码不匹配');
                isValid = false;
            } else {
                hideErrorMessage('confirmPassword');
            }

            if (password.length < 6 || !/[a-z]/.test(password) || !/[A-Z]/.test(password) || !/\d/.test(password)) {
                displayErrorMessage('password', '密码必须包含至少一个小写字母、一个大写字母和一个数字，且长度至少为6位');
                isValid = false;
            } else {
                hideErrorMessage('password');
            }

            if (email.trim() === '') {
                displayErrorMessage('email', '电子邮件不能为空');
                isValid = false;
            } else if (!/\S+@\S+\.\S+/.test(email)) {
                displayErrorMessage('email', '电子邮件格式不正确');
                isValid = false;
            } else {
                hideErrorMessage('email');
            }

            if (phone.length !== 11 || !/^\d+$/.test(phone)) {
                displayErrorMessage('phone', '手机号必须为11位数字');
                isValid = false;
            } else {
                hideErrorMessage('phone');
            }

            return isValid;
        }

        function displayErrorMessage(fieldId, message) {
            var errorMessage = document.getElementById(fieldId + 'Error');
            if (errorMessage) {
                errorMessage.textContent = message;
            } else {
                var field = document.getElementById(fieldId);
                var newErrorMessage = document.createElement('span');
                newErrorMessage.id = fieldId + 'Error';
                newErrorMessage.className = 'error';
                newErrorMessage.textContent = message;
                field.parentNode.appendChild(newErrorMessage);
            }
        }

        function hideErrorMessage(fieldId) {
            var errorMessage = document.getElementById(fieldId + 'Error');
            if (errorMessage) {
                errorMessage.parentNode.removeChild(errorMessage);
            }
        }

        // 离开输入框时进行验证
        var inputs = document.getElementsByTagName('input');
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].addEventListener('blur', function (e) {
                validateForm();
            });
        }
    </script>
</body>
</html>

javascript练习