js實(shí)現(xiàn)旋轉(zhuǎn)大風(fēng)車
更新時(shí)間：2022年02月24日 08:28:22 作者：wwwwnby
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)旋轉(zhuǎn)大風(fēng)車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
相信大家都對(duì)風(fēng)車這個(gè)東西感到不陌生，所以我們今天就要寫一個(gè)大風(fēng)車的案例.
這是一個(gè)動(dòng)態(tài)網(wǎng)頁(yè)，下面是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>接下來(lái)是js的文件
<body>
<div>
? ? <h3>我愛玩風(fēng)車</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="反轉(zhuǎn)" onclick="reverse()">
? ? <input type="button" value="轉(zhuǎn)1圈" onclick="circle(1)">
? ? 轉(zhuǎn)<input type="text" size="1" value="" onblur="circle(this.value)">圈
</div>
</body>
<script>
? ? function circle(n){
? ? ? ? //處于停止?fàn)顟B(tài)
? ? ? ? if(img1.className==''){
? ? ? ? ? ? start1()
? ? ? ? }
? ? ? ? //已經(jīng)在轉(zhuǎn)了
? ? ? ? setTimeout(stop1,2000*n)
? ? }
? ? //反轉(zhuǎn)
? ? function reverse(){
? ? ? ? img1.className='rfc'
? ? }
? ? //轉(zhuǎn)起來(lái)
? ? function start1() {
? ? ? ? img1.className='fc'
? ? }
? ? //停下來(lái)
? ? function stop1() {
? ? ? ? img1.className=''
? ? }
</script>查看成品：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了javascript常用函數(shù)，再來(lái)15個(gè)常用函數(shù)，都具有很高的實(shí)用性，感興趣的小伙伴們可以參考一下2015-11-11
JS中2種定時(shí)器的使用及清除的實(shí)現(xiàn)
本文主要介紹了JS中2種定時(shí)器的使用及清除的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
sort是數(shù)組的一個(gè)排序方法。學(xué)習(xí)js的朋友可以參考下。
2011-07-07 
原型鏈?zhǔn)荍avaScript中繼承的主要方法。本文重點(diǎn)給大家介紹JavaScript基于原型鏈的繼承，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-06-06 
這篇文章主要介紹了Webpack中publicPath路徑問題詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2018-05-05 
Array的push與unshift方法都能給當(dāng)前數(shù)組添加元素，不同的是，push是在末尾添加，而unshift則是在開頭添加。
2011-03-03 
js數(shù)組操作學(xué)習(xí)總結(jié)。需要的朋友可以過來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11 
JavaScript中創(chuàng)建對(duì)象和繼承示例解讀
這篇文章主要介紹了JavaScript中怎樣創(chuàng)建對(duì)象和繼承,需要的朋友可以參考下
2014-02-02 
下面小編就為大家?guī)?lái)一篇js拼接html字符串的注意事項(xiàng)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2016-10-10