JavaScript_事件（中）

1.变色移动盒
鼠标，键盘事件

<style>
        #box {
            width: 100px;
            height: 100px;
            position: absolute;
            border: 3px dashed skyblue;
        }
</style>

<div id="box"></div>

<script>
        // 有一个红色的div块
        var box = document.getElementById("box")
        box.style.background = "red"
        //键盘事件
        window.onkeydown = function (e) {
            e || window.event
            // 1, 如果我按下ctrl + c变换颜色   
            var rgb = function () {
                var r = parseInt(Math.random() * 256)
                var g = parseInt(Math.random() * 256)
                var b = parseInt(Math.random() * 256)
                return `rgb(${r},${g},${b})`
            }

            setInterval(function () {
                if (e.ctrlKey && e.keyCode == 67) {
                    box.style.background = rgb()
                }
            }, 1000)


            // 2, 如果我按下ctrl + shift + r 重置颜色, 恢复初始颜色
            if (e.ctrlKey && e.shiftKey && e.keyCode == 82) {
                box.style.background = "red"
            }
            // 3, 如果我按下向上箭头, 向上移动, 同理还可以向下, 左, 右移动
            var move = function (d, dis) {
                var left = parseInt(box.style.left) || 0
                var top = parseInt(box.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;
                }
                box.style.left = left + "px"
                box.style.top = top + "px"
            }

            if (e.keyCode >= 37 && e.keyCode <= 40) {
                move(5, e.keyCode - 37)
            }
            // 4, 如果我按下ctrl + 上下左右, 走的步数变大
            if (e.ctrlKey && e.keyCode >= 37 && e.keyCode <= 40) {
                move(30, e.keyCode - 37)
            }

        }
        

        //鼠标事件拖动
        box.onmousedown = function (e) {
            e || window.event
            var x = e.pageX - box.offsetLeft
            var y = e.pageY - box.offsetTop
            document.onmousemove = function (e) {
                e || window.event
                var currentX = e.pageX
                var currentY = e.pageY
                box.style.left = currentX - x + "px"
                box.style.top = currentY - y + "px"
            }
            document.onmouseup = function (e) {
                e || window.event
                document.onmouseup = document.onmousemove = null
            }
        }
</script>

2.自定义菜单
History 对象

<style>
        ul {
            color: skyblue;
            font-size: 20px;
            font-weight: bold;
            position: absolute;
            list-style: none;
        }
        ul>li{
            border: 2px solid sandybrown;
        }
</style>

    <script>
        document.oncontextmenu = function (e) {

            var ul = document.querySelector("ul")
            if (ul) {
                ul.remove()//删除上一个
            }

            e || window.event
            e.preventDefault ? e.preventDefault() : e.returnValue = false//兼容

            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 () {
                    if (this.index == 0) {
                        history.forward()
                    }
                    if (this.index == 1) {
                        history.back()
                    }
                    if (this.index == 2) {
                        location.reload()
                    }
                }
                ul.appendChild(li)
            }

            ul.style.left = e.pageX + "px"
            ul.style.top = e.pageY + "px"

            document.body.appendChild(ul)

        }


    </script>

3.全选功能及反选及至少一项

    <input type="checkbox" id="controll">全选/取消全选
    <input type="checkbox" id="unselected">反选
    <div><input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
    </div>

<script>
    //全选
    var controll = document.getElementById("controll")
    var checks = document.querySelectorAll('div>input[type="checkbox"]')
    controll.onclick = function () {

        for (var i = 0; i < checks.length; i++) {
            checks[i].checked = this.checked
        }
    }
        //当你点击下面的checkbox的时候 如果当前里面是全选的话 上面的全选选框要被勾选 对应的如果下面少了 那么对应的全选要取消、、至少选一项
        for (var i = 0; i < checks.length; i++) {
            checks[i].onclick = function () {
                controll.checked = false
                if (checkCount() == checks.length) {//全部选中
                    controll.checked = true
                }
                if(checkCount()<1){
                    alert("必须选一项")
                    this.checked = ture//当前只有一个情况 防止取消的功能
                }
            }
        }
        function checkCount() {
            var count = 0
            for (var i = 0; i < checks.length; i++) {
                if (checks[i].checked) {
                    count++
                }

            }
            return count
        }

        //反选
        var unselected = document.querySelector("#unselected")
        unselected.onclick = function(){
            if(this.checked){
                reve()//反选操作
            }

            function reve(){
                for(var i=0; i<checks.length; i++){
                    checks[i].checked = !checks[i].checked
                }
            }
        }

</script>