事件练习

1, 有一块空白区域,
    // 当鼠标移动到区域内,显示"亲爱的, 我爱你",
    // 当我鼠标移开的时候,显示"对不起, 开玩笑",
    // 当我鼠标不停的在区域内移动的时候, 变换颜色

<style>
    div{
        width: 500px;
        height: 500px;
        border: 1px solid red;
    }
</style>
<body>
    <div></div>
<script>
    var div = document.querySelector('div')
    div.onmouseenter = function(){
        this.innerText ='亲爱的，我爱你'
    }
    div.onmouseleave = function(){
        this.innerText = '对不起，我是渣男'
    }
    div.onmousemove = function(){
        this.style.backgroundColor = randomColor()
    }
    function randomColor(){
        var r = parseInt(Math.random()*256)
        var g = parseInt(Math.random()*256)
        var b = parseInt(Math.random()*256)
        return `rgb(${r},${g},${b})`
    }
</script>
</body>

2、制作如下图效果:  当鼠标滑过小图片时, 让大图片也显示该图

<style>
    .box{
        width: 750px;
        height: 650px;
        background-color: white;
        border: 1px solid red;
        padding: 10px;
    }
    .box>div{
        width: 500px;
        height: 450px;
        float: left;
        margin-right: 50px;
       
    }
    .box>div img{
        width: 100%;
        height: 100%;
    }
    .box img{
        display: block;
        width: 185px;
        height: 160px;
        float: left;
    }
</style>
</head>
<body>
    <div class="box">
        <div>
            <img src="./1.webp" alt="" id="big">
        </div>
        <img src="./1.webp" alt="">
        <img src="./2.webp" alt="">
        <img src="./3.webp" alt="">
        <img src="./4.webp" alt="">
        <img src="./5.webp" alt="">
        <img src="./6.webp" alt="">
        <img src="./7.webp" alt="">
    </div>
<script>
 var images = document.querySelectorAll('.box>img')
 var bigim = document.querySelector('#big')
 for(var i=0;i<images.length;i++){
    images[i].onmouseenter = function(){
        bigim.src = this.src
    }
 }
</script>
</body>

3、在浏览器里的拖拽事件

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: pink;
        position: absolute;
    }
</style>
</head>
<body>
<div id="box"></div>
<script>
    // 获取div
    var box = document.getElementById('box')
    // 给div添加mousedown事件
    box.onmousedown = function(e){
        e = e||event
        // 记录鼠标在div里面的位置
        // 在mousedown里面记录按下的位置
        // var x = e.offsetX
        // var y = e.offsetY
        var x = e.pageX-box.offsetLeft
        var y = e.pageY-box.offsetTop
        box.onmousemove = function(e){
            e=e||event
            var currentX = e.pageX
            var currentY = e.pageY
            box.style.left = currentX-x + 'px'
            box.style.top = currentY-y + 'px'
        }
        box.onmouseup = function(){
            box.onmousemove = null
    
        }
    }
</script>
</body>

 4、在固定范围内的拖拽事件

<style>
        #box{
            width: 500px;
            height: 500px;
            border: 1px solid white;
            margin: 100px;
            /* position: relative;
            left: 100px;
            top: 100px; */
        }
        #moveBox{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
        #outerBox{
            width: 600px;
            height: 600px;
            background-color: #CCC;
            position: absolute;
            left: 200px;
            top: 200px;
            /* margin: 100px; */
        }
    </style>

