欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

JS实现玩转风车

时间:2022-08-12 10:02:37|栏目:JavaScript代码|点击:

本文实例为大家分享了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>

代码图片

上一篇:JS+JSP checkBox 全选具体实现

栏    目:JavaScript代码

下一篇:BootStrapTable 单选及取值的实现方法

本文标题:JS实现玩转风车

本文地址:http://www.codeinn.net/misctech/210567.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有