【作业】验证西安的座机号，定义正则表达式测试输入的座机号是否正确/使用键盘上的方向键控制页面上div的移动(每次移5px,左向键是37,右向键是39、向上键是38、向下键是40) /让物体跟随鼠标移动

最新推荐文章于 2024-10-02 05:39:15 发布

m-TT

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量112

点赞数 1

分类专栏： js 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_44892365/article/details/127668570

版权

js 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

1.验证西安的座机号码，定义正则表达式测试用户输入的座机号是否正确

<style>
    .success{
        color: greenyellow;
    }
    .fail{
        color: red;
    }
</style>
<body>
    手机号：<input type="text" id="number"><span></span>
    <script>
        // 定义以029开头
        let number1 = /^029/
        // 8位座机号
        let number2 = /[0-9]{8}/
        // 获取input
        let tel = document.getElementById('number')
        // 失去焦点onblur
        tel.onblur = function() {
            // 判断input值是否以029开头，并且总长度为11
            if (number1.test(tel.value) && number2.test(tel.value) && tel.value.length == 11) {
                document.querySelector('span').classList.remove('fail')
                document.querySelector('span').innerHTML = '用户输入正确'
                document.querySelector('span').classList.add('success')
            }else{
                document.querySelector('span').classList.remove('success')
                document.querySelector('span').innerHTML = 'error'
                document.querySelector('span').classList.add('fail')
            }
        }
    </script>
</body>

2.使用键盘上的方向键控制页面上div的移动(每次移动5px，左向键是37、右向键是39、向上键是38、向下键是40)

<style>
    #box{
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
    }
</style>
<body>
    <div id="box"></div>
    <script>
        let div = document.getElementById('box')
        window.addEventListener('keydown',function(e){
            if(e.keyCode == 37){
                div.style.left = div.offsetLeft - 5 + 'px'
            }else if(e.keyCode == 38){
                div.style.top =  div.offsetTop - 5 + 'px'
            }else if(e.keyCode == 39){
                div.style.left = div.offsetLeft + 5 + 'px'
            }else if(e.keyCode == 40){
                div.style.top = div.offsetTop + 5 + 'px'
            }
        })
    </script>
</body>

3.让物体跟随鼠标移动

<style>
    /* 设置绝对定位 */
    img{
        position: absolute;
    }
</style>
<body>
    <img src="./image/vase04.jpg" alt="">
    <script>
        // 获取img
        let img = document.querySelector('img')
        // 页面加载
        window.onload = function(){
            // mousemove持续触发
            document.addEventListener('mousemove',function (e) {
                let x = e.pageX
                let y = e.pageY
                img.style.left = x + 'px'
                img.style.top = y + 'px'
            })
        }
    </script>
</body>