js+定时器实现点击图片旋转，再次点击暂停

最新推荐文章于 2024-06-08 10:15:01 发布

zhangyubababa

最新推荐文章于 2024-06-08 10:15:01 发布

阅读量3.8k

点赞数 1

分类专栏：前端 web前端

本文链接：https://blog.csdn.net/zhangyubababa/article/details/91490047

版权

前端同时被 2 个专栏收录

97 篇文章 1 订阅

订阅专栏

web前端

88 篇文章 0 订阅

订阅专栏

js+定时器实现点击图片旋转，再次点击暂停


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <img id="img1" style="display: inline-block;" src="../u=185799540,1313831384&fm=173&app=25&f=JPEG.jpg">
  <!-- 这里图片的路径src， 自己找一张图，写上自己的路径就好了 -->
  <button id="btn">停止或启动</button>
  <script>
    var timer = null;//全局命名定时器的名字
    var img;//全局命名img
    var r = 0;//全局命名角度
    window.onload = function () {//页面一启动就加载

      img = document.getElementById('img1');

      timer = setInterval(() => {
        img.style.transform = 'rotate(' + (r += 10) + 'deg)';//用css的转换属性
        img.style.transition = 'all 1s linear';//用css的过度属性，注意 时间需要和定时器启动的时间一致才能不卡帧,不要linear会一顿一顿的
        console.log('定时器启动');
      }, 1000);



    };

    var flag = true;//全局声明状态切换的初始值
    btn.onclick = function () {
      if (flag) {
        clearInterval(timer);
        console.log('定时器已停止');
        flag = false;
      } else if (flag == false) {
        timer = setInterval(() => {
          img.style.transform = 'rotate(' + (r += 10) + 'deg)';
          img.style.transition = 'all 1s linear';
          console.log('定时器启动');
        }, 1000);
        flag = true;
      }

    }
  </script>
</body>

</html>

在这里插入图片描述
你是不是很帅？是的话，点个赞

zhangyubababa

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
js+定时器实现点击图片旋转，再次点击暂停

js+定时器实现点击图片旋转，再次点击暂停<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...
复制链接

扫一扫