JS实现玩转风车

本文实例为大家分享了JS实现玩转风车的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>找风车</title>
    <style>
        #div1{
            width: 800px;
            height: 610px;
            border: 1px solid red;
        }
        img{
            width: 60px;
            height: 60px;
        }
        <!--infinite 无限的  linear 匀速-->
        .fc{
            animation:wm 2s infinite linear;
        }
        @keyframes wm {
            from {
                transform:rotate(0deg);
            }
            to {
                transform:rotate(360deg);
            }
        }
        .reverse{
            animation:wm1 2s infinite linear;
        }
        @keyframes wm1 {
            from {
                transform:rotate(0deg);
            }
            to {
                transform:rotate(-360deg);
            }
        }
    </style>
</head>
<body>
<div style="margin: 50px 450px">
    <h2 style="text-align: center">玩转风车</h2>

    <h3 style="text-align: center">生成<input type="text" onblur="generateFC(this.value)" size="1">个风车
        <input type="button" value="停止" onclick="stop1()">
        <input type="button" value="开始" onclick="start1()">
        <input type="button" value="反向" onclick="reverse()">
        转<input type="text" size="1" value="" onblur="circle(this.value)">圈
        <input type="button" value="放大" onclick="big()">
        <input type="button" value="缩小" onclick="small()">
    </h3>
    <div id="div1">
        <!--此处生成风车-->
    </div>
</div>
</body>
<script>
    //1.生成风车
    //获取输入框的value值num
    function generateFC(num) {
        //每次触发失去焦点事件进行清空风车
        document.getElementById("div1").innerHTML=''
        //把value值进行遍历
        for (let i = 0; i <num ; i++) {
            //每次遍历都向页面加入img标签并设置class属性fc 顺时针转动
            document.getElementById("div1").innerHTML+= '<img src="img/logo.png" class="fc" height="240" width="240"/>';
        }
    }
    //获取所有的img标签
    let img = document.getElementsByTagName('img');
    //2.停止
    function stop1() {
        //遍历所有的img标签并设置class属性为无
        for (let i = 0; i <img.length ; i++) {
            img[i].className=''
        }
    }
    //3.开始
    function start1() {
        for (let i = 0; i <img.length ; i++) {
            //将img属性设置为无
            img[i].className='fc'
        }
    }
//4.反向
    function reverse() {
        for (let i = 0; i <img.length ; i++) {
            img[i].className='reverse'
        }
    }
    //5.转几圈
    function circle(num) {
        for (let i = 0; i <img.length ; i++) {
            //首先将风车的class属性设置为转动，num圈后调用stop1函数
            img[i].className='fc'
            setTimeout(stop1,2000*num)
        }
    }
    //6.变大
    function big() {
        for (let i = 0; i <img.length ; i++) {
            //将img的style属性width设置为当前的width度的2倍
            img[i].style.width=img[i].width*2+"px"
            img[i].style.height=img[i].height*2+"px"
        }
    }
    //7.变小
    function small() {
        for (let i = 0; i< img.length ; i++) {
            img[i].style.width=img[i].width/2+"px"
            img[i].style.height=img[i].height/2+"px"
        }
    }
</script>

