js常用事件案例总结

最新推荐文章于 2024-04-03 13:27:26 发布

行动是最好的承诺

最新推荐文章于 2024-04-03 13:27:26 发布

阅读量2k

点赞数 3

分类专栏： javascript

本文链接：https://blog.csdn.net/u010505805/article/details/79055855

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一,完整表单的验证

<div class="container">
    <label>Q Q</label><input type="text" id="inp1"><span></span><br/>
    <label>手机</label><input type="text" id="inp2"><span></span><br/>
    <label>邮箱</label><input type="text" id="inp3"><span></span><br/>
    <label>座机</label><input type="text" id="inp4"><span></span><br/>
    <label>姓名</label><input type="text" id="inp5"><span></span><br/>
</div>
<script>
    function $(id) {
        return document.getElementById(id);
    }

    var inpQQ = $("inp1");
    var inpMobile = $("inp2");
    var inpEmail = $("inp3");
    var inpTel = $("inp4");
    var inpName = $("inp5");

    //检查 指定的输入框 中的内容是否符合 指定的表达式
    function check(inp, regEx) {
        inp.onblur = function () {
            if (regEx.test(this.value)) {
                this.nextSibling.innerHTML = "正确";
                this.nextSibling.style.color = "green";
            } else {
                this.nextSibling.innerHTML = "错误";
                this.nextSibling.style.color = "red";
            }
        }
    }


    //QQ的规律 5-11位 开头不为0
    //var regQQ = /^[^0]\d{4,10}$/;//不为零的数字
    var regQQ = /^[1-9]\d{4,10}$/;
    //手机的规律 11位 另外有规定号段
    //var regMobile = /^\d{11}$/;
    var regMobile = /^(13[0-9]|14[57]|15[0-9]|18[0-9])\d{8}$/;
    //邮箱的规律 barack.hussein.obama@white-house.gov.us
    //var regEmail = /^\w@\w$/;
    var regEmail = /^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    //座机和姓名规律见之前的案例
    var regTel = /^0\d{2,3}-\d{7,8}$/;
    var regName = /^[\u4e00-\u9fa5]{2,}$/;

    check(inpQQ, regQQ);//验证QQ
    check(inpMobile, regMobile);//验证手机
    check(inpEmail, regEmail);//验证邮箱
    check(inpTel, regTel);//验证座机
    check(inpName, regName);//验证姓名

</script>

二,密码强度的验证

<div class="container">
    <label>密码</label>
    <input type="text" id="inp1" maxlength="16">
    <!--<input type="password" id="inp1" maxlength="16"/>-->
    <div class="pass-wrap">
        <em>密码强度：</em>

        <em id="strength"></em>

        <div id="strengthLevel" class="strengthLv0"></div>
    </div>
</div>
<script>
    var inp1 = document.getElementById("inp1");
    var strength = document.getElementById("strength");
    var strengthLevel = document.getElementById("strengthLevel");
    var array = ['', '低', '中', '高'];
    inp1.onkeyup = function () {
        var level = 0;
        if (/[a-z]/.test(this.value)) {
            level++;//包含字母
        }
        if (/[0-9]/.test(this.value)) {
            level++;//包含数字
        }
        if (/[^a-z0-9]/.test(this.value)) {
            level++;//包含其他内容
        }
        if (this.value.length < 6) {
            level = 0;//密码小于6位，没输入完
        }
        if (level > 3) {
            level = 3;
        }
        strength.innerHTML = array[level];
        strengthLevel.className = 'strengthLv' + level;
    };
</script>

三,回车切换案例

<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<script>
    //需求：在当前文本框中按下回车键 获取下一个文本框 并让其获取焦点
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onkeyup = function (event) {
            //console.log(event.keyCode);//13
            if (event.keyCode === 13) {
                var next = this.nextElementSibling.nextElementSibling;//找到下一个文本框
                //让他获取焦点
                next.focus();
            }
        };
    }
</script>

四,放大镜按照比例移动大图显示效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }

        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }

        .small {
            position: relative;
        }

        .box img {
            vertical-align: top;
        }

        #bigBox img {
            position: absolute;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <div id="smallBox" class="small">
        <img src="images/001.jpg" width="350" alt=""/>

        <div id="mask" class="mask"></div>
    </div>
    <div id="bigBox" class="big">
        <img src="images/0001.jpg" id="bigImg" width="800" alt=""/>
    </div>
</div>
<script>
    var box = document.getElementById("box");
    var smallBox = document.getElementById("smallBox");
    var bigBox = document.getElementById("bigBox");
    var bigImg = document.getElementById("bigImg");
    var mask = document.getElementById("mask");
    //1.鼠标经过小盒子 显示遮罩和大盒子 鼠标离开后隐藏
    smallBox.onmouseover = function () {
        mask.style.display = "block";
        bigBox.style.display = "block";
    };
    smallBox.onmouseout = function () {
        mask.style.display = "none";
        bigBox.style.display = "none";
    };
    //2.遮罩跟随鼠标坐标
    //鼠标在smallBox上移动的时候 获取鼠标在盒子中的坐标 然后设置mask的位置
    smallBox.onmousemove = function (event) {
        var event = event || window.event;
        //获取鼠标在页面中的坐标
        var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
        //获取鼠标在盒子中的坐标
        //这里不能用smallBox.offsetLeft因为smallBox的offsetParent是box
        //而smallBox到box的offsetLeft是0 所以这里要用box.offsetLeft
        var boxX = pageX - box.offsetLeft;
        var boxY = pageY - box.offsetTop;
        //计算mask的坐标
        var maskX = boxX - mask.offsetWidth / 2;
        var maskY = boxY - mask.offsetHeight / 2;
        //3.限制遮罩的运动范围
        if (maskX < 0) {
            maskX = 0;
        }
        if (maskX > smallBox.offsetWidth - mask.offsetWidth) {
            maskX = smallBox.offsetWidth - mask.offsetWidth;
        }
        if (maskY < 0) {
            maskY = 0;
        }
        if (maskY > smallBox.offsetHeight - mask.offsetHeight) {
            maskY = smallBox.offsetHeight - mask.offsetHeight;
        }
        //console.log(maskX + "--" + maskY);
        //设置mask的位置
        mask.style.left = maskX + "px";
        mask.style.top = maskY + "px";
        //4.按照比例移动大图

        //大图能够移动的总距离 = 大图的宽度-大盒子的宽度
        var bigToMove = bigImg.offsetWidth - bigBox.offsetWidth;
        //mask能够移动的总距离 = 小盒子的宽度-mask的宽度
        var maskToMove = smallBox.offsetWidth - mask.offsetWidth;
        //rate = 大图能够移动的总距离/mask能够移动的总距离
        var rate = bigToMove / maskToMove;
        //大图应该到的位置  = rate * mask当前的位置 (移动方向相反所以是负数)
        bigImg.style.left = -rate * maskX + "px";
        bigImg.style.top = -rate * maskY + "px";

    };

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

行动是最好的承诺

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
js常用事件案例总结

一,完整表单的验证 Q Q 手机邮箱座机姓名 function $(id) { return document.getElementById(id); } var inpQQ = $("inp1"); var inpMobile = $("inp2"); var inpEmail = $
复制链接

扫一扫