JavaScript编程之综合案例篇

最新推荐文章于 2024-10-06 12:31:10 发布

mfg_

最新推荐文章于 2024-10-06 12:31:10 发布

阅读量353

点赞数

文章标签： javascript 正则表达式 html

本文链接：https://blog.csdn.net/qq_36288669/article/details/119979095

版权

JavaScript编程之综合案例篇

表单校验

知识点

HTML
CSS
JavaScript正则表达式
JavaScript DOM
JavaScript 事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单校验</title>
</head>
<body>

用户名 ：<input type="text" id="name" autocomplete="off" onblur="validationName()">
<span style="color: blanchedalmond" id="nameValidationInfo"></span> <br/>
密码：<input type="password" id="passsword"><br/>
手机号：<input type="number" id="phonenumber" autocomplete="off" onblur="validationPhonenumber(this.value)"><span
        style="color: aqua" id="phoneNumberInfor"></span>


<script>
    /**
     * 校验表单的用户名
     * 校验的规则 用户名长度是5-16个字符 ，只能是英文和数字，并且以英文字符开头
     */
    function validationName() {
        let nameInputElement = document.getElementById("name");
        let nameValue = nameInputElement.value;
        console.log("你输入的用户名：" + nameValue);
        //根据正则表达式编写正则表达式
        let regex = /^[a-zA-Z][A-Za-z0-9]{4,15}$/

        let spanElement = document.getElementById("nameValidationInfo");

        //    校验通过
        if (regex.test(nameValue)) {

            spanElement.innerText = "用户名校验通过"
        } else {
            spanElement.innerText = "用户名非法，校验不通过"
        }

    }

    /**
     * 校验手机号
     * 手机号的规则，以1开头，第二位是3，5，7，8，9 一共11位数字
     * @param phoneNumber
     */
    function validationPhonenumber(phoneNumber) {
        console.log("用户输入的手机号是：" + phoneNumber)
        let regex = /^1[3,5,7,8,9]\d{9}$/
        let spanElement = document.getElementById("phoneNumberInfor");
        if (regex.test(phoneNumber)){
            spanElement.innerText="手机号验证通过"
        } else{
            spanElement.innerText="手机号验证失败，校验不通过"
        }

    }
</script>
</body>
</html>

2.轮播图

知识点

HTML
JavaScript函数
JavaScript数组
JavaScript BOM编程
JavaScript Dom编程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
<h1>JavaScript编程之综合案例-轮播图</h1>
<img src="../images/微信头像.jpg" id="phoneImage" onmouseover="pause()" onmouseout="startChange()">

<script>
    // 使用数字保存三张图片的地址
    let phoneImageUrlArray = ["../images/头像1.jpg",
        "../images/微信头像.jpg", "../images/头像1.jpg"]

    //轮播图就是定时换图片

    let interval;

    /**
     * 鼠标放到图片上时 暂停轮播
     */
    function pause() {
        // 清除定时器
        window.clearInterval(interval)

    }

    /**
     * 鼠标从图片上移除之后又开始轮播
     */
  function startChange() {
        let i = 0;
        interval=window.setInterval(function () {
            let imgElement = document.getElementById("phoneImage");
            imgElement.setAttribute("src", phoneImageUrlArray[i])
            i++;
            if (i == 3) {
                i = 0
            }

        }, 1000);
    }
    startChange()

</script>
</body>
</html>