<body>
    <div id="outerBox">
        <div id="box">
            <div id="moveBox"></div>
        </div>
    </div>
    <script>
        //获取俩个div
        var box = document.getElementById('box')
        var moveBox = document.getElementById('moveBox')
        //给moveBox添加按下事件 记录一下当前鼠标在moveBox里面点击的位置
        // moveBox.onmousedown = function(e){
        //     e = e || window.event
        //     //获取对应的第一次按下的位置
        //     var firstX = e.offsetX
        //     var firstY = e.offsetY
        //     // console.log(document.body.offsetParent); //偏移的父元素
        //     //给box添加move事件 记录每次的位置 在box的位置 设置moveBox在box的定位
        //     box.onmousemove = function(e){
        //         e = e || event
        //         //这个108是对应的box离body的距离 这个距离就是box偏移的距离
        //         //offsetLeft 得到基于父元素左偏移量 offsetTop 得到基于父元素的上偏移量
        //         //offsetParent 基于的父元素 基于定位的 他会一层层往上找 找到定位的父元素就基于他 如果没有找到就基于body
        //         //有奶便是娘 谁有定位他就基于谁
        //         var currentX = e.pageX - getOffset(this).left
        //         var currentY = e.pageY - getOffset(this).top
        //         var targetX = currentX - firstX
        //         var targetY = currentY - firstY
        //         //判断边界 offsetWidth 得到盒子的宽度 offsetHeight得到盒子的高度
        //         if(targetX<0){
        //             targetX = 0
        //         }
        //         if(targetY<0){
        //             targetY = 0
        //         }
        //         if(targetX>this.offsetWidth-moveBox.offsetWidth){
        //             targetX = this.offsetWidth-moveBox.offsetWidth
        //         }
        //         if(targetY>this.offsetHeight-moveBox.offsetHeight){
        //             targetY = this.offsetHeight-moveBox.offsetHeight
        //         }
        //         // 设置moveBox在box的定位
        //         moveBox.style.left = targetX + 'px'
        //         moveBox.style.top = targetY + 'px'
        //     }
        //     //给box添加弹起事件 清除box的move事件
        //     document.onmouseup = function(){
        //         box.onmousemove = null
        //     }
        // }
        touch(moveBox,document.getElementById('outerBox'))
       //获取对应的元素离body的距离 传入一个元素
       function getOffset(element){
         var left = 0
         var top = 0
         while(element){
            left += element.offsetLeft
            top += element.offsetTop
            element = element.offsetParent
         }
         return {left,top}
       }
       console.log(getOffset(moveBox).left);
       console.log(getOffset(moveBox).top);
       //拖拽的方法实现 第一个是移动的盒子 第二个在哪移动
       function touch(moveBox,box){
         //给moveBox添加按下事件 记录一下当前鼠标在moveBox里面点击的位置
         moveBox.onmousedown = function(e){
            e = e || window.event
            //获取对应的第一次按下的位置
            var firstX = e.offsetX
            var firstY = e.offsetY
            // console.log(document.body.offsetParent); //偏移的父元素
            //给box添加move事件 记录每次的位置 在box的位置 设置moveBox在box的定位
            box.onmousemove = function(e){
                e = e || event
                //这个108是对应的box离body的距离 这个距离就是box偏移的距离
                //offsetLeft 得到基于父元素左偏移量 offsetTop 得到基于父元素的上偏移量
                //offsetParent 基于的父元素 基于定位的 他会一层层往上找 找到定位的父元素就基于他 如果没有找到就基于body
                //有奶便是娘 谁有定位他就基于谁
                var currentX = e.pageX - getOffset(this).left
                var currentY = e.pageY - getOffset(this).top
                var targetX = currentX - firstX
                var targetY = currentY - firstY
                //判断边界 offsetWidth 得到盒子的宽度 offsetHeight得到盒子的高度
                if(targetX<0){
                    targetX = 0
                }
                if(targetY<0){
                    targetY = 0
                }
                if(targetX>this.offsetWidth-moveBox.offsetWidth){
                    targetX = this.offsetWidth-moveBox.offsetWidth
                }
                if(targetY>this.offsetHeight-moveBox.offsetHeight){
                    targetY = this.offsetHeight-moveBox.offsetHeight
                }
                // 设置moveBox在box的定位
                moveBox.style.left = targetX + 'px'
                moveBox.style.top = targetY + 'px'
            }
            //给box添加弹起事件 清除box的move事件
            document.onmouseup = function(){
                box.onmousemove = null
            }
        }
       }
    </script>
</body>

5、自定义菜单栏（改变鼠标右击的菜单栏）

<style>
ul>li{
   list-style: none;
}
ul{
    width: 100px;
    height: 100px;
    background-color: pink;
    position: absolute;
}
</style>
</head>
<body>
    
