<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>找風(fēng)車</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">玩轉(zhuǎn)風(fēng)車</h2>

? ? <h3 style="text-align: center">生成<input type="text" onblur="generateFC(this.value)" size="1">個(gè)風(fēng)車
? ? ? ? <input type="button" value="停止" onclick="stop1()">
? ? ? ? <input type="button" value="開始" onclick="start1()">
? ? ? ? <input type="button" value="反向" onclick="reverse()">
? ? ? ? 轉(zhuǎn)<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">
? ? ? ? <!--此處生成風(fēng)車-->
? ? </div>
</div>
</body>
<script>
? ? //1.生成風(fēng)車
? ? //獲取輸入框的value值num
? ? function generateFC(num) {
? ? ? ? //每次觸發(fā)失去焦點(diǎn)事件進(jìn)行清空風(fēng)車
? ? ? ? document.getElementById("div1").innerHTML=''
? ? ? ? //把value值進(jìn)行遍歷
? ? ? ? for (let i = 0; i <num ; i++) {
? ? ? ? ? ? //每次遍歷都向頁面加入img標(biāo)簽并設(shè)置class屬性fc 順時(shí)針轉(zhuǎn)動(dòng)
? ? ? ? ? ? document.getElementById("div1").innerHTML+= '<img src="img/logo.png" class="fc" height="240" width="240"/>';
? ? ? ? }
? ? }
? ? //獲取所有的img標(biāo)簽
? ? let img = document.getElementsByTagName('img');
? ? //2.停止
? ? function stop1() {
? ? ? ? //遍歷所有的img標(biāo)簽并設(shè)置class屬性為無
? ? ? ? for (let i = 0; i <img.length ; i++) {
? ? ? ? ? ? img[i].className=''
? ? ? ? }
? ? }
? ? //3.開始
? ? function start1() {
? ? ? ? for (let i = 0; i <img.length ; i++) {
? ? ? ? ? ? //將img屬性設(shè)置為無
? ? ? ? ? ? img[i].className='fc'
? ? ? ? }
? ? }
//4.反向
? ? function reverse() {
? ? ? ? for (let i = 0; i <img.length ; i++) {
? ? ? ? ? ? img[i].className='reverse'
? ? ? ? }
? ? }
? ? //5.轉(zhuǎn)幾圈
? ? function circle(num) {
? ? ? ? for (let i = 0; i <img.length ; i++) {
? ? ? ? ? ? //首先將風(fēng)車的class屬性設(shè)置為轉(zhuǎn)動(dòng)，num圈后調(diào)用stop1函數(shù)
? ? ? ? ? ? img[i].className='fc'
? ? ? ? ? ? setTimeout(stop1,2000*num)
? ? ? ? }
? ? }
? ? //6.變大
? ? function big() {
? ? ? ? for (let i = 0; i <img.length ; i++) {
? ? ? ? ? ? //將img的style屬性width設(shè)置為當(dāng)前的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>