代码图片

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS使用canvas绘制旋转风车动画

    JS使用canvas绘制旋转风车动画

    使用canvas绘制动画-旋转风车加速减速启动停止. 结果截图详见如下: 源码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • js实现旋转大风车

    js实现旋转大风车

    相信大家都对风车这个东西感到不陌生,所以我们今天就要写一个大风车的案例. 这是一个动态网页,下面是css文件的代码,废话少说,上代码: <style>         .fc{             animation:wm 2s infinite linear;         }         @keyframes wm {             from {                 transform:rotate(0deg);             }        

  • JS实现玩转风车

    JS实现玩转风车

    本文实例为大家分享了JS实现玩转风车的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>找风车</title>     <style>         #div1{             width: 800px;             h

  • JS也玩OO继承

    算了一下,还是来这里了 ^_^ 无忧~~久违了----贴一个原理的东东吧, [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] (stroll的跟贴) 当然,还可以通过以下几种不用"外挂"的方法-- 不过要求使用 Script5.5 才可以使用 比如 call 方法 和 apply方法-- 以下是使用 call 的方法来实现的 apply也差不多,只不过后面调用的参数是数组,详细可以自己参考MSScript5.6说明 Bencalie 还记得以前你跟我说call apply的使

  • 分分钟玩转Vue.js组件（二）

    分分钟玩转Vue.js组件（二）

    .btn-demo { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #19b586; text-decoration: none; border: none; border-radius: 4px; color: #fff !important; text-decoration: none !important; cursor: poi

  • js+html5实现可在手机上玩的拼图游戏

    本文实例讲述了js+html5实现可在手机上玩的拼图游戏.分享给大家供大家参考.具体如下: 手机版的拼图.pc上用Chrome 或者 Firefox var R=(function(){ /*右边菜单*/ function fa(){ if(mo.style.right!='0px'){ mo.style.right='0px'; mco.rcss('','cmck'); }else{ mo.style.right='-100px'; mco.rcss('cmck',''); } } on(mc

  • 分分钟玩转Vue.js组件

    分分钟玩转Vue.js组件

    组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢? 组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 组件的创建和注册 基本步骤 Vue.js的组件的使用有3个步骤:创建组件构造器.注册组件和使用组件. 下面的代码演示了这3个步骤: <!DOCTYPE html> <html> <body> <

  • js玩一玩WSH吧

    Windows Script Host(Windows 脚本宿主)为 ActiveX 脚本引擎提供了一个不依赖于语言的脚本宿主.它允许通过 Windows 桌面或命令行来运行脚本.用来做一些需要批处理的事情是很方便的.[玩一玩] 把下面代码保存为sendkeys.js,然后双击运行. 复制代码 代码如下: var WshShell = new ActiveXObject("WScript.Shell"); WshShell.Run("Notepad"); WScri

  • JS SVG获取验证码的玩法示例

    JS SVG获取验证码的玩法示例

    目录 介绍 演示 正文 绘制背景 拉杆绘制 生成条带 数字转动 介绍 之前在抖音上看的某个脑洞大开的产品设想的几种别具特色的后端看了抓狂前端看了想打人的阴间交互效果,其中一个脑洞是让用户拉一下拉杆如同抽奖的形式获取到验证码,本期就咱们就还原出这个交互效果看看它到底有多疯狂. 演示 效果就是这样喵~ Markup <div id="app"> <div class="code-dialog"> <h5>获取验证码</h5>

  • 用PHP代替JS玩转DOM的思路及示例代码

    事情的起源比较简单,我需要把一个导航页的数据整理好写入数据库.一个比较直观的方法是对html文件进行分析,通用的方法是用php的正则表达式来匹配.但是这样做开发和维护都很困难,代码可读性非常差. 导航页的数据都是规则的排列在DOM树当中的,用JS可以用几个循环轻松的对其进行操作,而且JS需要依赖浏览器,操作数据库很困难.其实PHP就有现成的类库对DOM树种的节点进行增删改查操作,在此做一些笔记. 这里涉及到2个类 DOMDocument 和 DOMXPath. 其实思路比较明确,就是通过DOMD

  • 玩转NODE.JS（四）-搭建简单的聊天室的代码

    Nodejs好久没有跟进了,最近想用它搞一个聊天室,然后便偶遇了socket.io这个东东,说是可以用它来简单的实现实时双向的基于事件的通讯机制.我便看了一些个教程使用它来搭建一个超级简单的聊天室. 初始化项目 在电脑里新建一个文件夹,叫做"chatroom",然后使用npm进行初始化: $ npm init 然后根据提示以及相关信息一步一步输入,当然也可以一路回车下去,之后会在项目里生成一个package.json文件,里面的信息如下: $ cat package.json { &q

随机推荐