<script>
// oncontextmenu
window.oncontextmenu = function(e){
    // 把上一个删除
    var ul = document.querySelector('ul')
    if(ul){
        ul.remove()
    }
    // 禁止默认行为
    e=e||event;
    e.preventDefault();
    // 创建一个div
    var ul = document.createElement('ul')
    var arr =['前进','后退','刷新']
    for(var i=0;i<arr.length;i++){
        var li = document.createElement('li')
        li.innerText = arr[i]
        li.index = i
        li.onclick = function(e){
            if(this.index == 0){
                history.forward()
            }
            if(this.index == 1){
                history.back()
            }
            if(this.index == 2){
                history.reload()
            }
        }
        ul.appendChild(li)
    } 
   
    ul.style.left = e.pageX + 'px'
    ul.style.top = e.pageY + 'px'
    // 再把ul加给body
    document.body.appendChild(ul)
    
    
}


</script>
</body>

6、 有一个红色的div块 1, 如果我按下ctrl+c变换颜色 2, 如果我按下ctrl + shift + r 重置颜色,恢复初始颜色 3, 如果我按下向上箭头,向上移动, 同理还可以向下,左,右移动 4, 如果我按下ctrl + 上下左右,走的步数变大 

<style>
        div {
            width: 500px;
            height: 500px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var div = document.querySelector('div')
        window.onkeydown = function(e){
             if (e.ctrlKey && e.keyCode==67) {
            div.style.backgroundColor = randomColor()
        } 
        if (e.ctrlKey && e.shiftKey && e.keyCode==82) {
            div.style.backgroundColor = 'red'
        }
        // 37,38,39,40 -37
        if(e.keyCode>=37 && e.keyCode<=40){
            move(5,e.keyCode-37)
        }
        if(e.ctrlKey &&e.keyCode>=37 && e.keyCode<=40){
            move(20,e.keyCode-37)
        }
        }
       

        function randomColor() {
            var r = parseInt(Math.random() * 256)
            var g = parseInt(Math.random() * 256)
            var b = parseInt(Math.random() * 256)
            return `rgb(${r},${g},${b})`
        }
        function move(d,dis){
            //方向 左 0  上 1 右 2  下 3
            //获取上一次的位置
            var left = parseInt(div.style.left) || 0
            var top = parseInt(div.style.top) || 0
            switch(dis){
                case 0:
                    left -= d
                    break;
                case 1:
                    top -= d
                    break;
                case 2:
                    left += d
                    break;
                case 3:
                    top += d
                    break;
            }
            //将位置设置给对应的div
            div.style.left = left + "px"
            div.style.top = top + "px"
        }

    </script>
</body>

7、全景展示

<body>
<img src="../day12/img/img/0.jpg" alt="">
<script>
    // 获取这张图片
    var img = document.querySelector('img')
    // 给图片添加按下事件
    img.onmousedown = function(e){
        e.preventDefault()
        e = e||event
        var firstX = e.pageX
        // 给图片添加moveshijian
        img.onmousemove = function(e){
            e = e|| event
            var currentX = e.pageX
            // 图片的最大下标为76 切换图片 %77
            // 计算对应的位置
            var index = (currentX-firstX+77*9)%77
            // 设置对应的图片
            img.src = `../day12/img/img/${index}.jpg`
        }
    // 给document添加up事件
    document.onmouseup = function(){
        img.onmousemove = null
    }
    }
    
</script>
</body>

8、手机解锁案例

<style>
        #box {
            width: 300px;
            height: 400px;
            background-color: #ccc;
            position: relative;
        }

        #innerBox {
            width: 280px;
            height: 50px;
            background-color: #fff;
            margin: 0 10px;
            position: absolute;
            bottom: 30px;
        }

        #moveBox {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="innerBox">
            <div id="moveBox"></div>
        </div>
    </div>
    <script src="./utils.js"></script>
    <script>
        // 获取innerBox 和moveBox
        var innerBox = document.getElementById('innerBox')
        var moveBox = document.getElementById('moveBox')

        // 两个方法

        // 回调函数
        function callback() {
            if (moveBox.offsetLeft < innerBox.offsetWidth - moveBox.offsetWidth) {
                moveBox.style.left = '0px'
            }
        }
        touch(moveBox, innerBox, callback)
    </script>
</body>

9、下拉菜单

<style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 300px;
        }

        #title {
            height: 30px;
            border: 1px solid #ccc;
        }

        #gamesa {
            width: 150px;
            background-color: black;
            display: none;


        }

        #gamesa>li {
            list-style: none;
            height: 30px;
            border-bottom: 1px solid #fff;
            color: white;
        }
    </style>

