台式小风扇（HTML+CSS+JS练手小项目）

功能介绍
外观展示
HTML代码
CSS代码
JS代码
总结

功能介绍

前段时间看到这样的风扇特效，感觉还挺好玩，就自己也写一个练练手。
风扇有四个档位点击0这个档位时风扇就停止转动了。

外观展示

HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>旋转小风扇</title><link rel="stylesheet" href="css/mycss.css"><script src="js/myjs.js"></script>
</head>
<body><div id="fan"><div id="back_mask"></div><!--风扇后盖--><div id="front_mask"><!--风扇前盖--><ul><li></li><li></li><li></li><li></li><li></li><li></li></ul><div id="logo">WPF</div></div><div id="blade"><!--将风扇叶子包在一个div里在写JavaScript代码时让扇叶旋转更简单--><div id="blades_first" class="blades"></div><!--风扇扇叶--><div id="blades_second" class="blades"></div><div id="blades_third" class="blades"></div></div><div id="neck"></div><!--风扇脖子--><div id="foundation"><!--风扇底座--><div id="found_task"></div><!--档位按钮--><button id="gears_one" class="btn">0</button><button id="gears_two" class="btn">1</button><button id="gears_three" class="btn">2</button><button id="gears_four" class="btn">3</button></div></div>
</body>
</html>

CSS代码

/* 清除全局默认margin和pandding */
* {margin: 0;padding: 0;
}
/* 清除ul默认格式 */
ul {list-style: none;
}
@keyframes rotation{//定义旋转效果动画0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}
}
/* 设置风扇整体样式 */
#fan {width: 250px;height: 400px;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;/* background-color: black; */
}
/* 设置风扇后盖样式 */
#back_mask {width: 250px;height: 250px;background-color: rgb(60, 226, 226);border-radius: 50%;z-index: 2;position: absolute;left: 0;top: 0;
}
/* 设置风扇前盖样式 */
#front_mask {width: 230px;height: 230px;border: 10px solid rgb(9, 124, 177);border-radius: 50%;z-index: 4;position: absolute;left: 0;top: 0;
}
#front_mask ul {width: 100%;height: 100%;
}
/* 设置前边面罩上的格子的统一样式 */
#front_mask ul li {width: 240px;height: 2px;background-color:rgb(9, 124, 177);position: absolute;top: 114px;left: -5px;
}
#front_mask ul li:nth-child(1) {transform: rotate(30deg);
}
#front_mask ul li:nth-child(2) {transform: rotate(60deg);
}
#front_mask ul li:nth-child(3) {transform: rotate(90deg);
}
#front_mask ul li:nth-child(4) {transform: rotate(120deg);
}
#front_mask ul li:nth-child(5) {transform: rotate(150deg);
}
#front_mask ul li:nth-child(6) {transform: rotate(180deg);
}
/* 设置写有wp的部分样式 */
#logo {width: 50px;height: 50px;border-radius: 50%;background-color: rgb(9, 124, 177);line-height: 50px;left: 90px;top: 90px;text-align: center;position: absolute;color: white;font-size: 16px;
}
/* 设置包裹扇叶的div样式 */
#blade{width: 250px;height: 250px;position: absolute; z-index: 3;animation: rotation 0s linear 1s infinite;
}
/*设置扇叶的统一样式*/
.blades {width: 80px;height: 80px;background-color: yellowgreen;position: absolute;left: 45px;top: 45px;border-radius: 20% 50% 0 50%;
}
#blades_second{transform-origin: right bottom;transform: rotate(120deg);
}
#blades_third{transform-origin: right bottom;transform: rotate(240deg);
}
/* 设置风扇脖子 */
#neck{width: 50px;height: 70px;border: 3px solid rgb(9, 124, 177);border-radius: 0 0 5% 5%;background-color: rgb(60, 226, 226);position: absolute;left: 100px;top: 240px;z-index: 1;
}
/* 设置底座样式 */
#foundation{width: 184px;height: 85px;background-color:rgb(60, 226, 226);border: 3px solid rgb(9, 124, 177);border-radius: 50%;position: absolute;left: 30px;top: 293px;z-index: 0;
}
#found_task{width: 66px;height: 20px;border: 2px solid rgb(9, 124, 177);border-radius: 50%;position: absolute;left: 60px;top: 5px;background-color: rgb(131, 243, 243);
}
/* 设置按钮样式 */
.btn{width: 20px;height: 20px;border-radius: 70%;background-color: yellowgreen;position: absolute;
}
#gears_one{left: 45px;top: 45px;
}
#gears_two{left: 70px;top: 45px;
}
#gears_three{left: 95px;top: 45px;
}
#gears_four{left: 120px;top: 45px;
}

