牛客JS题（二十八）控制动画

news2024/11/15 11:15:38

注释很详细，直接上代码

涉及知识点：

css动态效果
前提判断
类型判断

题干：
在这里插入图片描述

我的答案

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style type="text/css">
      #rect {
        width: 100px;
        height: 100px;
        box-sizing: border-box;
        border: 3px solid transparent;
        border-top-color: #fc2f70;
        border-bottom-color: #fc2f70;
        border-radius: 50%;
        /*补全代码*/
        animation: rect 10s ease infinite;
      }

      @keyframes rect {
        50% {
          transform: rotate(360deg) scale(0.4, 0.33);
          border-width: 8px;
        }

        100% {
          transform: rotate(720deg) scale(1, 1);
          border-width: 3px;
        }
      }
    </style>
  </head>

  <body>
    <!-- 补全代码 -->
    <div id="rect">
      <div class="leaf leaf1"></div>
      <div class="leaf leaf2"></div>
      <div class="leaf leaf3"></div>
    </div>
    <input id="range" />

    <script type="text/javascript">
      /**
       * 小友肯定疑惑滑块呢，这题目提供的模板本身就是输入框
       * 原本就个黑框框转圈！？为了美观点我稍微改了点样式
       * 这题主要是前提判断的问题
       * 首先是考虑输入的是不是数字，如果是则转为整数赋值（滑动间隔为1，没小数），否则赋值1
       * 再考虑其取值范围写俩判断，欧了
       *
       * 好像改太多过不了牛客判题了，本地跑是对的
       * 不管了，反正咱学到了，小破判题系统爱过不过φ(*￣0￣)
       */
      // 补全代码
      let rect = document.getElementById("rect");
      let range = document.getElementById("range");
      range.onchange = function () {
        let value = this.value;
        Number(value) ? (value = parseInt(value)) : (value = 1);
        value < 1 || value > 10
          ? value < 1
            ? (value = 1)
            : (value = 10)
          : "眨眼睛";
        rect.style.animationDuration = 11 - value + "s";
      };

      //牛客的测例，咱跑出来是对的，也不知道是不支持咱用的哪个函数，不管了！
      function aaa() {
        document.querySelector("#range").value = 10;
        document.querySelector("#range").onchange();
        return document.querySelector("#rect").style.animationDuration === "1s";
      }
      console.log(aaa());
    </script>
  </body>
</html>