JS实现玩转风车
更新时间：2022年02月24日 09:43:24 作者：勤奋的小镇青年、
这篇文章主要为大家详细介绍了JS实现玩转风车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现玩转风车的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>找风车</title>
<style>
#div1{
width: 800px;
height: 610px;
border: 1px solid red;
}
img{
width: 60px;
height: 60px;
}
<!--infinite 无限的 linear 匀速-->
.fc{
animation:wm 2s infinite linear;
}
@keyframes wm {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.reverse{
animation:wm1 2s infinite linear;
}
@keyframes wm1 {
from {
transform:rotate(0deg);
}
to {
transform:rotate(-360deg);
}
}
</style>
</head>
<body>
<div style="margin: 50px 450px">
<h2 style="text-align: center">玩转风车</h2>
<h3 style="text-align: center">生成<input type="text" onblur="generateFC(this.value)" size="1">个风车
<input type="button" value="停止" onclick="stop1()">
<input type="button" value="开始" onclick="start1()">
<input type="button" value="反向" onclick="reverse()">
转<input type="text" size="1" value="" onblur="circle(this.value)">圈
<input type="button" value="放大" onclick="big()">
<input type="button" value="缩小" onclick="small()">
</h3>
<div id="div1">
<!--此处生成风车-->
</div>
</div>
</body>
<script>
//1.生成风车
//获取输入框的value值num
function generateFC(num) {
//每次触发失去焦点事件进行清空风车
document.getElementById("div1").innerHTML=''
//把value值进行遍历
for (let i = 0; i <num ; i++) {
//每次遍历都向页面加入img标签并设置class属性fc 顺时针转动
document.getElementById("div1").innerHTML+= '<img src="img/logo.png" class="fc" height="240" width="240"/>';
}
}
//获取所有的img标签
let img = document.getElementsByTagName('img');
//2.停止
function stop1() {
//遍历所有的img标签并设置class属性为无
for (let i = 0; i <img.length ; i++) {
img[i].className=''
}
}
//3.开始
function start1() {
for (let i = 0; i <img.length ; i++) {
//将img属性设置为无
img[i].className='fc'
}
}
//4.反向
function reverse() {
for (let i = 0; i <img.length ; i++) {
img[i].className='reverse'
}
}
//5.转几圈
function circle(num) {
for (let i = 0; i <img.length ; i++) {
//首先将风车的class属性设置为转动，num圈后调用stop1函数
img[i].className='fc'
setTimeout(stop1,2000*num)
}
}
//6.变大
function big() {
for (let i = 0; i <img.length ; i++) {
//将img的style属性width设置为当前的width度的2倍
img[i].style.width=img[i].width*2+"px"
img[i].style.height=img[i].height*2+"px"
}
}
//7.变小
function small() {
for (let i = 0; i< img.length ; i++) {
img[i].style.width=img[i].width/2+"px"
img[i].style.height=img[i].height/2+"px"
}
}
</script>
代码图片
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
js中substr,substring,indexOf,lastIndexOf，split，replace的用法详解
这篇文章主要介绍了js中substr,substring,indexOf,lastIndexOf，split，replace的用法详解的相关资料,需要的朋友可以参考下2015-11-11
这篇文章主要为大家详细介绍了javascript实现简单打字游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要为大家详细介绍了微信小程序实现锚点功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
这篇文章主要为大家详细介绍了js HTML5多媒体影音播放,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
弄了一个百度地图来标注地理位置信息，通过百度api来获取地址。这地图api是javascript版,感兴趣的朋友可以了解下，或许对你有所帮助2013-02-02
这篇文章主要介绍了如何在CocosCreator中做一个List，对List列表感兴趣的同学，不妨来试验一下2021-04-04
IE没有我们想象中笨，它知道总的循环次数还是一千万次。因此，得把这一百个十万次循环分开执行。虽然Javascript是单线程的，但也可以通过setTimeout或setInterval模拟多线程。2011-03-03
这篇文章给大家分享一个小的JavaScript的案例，就是模仿微博输入框的效果，非常不错，对微博输入框效果感兴趣的朋友通过本文学习吧2016-12-12
Bootstrap是一种web框架，是基于HTML,CSS和JS的一种目前较为流行的前端框架。本篇文章将总结常用组件及其属性，需要的朋友参考下吧2017-01-01
相信大家阅读了Bootstrap第一篇文章后，对Bootstrap充满了探索欲望，小编也对Bootstrap产生了兴趣，所以今天再整理一篇关于Bootstrap的入门介绍，希望大家喜欢。2015-11-11
最新评论