js實現(xiàn)旋轉大風車
更新時間：2022年02月24日 08:28:22 作者：wwwwnby
這篇文章主要為大家詳細介紹了js實現(xiàn)旋轉大風車，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
相信大家都對風車這個東西感到不陌生，所以我們今天就要寫一個大風車的案例.
這是一個動態(tài)網(wǎng)頁，下面是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){
? ? ? ? //處于停止狀態(tài)
? ? ? ? if(img1.className==''){
? ? ? ? ? ? start1()
? ? ? ? }
? ? ? ? //已經(jīng)在轉了
? ? ? ? setTimeout(stop1,2000*n)
? ? }
? ? //反轉
? ? function reverse(){
? ? ? ? img1.className='rfc'
? ? }
? ? //轉起來
? ? function start1() {
? ? ? ? img1.className='fc'
? ? }
? ? //停下來
? ? function stop1() {
? ? ? ? img1.className=''
? ? }
</script>查看成品：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要介紹了瀏覽器調(diào)試動態(tài)js腳本的方法，文中給大家?guī)韮煞N調(diào)試方法，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-01-01
按回車鍵后跳到下一控件的js代碼2009-03-03
使用uniapp打包微信小程序時主包和vendor.js過大解決(uniCloud的插件分包)
每個使用分包小程序必定含有一個主包,所謂的主包,即放置默認啟動頁面/TabBar頁面,以及一些所有分包都需用到公共資源/JS 腳本,下面這篇文章主要給大家介紹了關于使用uniapp打包微信小程序時主包和vendor.js過大解決的相關資料,,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了JsonProperty 的使用方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
本文主要介紹了使用JavaScript渲染頁面的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,感興趣的小伙伴下面隨著小編來一起來學習吧2023-12-12
這篇文章主要為大家詳細介紹了js實現(xiàn)移動端輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要給大家介紹了關于JS獲取當前時間的兩種方法,在web開發(fā)中,通過js獲取時間非常的常用,我這里做個總結,需要的朋友可以參考下2023-09-09
js實現(xiàn)選項卡內(nèi)容切換以及折疊和展開效果【推薦】
本文主要介紹了js實現(xiàn)選項卡內(nèi)容切換以及文字折疊和展開效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
ionic由于使用了header和subheader導致被遮擋的問題的兩種解決方法
這篇文章主要介紹了ionic由于使用了header和subheader導致被遮擋的問題的兩種解決方法，本文介紹的非常詳細，具有參考借鑒價值,需要的朋友可以參考下2016-09-09
javascript和jquery實現(xiàn)設置和移除文本框默認值效果代碼
這篇文章主要介紹了javascript和jquery實現(xiàn)設置和移除文本框默認值效果代碼,本文實現(xiàn)的是類似html5 placeholder（空白提示）一種效果,需要的朋友可以參考下2015-01-01