js实现旋转大风车
更新时间:2022年02月24日 08:28:22 作者:wwwwnby
这篇文章主要为大家详细介绍了js实现旋转大风车,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
相信大家都对风车这个东西感到不陌生,所以我们今天就要写一个大风车的案例.
这是一个动态网页,下面是css文件的代码,废话少说,上代码:
<style> .fc{ animation:wm 2s infinite linear; } @keyframes wm { from { transform:rotate(0deg); } to { transform:rotate(-360deg); } } .rfc{ animation:wm1 2s infinite linear; } @keyframes wm1 { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } </style>
接下来是js的文件
<body> <div> <h3>我爱玩风车</h3> <img src="../img/logo.png" class="" alt="" id="img1"> <hr> <input type="button" value="开始" onclick="start1()"> <input type="button" value="停止" onclick="stop1()"> <input type="button" value="反转" onclick="reverse()"> <input type="button" value="转1圈" onclick="circle(1)"> 转<input type="text" size="1" value="" onblur="circle(this.value)">圈 </div> </body> <script> function circle(n){ //处于停止状态 if(img1.className==''){ start1() } //已经在转了 setTimeout(stop1,2000*n) } //反转 function reverse(){ img1.className='rfc' } //转起来 function start1() { img1.className='fc' } //停下来 function stop1() { img1.className='' } </script>
查看成品:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
使用uniapp打包微信小程序时主包和vendor.js过大解决(uniCloud的插件分包)
每个使用分包小程序必定含有一个主包,所谓的主包,即放置默认启动页面/TabBar页面,以及一些所有分包都需用到公共资源/JS 脚本,下面这篇文章主要给大家介绍了关于使用uniapp打包微信小程序时主包和vendor.js过大解决的相关资料,,需要的朋友可以参考下2023-02-02ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
这篇文章主要介绍了ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法,本文介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下2016-09-09javascript和jquery实现设置和移除文本框默认值效果代码
这篇文章主要介绍了javascript和jquery实现设置和移除文本框默认值效果代码,本文实现的是类似html5 placeholder(空白提示)一种效果,需要的朋友可以参考下2015-01-01
最新评论