<body>
    <div id="box">
        <div id="title">请选择你喜欢的游戏</div>
        <ul id="gamesa">

        </ul>
    </div>
    <script>
        // 3, 制作下拉菜单: 
        //    1, 最开始效果如左图1
        var games = ['王者荣耀', '开心消消乐', '贪吃蛇大战', '超级玛丽', '俄罗斯方块']
        var box = document.getElementById('box')
        var title = document.getElementById('title')
        var gamesa = document.getElementById('gamesa')

        function init() {
            for (var game of games) {
                gamesa.innerHTML += `<li>${game}</li>`
            }
        }
        init()
        //    2, 鼠标滑过”请选择游戏名称”区域时,效果如图2
        // 给box添加鼠标移入事件 在移入事件中显示对应的下拉列表ul
        box.onmouseenter = function () {
            gamesa.style.display = 'block'
        }
        // box添加移出事件 将下拉列表ul隐藏
        box.onmouseleave = function () {
            gamesa.style.display = 'none'
        }
        //    3, 鼠标滑过下拉选项区域时, 让下拉选项可以继续显示,移开后隐藏
        //    4, 鼠标在选项中滑过时, 显示效果图3
        // 事件委托 当你有许多事情需要同时添加一个事件行为的同级元素 这个时候我们不给这些元素加事件 而是给他的父元素添加事件 称为事件委托
        gamesa.onmouseover = function (e) {
            e = e || event
            if (e.target.nodeName == 'LI') {
                // 先排他
                for (var i = 0; i < games.length; i++) {
                    this.children[i].style.backgroundColor = 'black'
                }
                // 控制对应的li标签的北京颜色变化 得到实际的触发对象
                e.target.style.backgroundColor = '#ccc'
            }

        }
        //    5, 选择某一项, 将顶部的名称改成你选择的游戏名称
        gamesa.onclick = function (e) {
            e = e || event
            if (e.target.nodeName == 'LI') { //如果的当前的e.target是li才执行对应的操作者'
                title.innerText = e.target.innerText
            }

        }
    </script>
</body>

10、账号密码的判断

<body>
    <form action="">
        <input type="text" placeholder="请输入用户名"><br>
        <input type="password" placeholder="请输入密码"><br>
        <input type="submit" value="提交">
    </form>
<script>
//     1, 如下图, 在输入框中输入用户名和密码, 
// 当鼠标失去焦点时: 检测用户名长度至少6位, 且只能为数字和字母;检测密码长度至少8位 
// 给登录按钮添加点击事件: 点击后弹出用户名和密码
// 获取输入框
var inputs = document.querySelectorAll('input')
// 给用户名输入框添加失去焦点事件
inputs[0].onblur = function(){
    var flag = true
    // 拿到嘴硬的value值进行遍历  进行判断里面的每个字符的ASCII码
    for(var i=0;i<this.value.length;i++){
        if(!((this.value[i]>=0&&this.value[i]<=9)||(this.value[i]>='a'&& this.value[i]<='z')||(this.value[i]>='A'&&this.value[i]<='Z')))
        {
            flag = false
            break
        }
    }
    if(!(flag && (this.value.length>=6))){
        console.log('用户名长度至少6位,且只能为数字和字母');
        this.focus()
    }else{
        console.log('正确');
    }
    // 正则的写法
    // if(/^[a-zA-Z0-9]{6,}$/.test(this.value)){
    //     console.log('正确');
    // }else{
    //     console.log('用户名长度至少6位，且只能为数字和字母');
    // }
}
// 给密码输入框添加失去焦点事件
inputs[1].onblur = function(){
    if(this.value.length>=8){
        console.log('正确');
    }else{
        console.log('密码长度至少为8位');
        this.focus()
    }
}
inputs[2].onclick = function(){
    alert('账号：'+inputs[0].value+' '+'密码：'+inputs[1].value)
}
</script>
</body>

 

posted @   木木子夕  阅读(34)  评论(0)  编辑  收藏  举报
相关博文：
·  BOM+DOM练习题
·  第二周测试练习
·  5.2常见事件演示
·  5.2常见事件演示
·  鼠标事件和键盘事件的操作
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae