选项卡 鼠标移入移除悬浮 选项卡2鼠标移入背景修改 鼠标移入出现提示性语言并跟随鼠标移动 案例点击事件 阻止点击事件 表单验

已于 2022-08-09 20:00:17 修改
阅读量413 收藏
点赞数
文章标签： javascript html
于 2022-08-08 22:25:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/red_HTML/article/details/126221830
版权

 选项卡

<!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>
    <style>
        .box {
            width: 400px;
            height: 300px;
            /* background: gainsboro; */
            /* margin: 0 auto; */
        }
        
        .box div {
            width: 400px;
            height: 300px;
            background: red;
            display: none;
        }
        
        .input input {
            width: 100px;
            height: 40px;
            border: 0;
        }
        
        .active {
            background: red;
        }
        
        .box .black {
            display: block;
        }
    </style>
</head>

<body>
    <div class="input">
        <input class="active" type="button">
        <input type="button">
        <input type="button">
    </div>
    <div class="box">
        <div data-index="0" class="black">1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <script>
        var inputArr = document.querySelectorAll(".input input")
        var divs = document.querySelectorAll(".box div")
        for (var i = 0; i < inputArr.length; i++) {
            inputArr[i].dataset.index = i
            inputArr[i].onclick = function() {
                // 删除inputArr全部的active样式

                for (var j = 0; j < inputArr.length; j++) {
                    // 删除样式 classList.remove("active")
                    inputArr[j].classList.remove("active")

                }
                for (var m = 0; m < divs.length; m++) {
                    divs[m].classList.remove("black")
                }
                // 给当前的元素添加active样式  classList.add("active")
                this.classList.add("active")
                var index = this.dataset.index
                    // console.log(index)
                divs[index].classList.add("black")

            }

        }
    </script>
</body>

</html>

 事件

这种方式可以时一个元素绑定多个元素

添加点击事件：div_0.addeventlistener("点击事件类型")

删除点击事件：dia_0.removeEventList("click",test) //解绑 

鼠标 按下 悬浮 抬起

<!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>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>

<body>
    <div class="box1">

    </div>
    <script>
        //mousedown 鼠标按下
        //mousemove 鼠标悬浮
        //mouseup 鼠标抬起
        var box = document.querySelector(".box1")
        box.onmousedown = function() {
            console.log("鼠标按下")
            box.style.background = "blue"
        }
        box.onmousemove = function() {
            console.log("鼠标悬浮")
            box.style.background = "green"
        }
        box.onmouseup = function() {
            console.log("鼠标抬起")
            box.style.background = "orange"
        }
    </script>
</body>

</html>

 选项卡2鼠标移入背景修改

<!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>
    <style>
        .box {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
        
        .box img {
            width: 150px;
            height: 100px;
            border: 10px solid rgb(189, 189, 189);
        }
        
        .box img:hover {
            border: 10px solid white;
        }
        
        body {
            background: url(img/bg1.jpg);
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="img/bg1.jpg" alt="">
        <img src="img/bg2.jpg" alt="">
        <img src="img/bg3.jpg" alt="">
        <img src="img/bg4.jpg" alt="">
        <img src="img/bg5.jpg" alt="">
        <img src="img/bg6.jpg" alt="">
    </div>
    <script>
        var imgs = document.querySelectorAll(".box img")
        var body = document.body
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onmouseover = function() {
                body.style.backgroundImage = "url(" + this.src + ")"
            }
        }
    </script>
</body>

</html>

 

onkeydown 按下键盘事件

onkeyup 按键抬起

onfocus/onblur 获取焦点 失去焦点     获取焦点/失去焦点常用在表单验证

change 改变时触发  ，当获取焦点和失去焦点时内容进行对比如果发生改变则会触发change事件反之则不会

oninput 一直触发

手机端的触摸事件  ontouchstart     ontouchmove    onrouchend


鼠标的坐标  距离视口的坐标  距离文档流的坐标 距离左上角的坐标

<!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>
    <style>
        div {
            width: 400px;
            height: 400px;
            background: rgb(172, 170, 170);
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var div = document.querySelector("div")
        div.onclick = function(event) {
            console.log(event.clientX, event.clientY) //距离浏览器视口的坐标
            console.log(event.pageX, event.pageY) //距离文档流的坐标
            console.log(event.offsetX, event.offsetY) //距离元素本身的左上角的坐标
        }
    </script>
</body>

</html>

 鼠标移入出现提示性语言 并 更随移动 案例

<!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>
    <style>
        div {
            width: 400px;
            height: 600px;
            position: relative;
        }
        
        img {
            width: 400px;
            height: 600px;
        }
        
        p {
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(128, 128, 128, 0.155);
            display: none;
            pointer-events: none;
            /* 清除鼠标事件 */
        }
    </style>
</head>

<body>
    <div>
        <img src="img/bg1.jpg" alt="">
        <p>qqqqqqqqqq</p>
    </div>
    <script>
        var imgs = document.querySelector("div img")
        var ps = document.querySelector("div p")
        imgs.onmouseover = function() {
            ps.style.display = "block"
        }
        imgs.onmouseout = function() {
            ps.style.display = "none"
        }
        imgs.onmousemove = function(event) {

            // console.log(event.offsetX, event.offsetY)
            ps.style.left = event.offsetX + "px"
            ps.style.top = event.offsetY + "px"
        }
    </script>
</body>

</html>

 

点击事件 阻止点击事件

<!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>

<body>
    <div>
        <div id="box"><span>点击</span></div>
    </div>
    <script>
        var span = document.querySelector("#box span")
        span.onclick = function(event) {
            alert("弹出框")
            event.stopPropagation() //阻止事件
        }
        box.onclick = function() {
            location.href = "http://www.baidu.com"
        }
    </script>
</body>

</html>

表单验证

<!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>
    <style>
        span {
            color: red;
            font-size: 12px;
        }
        
        div {
            width: 450px;
            height: 300px;
            margin: 200px auto;
        }
        
        div p {
            height: 30px;
            margin-bottom: 30px;
        }
        
        div p input {
            width: 250px;
            height: 30px;
            outline-style: none;
            /* border: 0; */
            /* border-bottom: 1px solid black; */
        }
    </style>
</head>

<body>
    <div>
        <p id="p0">用户名：<input type="text" id="text" placeholder="请输入用户名"><span></span></p>
        <p id="p1">密 &nbsp; 码：<input type="password" id="pwd" placeholder="请输入密码"><span></span></p>
        <p id="p2">邮 &nbsp; 箱：<input type="email" id="email" placeholder="请输入邮箱"><span></span></p>
        <!-- <input type="text"> -->
    </div>
    <script>
        var pArr = document.querySelectorAll("div p")
        text.onblur = function() {
            // /^[^\u4e00-\u9fa5]+$/ 是不是中文
            var text1 = /[a-zA-z0-9]/
            var wenb = text.value
            if (text1.test(wenb)) {
                console.log("对")
            } else {
                console.log("不对")
                var span = document.querySelector("#p0 span")
                span.innerHTML = "不能输入中文"
            }
        }
        pwd.onblur = function() {
            // console.log(blur)
            // 规定输入长度为6到8位
            // 匹配一个单词边界，也就是指单词和空格间的位置
            //  判断字符长度的
            var reg = /\b[a-zA-Z0-9]{6,8}\b/
            var str = pwd.value //文本框中输入的字符
                // console.log(str)
            if (reg.test(str) == true) {
                console.log("输入正确")
            } else {
                console.log("输入错误")
                var span = document.querySelector("#p1 span")
                span.innerHTML = "输入错误"
            }
        }
        email.onblur = function() {
            // /^[^\u4e00-\u9fa5]+$/ 是不是中文
            var youxs = /\b[\w.%+-]+@[\w>-]+\.[a-zA-Z]{2,6}\b/
            var youx = email.value
            if (youxs.test(youx)) {
                console.log("对")
            } else {
                console.log("不对")
                var span = document.querySelector("#p2 span")
                span.innerHTML = "请按邮箱格式"
            }
        }
    </script>
</body>

</html>

自动跳转轮播图

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            position: relative;
        }
        
        .box img {
            width: 500px;
            height: 300px;
        }
        
        .box ul {
            display: flex;
            justify-content: space-around;
            width: 400px;
            height: 30px;
            /* background: red; */
            position: absolute;
            top: 250px;
            left: 50px;
        }
        
        .box ul li {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            list-style: none;
            text-align: center;
            line-height: 30px;
            background-color: rgba(255, 255, 255, 0.452);
        }
        
        .active {
            background-color: red !important;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="img/bg1.jpg" alt="">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
    <script>
        var index = 1

        function name() {
            var imgarr = ["bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg", "bg5.jpg", "bg6.jpg"]
            var img = document.querySelector(".box img")
                // console.log(img)
            img.src = "img/" + imgarr[index]

            // console.log(index)
            var lis = document.querySelectorAll(".box ul li")
            for (let i = 0; i < lis.length; i++) {
                // const element = array[i];
                lis[i].classList.remove("active")
            }
            lis[index].classList.add("active")

            // console.log(box)
            //移入  移出  onmouseover（移入） onmouseout(移除)
            lis[index].onmouseover = function() {
                clearInterval(set)
            }
            lis[index].onmouseout = function(e) {
                set = setInterval(name, 1000)
                e.stopPropagation()
            }
            index++
            if (index > 5) {
                index = 0
            }
        }
        var set = setInterval(name, 1000)
    </script>
</body>

</html>

 

大坤...
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值