JS代码

window.onload = function() {var oBtn = document.getElementsByClassName('btn');//获取按钮节点var oBlade = document.getElementById('blade');//获取扇叶节点//第一种写法利用定时器是风扇旋转var timer;for(let i = 0; i < oBtn.length; i++){//这里要用let声明i，以形成闭包效果if(i == 0){oBtn[0].onclick = function() {//当点击0按钮时停止转动clearInterval(timer);}}else{oBtn[i].onclick = function() {var d = 0;if(timer){//防止多次点击按钮设置多个定时器clearInterval(timer);//清除定时器}timer = setInterval(function() {//设置定时器if(d >= 360){d = 0;}d += i * 20 ;//设置转过角度oBlade.style.transform = 'rotate(' + d + 'deg)'},100 - (i * 10))}}}//第二种写法利用js和css动画效果来写// for(let i = 0; i < oBtn.length; i++){//这里要用let声明i，以形成闭包效果//     if (i == 0) {//         oBtn[0].onclick = function () {//当点击0按钮时停止转动//             oBlade.style.animationPlayState = 'paused';//将动画状态设置为暂停//         }//     } else {//         oBtn[i].onclick = function () {//当点击0按钮时停止转动//             oBlade.style.animationPlayState = 'running';//             oBlade.style.animationDuration = 800 - i * 200 + 'ms';//         }//     }// }
}

js代码部分用了两种方法，第一种利用定时器解决旋转和不同档位之间不同转速问题，第二种则利用了css动画。

总结

这个小项目相对来说较为简单，感觉旋转特效利用css动画的效果要比利用定时器完成的效果更流畅。总的来说适合新手练手。

台式小风扇（HTML+CSS+JS练手小项目）相关推荐

js练手小项目——JavaScript实现进度条
setInterval( )定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInte ...
html+css+js之20个练手小项目（一）
html+css+js之20个练手小项目(一)--Hangman 前言一.HTML 二.CSS 三.JS 前言前端新手练习,记录不迷失. 主要练习html和CSS布局以及JS. 来源github, ...
HTML+CSS+JS练手小玩意
HTML+CSS+JS练手小玩意今天准备给我的小组员布置任务时,找到这个网页,很适合学了JS用来练手. 在这里,分享给大家实例索引
ssm练手小项目_20 个 JavaScript+Html+CSS 练手的小项目
前言: 最近在 GitHub 上发现了一个 vanillawebprojects[1] 开源仓库,里面收集了 20 个 JavaScript+Html+CSS的练手项目,没有使用任何框架,可以让你从基 ...
springboot+vue练手小项目[前台搭建+后台编写]（非常详细）
[ springboot+vue练手小项目 ] 技术栈: springboot+vue3+element-plus +Mybaties-plus+hutool +mysql8 项目介绍 :最近刚学了s ...
爬虫练手小项目：豆瓣高分图书TOP100
爬虫练手小项目:豆瓣高分图书TOP100 import requests import re from requests.exceptions import RequestException impo ...
数据结构练手小项目（AVL树、哈希表、循环链表、MySQL数据库）
文章目录前言正文(无删减) 我的想法(删减修改版) 数据导入与数据存储功能实现数据结构用户结构 SIM卡结构 AVL树数据结构哈希表结构数据表用户表 SIM卡表时间安排前言本月主 ...
练手小项目，爬取3DM图片
博客原文:https://weweweha.com 1. 概述爬取3DM指定网页的游戏壁纸,并且通过多线程来加速爬取图片的速度. 2.使用库 request库用来1解析指定网页,re库用来搜 ...
c语言模拟器怎么打程序,C语言初学者练手小项目——万花模拟器
原标题:C语言初学者练手小项目--万花模拟器还记得小时候玩的万花尺么?好好玩,各种不同的点距能画出各种各样形状图形. C语言程序万花尺模拟函数功能:每隔5秒随机生成万花图形并自动保存作图参数以及 ...

台式小风扇（HTML+CSS+JS练手小项目）

台式小风扇（HTML+CSS+JS练手小项目）

功能介绍

外观展示

HTML代码

CSS代码

JS代码

总结

台式小风扇（HTML+CSS+JS练手小项目）相关推荐

最新文章

热门文章