js风车小案例

最新推荐文章于 2022-04-22 00:54:58 发布

时光远去

最新推荐文章于 2022-04-22 00:54:58 发布

阅读量190

点赞数

本文链接：https://blog.csdn.net/m0_51325181/article/details/112706083

版权

网页动画 CSS动画交互设计风车 JavaScript

关键词由CSDN通过智能技术生成

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>找风车</title>
    <style>
        #div1{
            width: 610px;
            height: 610px;
            border: 1px solid red;
        }
        img{
            width: 60px;
            height: 60px;
        }
        .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>
    function big() {
        var fcs = document.getElementsByTagName('img');
        for (var i = 0; i < fcs.length; i++) {
            console.log(fcs[i].width*2)
            fcs[i].style.width=fcs[i].width*2+'px'
            fcs[i].style.height=fcs[i].height*2+'px'
        }
    }
    function small() {
        var fcs = document.getElementsByTagName('img');
        for (var i = 0; i < fcs.length; i++) {
            console.log(fcs[i].width*2)
            fcs[i].style.width=fcs[i].width/2+'px'
            fcs[i].style.height=fcs[i].height/2+'px'
        }
    }
    function circle(num) {
        var fcs = document.getElementsByTagName('img');
        if(fcs[0].className==""){//如果没转就启动
            start1()
        }else {//如果在转，就停下来，
            stop1()
            //0.1秒后，再启动
            setTimeout(start1,100)
        }
        setTimeout(stop1,num*2000)
    }
    function reverse() {
        var fcs = document.getElementsByTagName('img');
        for (var i = 0; i < fcs.length; i++) {
            fcs[i].className="reverse"
        }
    }
    function start1() {
        var fcs = document.getElementsByTagName('img');
        for (var i = 0; i < fcs.length; i++) {
            fcs[i].className="fc"
        }
    }
    function stop1() {
        var fcs = document.getElementsByTagName('img');
        for (var i = 0; i < fcs.length; i++) {
            fcs[i].className=""
        }
    }

    var div1 = document.getElementById(`div1`);
    function generateFC(num) {
        div1.innerHTML=''
        for (var i=1;i<=num;i++){
            div1.innerHTML+='<img src="img/logo.png" class="fc" alt="">'
        }
    }
</script>
</html>

在这里插入图片描述
赶快试试吧，让你的风车转起来

时光远去

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js风车小案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>找风车</title> <style> #div1{ width: 610px; height: 610px; border: 1px solid red; .
复制链接

扫一扫