定时器练习题

最新推荐文章于 2022-01-11 17:26:06 发布

路飞小朋友

最新推荐文章于 2022-01-11 17:26:06 发布

阅读量546

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/wozhangyi/article/details/107399882

版权

这篇博客通过实例探讨了如何运用定时器来优化轮播图和键盘控制盒子移动的效果，解决了初次移动时的卡顿问题，实现了平滑的动态体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

轮播图

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        *{
   
            margin: 0;
            padding: 0;
        }

        div{
   
            width: 500px;
            background-color: yellow;
            padding: 10px;
            text-align: center;
        }



    </style>

    <script type="text/javascript">

        window.onload = function(){
   
            var img = document.getElementById('img');
            var start = document.getElementById('start');
            var finish = document.getElementById('finish');

            var imgArr = ["./img/1.jpg", "./img/2.jpg", "./img/3.jpg", "./img/4.jpg"];
            var index = 0;

            var info = document.getElementById('info');
            info.innerHTML = "当前是第" + (index+1) + "张图片";

            var timer;
            start.onclick = function(){
   
                clearInterval(timer);
                timer = setInterval(function () {
   
                    index++;
                    if (index == imgArr.length){
   
                        index = 0;
                    }
                    img.src = imgArr[index];

                    info.innerHTML = "当前是第" + (index+1) + "张图片";
                }, 1000);


            };

            finish.onclick = function () {
   
                clearInterval(timer);
            }





        };




    </script>
</head>
<body>

<div>
    <p id="info"></p>
    <img src="./img/1.jpg" alt="" id="img">
    <button id="start">开始</button>
    <button id="finish">结束</button>
</div>

</body>
</html>

效果图
在这里插入图片描述

键盘控制盒子移动

对之前方法的改进，没学习定时器之前，盒子第一次移动会有卡顿（浏览器机制），学习定时器之后，可以让键盘只控制盒子移动方向，速度的交给定时器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box1{
   
            width: 100px;
            height:

最低0.47元/天解锁文章