2021-05-11

挺好玩的便携小空调

夏天将至，鉴于微信里传的很火的一个便携小空调，笔者这里花了一个多小时用前端也模仿写了一个玩玩

话不多说首先放图

 

功能比较简单，用的纯JS写的，点击开关显示温度和热冷，同时开关按钮颜色改变，点击热冷按钮切换热冷，点击加减按钮改变温度(16到32度)，Html代码如下：

<div id="box">
			<span>便携小空调</span>
			<br />
			Tip:为你的夏日带去清凉!
			<!-- 空调部分 -->
			<div id="air-Conditioning">
				<!-- 规格部分 -->
				<div id="Standards">
					<div id="airName">
						<span>
							格力空调
						</span>
					</div>
				</div>
				<!-- 显示部分 -->
				<div id="airShow">
					<!-- 显示热冷部分 -->
					<div id="ShowFont">
						<span id="cool">Cool</span>
					</div>
					<!-- 显示温度部分 -->
					<div id="temperature">
						<span id="tmpSpan">
							20
						</span>C
					</div>
				</div>

			</div>
			<!-- 小图标部分 -->
			<div id="airIcor">
				GeLi
			</div>
			<!-- 吹风部分 -->
			<div id="windys">
				<div class="windy">

				</div>
				<div class="windy">

				</div>
				<div class="windy">

				</div>
			</div>

			<!-- 遥控器部分 -->
			<div id="colose">
				<button type="button" id="btn1">热</button>
				<button type="button" id="btn2" style="background-color: green;color: white;">开关</button>
				<button type="button" id="btn3">冷</button><br />
				<button type="button" id="add">+</button><br />
				<button type="button" id="reduce">-</button>
			</div>
		</div>

JS代码如下：

​

			window.onload = function() {
				let btn1 = document.getElementById('btn1')
				let btn2 = document.getElementById('btn2')
				let btn3 = document.getElementById('btn3')
				let add = document.getElementById('add')
				let reduce = document.getElementById('reduce')
				let airShow = document.getElementById('airShow')
				let cool = document.getElementById('cool')
				let tmpSpan = document.getElementById('tmpSpan')
				let windy = document.getElementsByClassName('windy')
				btn2.onclick = function() {
					if (airShow.style.display == 'none') {
						airShow.style.display = 'block'
						windy[0].style.display = 'block'
						windy[1].style.display = 'block'
						windy[2].style.display = 'block'
						this.style.backgroundColor = 'red'
						btn1.onclick = function() {
							cool.innerHTML = 'Hot'
						}
						btn3.onclick = function() {
							cool.innerHTML = "Cool"
						}
						add.onclick = function() {
							let indexAdd = parseInt(tmpSpan.innerHTML)
							if (indexAdd < 32) {
								indexAdd++
								tmpSpan.innerHTML = indexAdd
							} else {}
						}
						reduce.onclick = function() {
							let indexReduce = parseInt(tmpSpan.innerHTML)
							if (indexReduce > 16) {
								indexReduce--
								tmpSpan.innerHTML = indexReduce
							} else {}
						}
					} else {
						airShow.style.display = 'none'
						windy[0].style.display = 'none'
						windy[1].style.display = 'none'
						windy[2].style.display = 'none'
						this.style.backgroundColor = 'green'
					}
					// alert('点击了开关')
				}
			}
	

CSS代码如下：

* {
				margin: 0px;
				padding: 0px;
			}

			#box {
				width: 1000px;
				height: 1000px;
				border: 1px solid #555555;
				margin: auto;
				text-align: center;
			}

			#box span {
				font-size: 50px;
			}

			#air-Conditioning {
				width: 500px;
				height: 250px;
				margin: 100px auto;
				border: 1px solid #AAAAAA;
				box-shadow: 0 0 15px #8888;
				border-radius: 10px;
			}

			#Standards {
				width: 60px;
				height: 80px;
				border: 1px solid aqua;
				margin: 10px;
				border-radius: 8px;
				position: relative;
				background-color: #00FFFF;
			}

			#airName {
				width: 30px;
				height: 60px;
				margin: 8px auto;
				border: 1px solid #555555;
				background-color: white;
			}

			#airName span {
				font-size: 10px;
			}

			#airShow {
				width: 100px;
				/* border: 1px solid red; */
				height: 200px;
				position: relative;
				left: 350px;
				top: -80px;
				display: none;
			}

			#ShowFont {
				width: 50px;
				height: 50px;
				/* border: 1px solid #555555; */
			}

			#ShowFont span {
				font-size: 25px;
			}

			#temperature {
				width: 80px;
				height: 100px;
				/* border: 1px solid #FF0000; */
				margin: auto;
			}

			#temperature span {
				font-size: 25px;
				text-align: center;
				line-height: 100px;
			}

			#airIcor {
				width: 50px;
				height: 20px;
				/* border: 1px solid #555555; */
				position: relative;
				top: -150px;
				left: 470px;
			}


			#windy1 {
				width: 100px;
				height: 25px;
				border-bottom: 1px solid #333;
				filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0.45);
				/*IE*/
				-moz-transform: rotate(-45deg);
				/*Firefox*/
				-webkit-transform: rotate(-45deg);
				/*Safari,Chrome*/
				position: relative;
				top: -50px;
				left: 250px;
				display: none;
			}

			#windy2 {
				width: 100px;
				height: 25px;
				border-bottom: 1px solid #333;
				filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0.45);
				/*IE*/
				-moz-transform: rotate(90deg);
				/*Firefox*/
				-webkit-transform: rotate(90deg);
				/*Safari,Chrome*/
				position: relative;
				top: -50px;
				left: 450px;
				display: none;
			}

			#windy3 {
				width: 100px;
				height: 25px;
				border-bottom: 1px solid #333;
				filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0.45);
				/*IE*/
				-moz-transform: rotate(45deg);
				/*Firefox*/
				-webkit-transform: rotate(45deg);
				/*Safari,Chrome*/
				position: relative;
				top: -100px;
				left: 600px;
				display: none;
			}


			#colose {

				width: 200px;
				height: 300px;

				position: relative;
				margin: auto;
			}

由于技术有限，一些细节做的不够好，后续空闲时间会再完善的。