javascript web编程案例干货

用户8247415

发布于 2021-05-06 03:22:21

34600

代码可运行

文章被收录于专栏：网页前端网页前端

运行总次数：0

代码可运行

1.定时器

<style>
        span {
            width: 50px;
            height: 50px;
            background-color: black;
            color: seashell;
            border: 10px solid #eee;
        }
    </style>

<body>
    <span class='hour'></span><span class='minute'></span><span class='second'></span>
    <script>
        //1.获取元素
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        // var inputTime = +new Date('2021-5-2 18:00:00');
        var inputTime = (new Date('2021-5-2 18:00:00')).getTime();
        countDown();
        //2.开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date();
            var times = (inputTime - nowTime) / 1000;
            var h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h;
            var m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
</body>

2.短信案例

<body>
    电话号码：<input type="text"><button>发送</button>

    <script>
        var but = document.querySelector('button');
        var time = 3;
        but.addEventListener('click', function() {
            but.disabled = true;
            var timer = setInterval(function() {
                if (time == 0) {
                    clearInterval(timer);
                    but.disabled = false;
                    but.innerHTML = '发送'
                    time = 3;
                } else {
                    but.innerHTML = '还剩' + time + '秒';
                    time--;
                }
            }, 1000)
        })
    </script>
</body>

类似短信验证码案例模型，css格式自己设计

3.京东搜索框优化

只需要按s键可以打字搜索，不需要鼠标点击通过修改ASCLL改变

<body>
    <input type="text">
</body>
<script>
    var search = document.querySelector('input');
    document.addEventListener('keyup', function(e) {
        if (e.keyCode === 83) {
            search.focus();
        }
    })
</script>

4.图片与鼠标联动

 <style>
        img {
            position: absolute;
            height: 20px;
            width: 20px;
            top: 10px;
        }
    </style>
</head>

<body>
    <img src="picture/3.png" alt="">
    <script>
        var img = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是' + x, 'y的坐标是' + y);
            //不要忘记px
            img.style.left = x - 10 + 'px'; //减去的是图片的一半，实际开发放大镜
            img.style.top = y - 10 + 'px';
        })
    </script>
</body>

5.网页屏幕大小

通过拉伸网页屏幕来改变内容

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<script>
    window.addEventListener('load', function() {
        var div = document.querySelector('div');
        window.addEventListener('resize', function() {
            console.log(window.innerWidth);
            console.log('变化了');
            if (window.innerWidth <= 800) {
                div.style.display = 'none';
            } else {
                div.style.display = 'block';
            }
        })
    })
</script>

<body>
    <div></div>
</body>