DOM作业：BMI，打字(animates.css动画)，关键帧动画的animation属性值

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