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

来源：互联网发布：武汉软件测试工资编辑：程序博客网时间：2024/05/17 23:54
这里写图片描述
实现该效果的代码为如下所示：
<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