1,BMI
页面结构:
<style>
* {
margin: 0;
padding: 0;
}
main {
padding: 20px;
width: 50%;
height: 2000px;
border: solid 1px red;
margin: 0 auto;
text-align: center;
}
p {
margin: 10px 0;
}
.dot {
border-top: 3px dotted red;
}
table {
/* 设置边框合并 */
border-collapse: collapse;
width: 500px;
height: 300px;
margin: 0 auto;
}
td {
border: solid 1px black;
}
.result {
background: purple;
}
</style>
<main>
<h1>BMI计算</h1>
<hr>
<hr>
<div>
<p>BMI值計算公式: BMI = 體重(公斤) / 身高2(公尺2)</p>
<p>例如:一個52公斤的人,身高是155公分,則BMI為 :</p>
<p>52(公斤)/1.552 ( 公尺2 )= 21.6</p>
<p>體重正常範圍為 BMI=18.5~24</p>
</div>
<div class="dot"></div>
<div>
<p>快看看自己的BMI是否在理想範圍吧!</p>
<div>
<div>
<label>身高:
<input type="text" class="height">
</label>
<button class="caculate">开始计算</button>
</div>
<div style="margin-top: 20px;">
<label>体重:
<input type="text" class="weight">
</label>
<button class="clear">清除</button>
</div>
</div>
</div>
<div>
<p>你的BMI為</p>
<input type="text" class="result">
</div>
<table style="margin-top: 30px;">
<tr>
<td></td>
<td>身體質量指數(BMI) (kg/m2)
</td>
<td>
腰圍 (cm)
</td>
</tr>
<tr>
<td>體重過輕</td>
<td class="l1">
BMI < 18.5</td>
<td></td>
</tr>
<tr>
<td>正常範圍</td>
<td class="l2">18.5≦BMI<24</td>
<td></td>
</tr>
<tr>
<td>異常範圍</td>
<td>
<span class="l3">過重:24≦BMI<27</span> <br>
<span class="l4">輕度肥胖:27≦BMI<30</span> <br>
<span class="l5">中度肥胖:30≦BMI<35</span> <br>
<span class="l6">重度肥胖:BMI≧35</span> <br>
</td>
<td></td>
</tr>
</table>
</main>
dom:
每次计算完,要改变对应结果范围的背景色:
定义一个全局变量str,使对应的不同类名添加的相同背景色,以及移除背景色
每次点击清除按钮后,要先把之前的背景色置空,(要先判断str是否为空,如果为空,会报错,因为找不到对应的选择器)
<script> var weightInput = document.querySelector('.weight'); var heightInput = document.querySelector('.height'); var calBtn = document.querySelector('.caculate'); var clearBtn = document.querySelector('.clear'); var resultInput = document.querySelector('.result'); // 计算 var str = ""; calBtn.onclick = function () { // 先清除背景色 // dom的异常: 失败的执行 queryselector . 不是一个有效的选择器 // str 为空时 也不行 // BMI.html:134 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '.' is not a valid selector. if(str){ document.querySelector("."+str).style.background = ""; } var BMI = weightInput.value * 1 / Math.pow(heightInput.value * 1, 2); resultInput.value = BMI.toFixed(2); if (BMI < 18.5) { str = "l1"; } else if (BMI < 24) { str = "l2"; } else { if (BMI < 27) { str = "l3"; } else if (BMI < 30) { str = "l4"; } else if (BMI < 35) { str = "l5"; } else { str = "l6"; } } document.querySelector("."+str).style.background = "red"; } // 重值 clearBtn.onclick = function () { weightInput.value = ""; heightInput.value = ""; resultInput.value = ""; if(str){ document.querySelector("."+str).style.background = ""; } str = ""; // 重置 一下 } </script>
2.打字
引用BootCDN里面的animate.css动画效果
animate.css (v4.1.1) - animate.css 包含了一组炫酷、有趣、跨浏览器的动画,可以在你的项目中直接使用。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
https://www.bootcdn.cn/animate.css/ <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css" rel="stylesheet">
也可以引用本地的资源文件
<!-- 版本不同类名也不同 animate__animated animate__bounce (老版本) 新版本animated(基础类) shakeX(动画类) --> <main class="animated shakeX"> 1233 </main>
页面结构;
<style>
div {
width: 400px;
height: 400px;
line-height: 400px;
border-radius: 50%;
margin: 0 auto;
text-align: center;
font-size: 200px;
border: solid black 2px;
}
p {
text-align: center;
}
.right {
animation: fadeIn 300ms linear;
}
@keyframes fadeIn {
0% {
transform: scale(1);
}
100% {
transform: scale(.1);
}
}
.wrong {
animation: shake 300ms linear;
color: red;
}
@keyframes shake {
0%{
transform: translateX(0);
}
25%{
transform: translateX(-10px);
}
50%{
transform: translateX(0px);
}
75%{
transform: translateX(10px);
}
100%{
transform: translateX(0);
}
}
</style>
<div>
A
</div>
<P>正确率: <span> 100%</span></P>
dom:
利用ASCII值和for循环将字母存入数组
定义随机字母
setTimeOut()延时器
<script> var div = document.querySelector('div'); var total = 0; var right = 0; // 1.定义存字符串 // var array = ["A","B","C","D","E"]; // var letter = array[Math.floor(Math.random()*array.length)]; // div.innerText = letter; var array = []; for (var i = 0; i < 26; i++) { // 把ASCII值转换为 对应字符 var letter = String.fromCharCode(65 + i); array.push(letter); } // 定义随机字母的方法 function randomLetter() { var letter = array[Math.floor(Math.random() * array.length)] div.innerText = letter; } randomLetter();// 第一次展示随机字母 document.onkeyup = function () { total++; var input = event.key.toUpperCase();// 输入的 var display = div.innerText;//显示的 if (input === display) { right++; // 切换字母 randomLetter(); div.classList.add("right"); // settimeout 延迟执行 setTimeout(function () { div.classList.remove("right"); }, 300) } else { div.classList.add("wrong"); setTimeout(function () { div.classList.remove("wrong"); }, 300) } document.querySelector("span").innerText = ((right / total) * 100).toFixed(2) +"%"; } </script>
3.关键帧动画的animation属性值
animation: name duration timing-function delay iteration-count direction fill-mode;
1、animation-name:主要是在设置动画的名字(自定义的)的时候使用通常要与@keyframes name{0%{ }100%{ }}一起使用。
2、animation-duration:用来设置动画执行一次的时间,这个属性值必须存在因为它的默认值是0没有动画效果。
3、animation-delay:动画的延迟时间,单位一般是s(秒)、ms(毫秒)默认延迟时间也是0。
4、animation-iteration-count:动画的重复次数,默认值就是1,infinite无限次数。
5、animation-timing-function:动画的运动形式,animation-timing-function的值是贝塞尔曲线,默认值是ease,表示动画以低速开始,然后加速,最后在结束前变慢。 最常用的值有以下几个:
(1)linear:表示动画从头到尾的速度都是相同的。
(2)ease-in:表示动画以低速开始。
(3)ease-out:表示动画以低速结束。
(4)ease-in-out:表示动画以低速开始和结束
6、animation-fill-mode:规定动画播放之前或之后。其动画效果是否可见。(1)None(默认值):在运动结束之后回到初始 位置,在延迟的情况下,让0%在延迟后生效。
(2)Backwards:在延迟的情况下,让0%在延迟前生效。
(3)Forwards:在运动结束之后,停留到结束位置。
(4)both:backwards和forwards同时生效。
(5)animation-direction:属性定义是否应该轮流反向播放动画。
(6)alternate:一次正向(0%100%),一次反向(100%0%)。
(7)reverse:永远都是反向。从100%~0%。
(8)normal(默认值):永远都是正向,从0%~100%。
————————————————
版权声明:本文为CSDN博主「AlysaXu」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/AlysaXu/article/details/104483991