js定时器和事件：玩转风车案例

逃离我推掉我的手 2022-12-25 11:58 119阅读 0赞

## 通过css和js的定时器，实现让这个风车图片转起来。 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70]

> 这里没有图片的可以截取文章中的图片

**HTML代码：**

<div>
        <h3>我爱玩风车</h3>
        <img src="img/logo.png" class="a" alt="" id="img1">
    
        <hr>
    
        <input type="button" value="开始" οnclick="start1()">
        <input type="button" value="停止" οnclick="stop1()">
        <input type="button" value="反转" οnclick="reverse()">
        <input type="button" value="转1圈" οnclick="circle(1)">
        转<input type="text" size="1" value="" οnblur="circle(this.value)">圈
    
    </div>

**CSS代码：**

<style> .fc{ 
                animation:wm 2s infinite linear;
            }
            @keyframes wm { 
                from { 
                    transform:rotate(0deg);
                }
                to { 
                    transform:rotate(-360deg);
                }
            }
    
            .reverseC{ 
                animation:reversewm 2s infinite linear;
            }
            @keyframes reversewm { 
                from { 
                    transform:rotate(-360deg);
                }
                to { 
                    transform:rotate(0deg);
                }
            }
    
    
        </style>

**JS代码：**

<script> //转起来 function start1() { 
            document.getElementById("img1").className='fc'
        }
        //翻转 function reverse() { 
            document.getElementById("img1").className='reverseC'
        }
        //停下来 function stop1() { 
            document.getElementById("img1").className=''
        }
    
        function circle(obj){ 
            let a = document.getElementById("img1"); a.className='fc' let s1=new Date().getSeconds() a=setTimeout(function () { 
                stop1()
            },2000*obj)
        }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70]: /images/20221120/bb6c3b7407034ae3a61b3b9fa357197e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，119人围观）

还没有评论，来说两句吧...

相关阅读

相关 js定时器和事件：玩转风车案例

通过css和js的定时器，实现让这个风车图片转起来。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_

逃离我推掉我的手/ 2022年12月25日 11:58/ 0 赞/ 120 阅读

相关 JS定时器做随机点人案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Myth丶恋晨/ 2022年12月09日 04:52/ 0 赞/ 120 阅读

相关 android h5app息屏定时器,H5案例分享：JS设置定时器和清除定时器

![df9871f70e75c488f2952c1108fc5bcc.png][] JS设置定时器和清除定时器在做项目中难免会碰到需要实时刷新，动画依次出现等等需求，这时

川长思鸟来/ 2022年10月18日 00:49/ 0 赞/ 366 阅读

相关玩转SpringBoot的事件监听

事件监听是观察者设计模式，在Spring中的应用非常广泛。这里以SpringBoot的事件-监听为例，来分析一下SpringBoot给我们提供的扩展点，增加SpringA

Dear 丶/ 2022年10月07日 05:42/ 0 赞/ 172 阅读

相关纯css3风车旋转动画js特效

[下载地址][Link 1]此风车效果，用到了css3的自定义动画、旋转、圆角、阴影效果来实现 ![1631561083.png][] dd: [Link 1]:

客官°小女子只卖身不卖艺/ 2022年09月12日 01:44/ 0 赞/ 235 阅读

相关 Nginx 定时器事件

概述在 Nginx 中定时器事件的实现与内核无关。在事件模块中，当等待的事件不能在指定的时间内到达，则会触发 Nginx 的超时机制，超时机制会对发生超时的事件进行管理

拼搏现实的明天。/ 2022年08月06日 11:16/ 0 赞/ 287 阅读

相关 html5 canvas 可调速的大风车转啊转

效果： ![Center][] <!DOCTYPE html> <html> <head lang="en"> <meta c

╰半夏微凉°/ 2022年07月15日 12:55/ 0 赞/ 108 阅读

相关玩转Git和GitHub

玩转Git和GitHub Git下载地址：https://git-scm.com/ ![玩转Git和GitHub][Git_GitHub] Git 结构： !

超、凢脫俗/ 2022年05月19日 13:54/ 0 赞/ 281 阅读

相关 JS的定时器和清除定时器

在我们的项目开发中，难免会需要按周期执行一些代码，这就需要定时器这个功能。常用的定时器有2种 setTimeout(function() {}, 1000);

亦凉/ 2022年01月21日 12:09/ 0 赞/ 393 阅读

相关 js 定时器移动div案例

主要问题:多次点击开始定时器，会开启多个不同的定时器，会改变初始移动解决方法：在定时器函数内首部添加一个清除定时器，使得每一次点击都清除上次定时器，并重建一个定时器代码

约定不等于承诺〃/ 2021年07月24日 18:29/ 0 赞/ 505 阅读