让一个静止的大风车转动，可加速也可减速

最新推荐文章于 2024-05-19 11:35:17 发布

麦田里的守望

最新推荐文章于 2024-05-19 11:35:17 发布

阅读量507

点赞数

分类专栏： html代码文章标签： html5

本文链接：https://blog.csdn.net/qq_40281230/article/details/78242416

版权

html代码专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这里写图片描述
实现该效果的代码为如下所示：

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #body{
            position: absolute;
            width: 300px;
            height: 300px;
            top: 200px;
            left: 50px;
        }
        #gan{
            position: absolute;
            top: 330px;
            left: 180px;
            z-index: -100;
        }
        #a{
            position: absolute;
            border: 1px solid #goldenrod;
            top: 140px;
            width: 300px;
            height: 20px;
            background-color: goldenrod;
            transform: rotate(0deg);
        }
        #b{
            position: absolute;
            border: 1px solid #goldenrod;
            left: 140px;
            width: 20px;
            height: 300px;
            background-color: goldenrod;
            transform: rotate(0deg);
        }

        #xz{
            border: 0px;
            width: 100px;
            height: 50px;
            background-color: deepskyblue;
            color: #ffffff;
            font-size: 18px;
            border-radius: 10px;
        }
        #tz{
            border: 0px;
            width: 100px;
            height: 50px;
            background-color: darkorange;
            color: #ffffff;
            font-size: 18px;
            border-radius: 10px;
        }
        #xzyy{
            width: 98px;
            height: 30px;
            position: absolute;
            margin-top:-25px ;
            margin-left: 1px;
            background-color: midnightblue;
            border-radius: 10px;
            z-index: -10;
        }
        #tzyy{
            width: 98px;
            height: 30px;
            position: absolute;
            margin-top:-25px ;
            margin-left: 110px;
            background-color: darkred;
            border-radius: 10px;
            z-index: -10;
        }
        #xz:hover{
            cursor: pointer;
            background-color: #62D3FC;
        }
        #mess{
            position: absolute;
            top: 100px;
            font-size: 20px;
            font-family: "微软雅黑";
            color: brown;
        }
    </style>
    <script>
        var i = 0;
        var xz_id;
        var sd = 10;
        var ids = new Array();
        window.onload = function(){
            xz = document.getElementById("xz");
            a = document.getElementById("body");
            mess = document.getElementById("mess");
            tz = document.getElementById("tz");
            xz.onclick = function(){
                id = setInterval("xuanzhuan()",10);
                ids.push(id);
                mess.innerHTML = "旋转速度："+ids.length;
            }

            tz.onclick = function(){
                clearInterval(ids[ids.length-1]);
                ids.pop();
                mess.innerHTML = "旋转速度："+ids.length;

            }

            xz.onmousedown = function(){
                document.getElementById("xzyy").style.display="none";
                xz.style.marginTop = "5px";
            }

            xz.onmouseup = function(){
                document.getElementById("xzyy").style.display="block";
                xz.style.marginTop = "0px";
            }

            tz.onmousedown = function(){
                document.getElementById("tzyy").style.display="none";
                tz.style.marginTop = "5px";
            }
            tz.onmouseup = function(){
                document.getElementById("tzyy").style.display="block";
                tz.style.marginTop = "0px";
            }
        }

        function xuanzhuan(){
            if(i>360){
                i=0;
            }else{
                i++;
            }
            var s = "rotate("+i+"deg)";

            a.style.transform = s;

        }

    </script>
</head>
<body>
    <button id="xz">加速</button>
    <div id="xzyy"></div>
    <button id="tz">减速</button><br />
    <div id="tzyy"></div>
    <div id="body">
        <img src="img/fc2.png" height="300px" />
    </div>
    <div id="gan">
        <img src="img/gan.png" width="50pxpx" />
    </div>
    <span id="mess"></span>
</body>

麦田里的守望

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
让一个静止的大风车转动，可加速也可减速

实现该效果的代码为如下所示：<head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #body{ position: absolute;
复制链接

扫一扫