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

登录 · 发表于 2026-2-10 14:06:21

表明很详细，直接上代码
涉及知识点：

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>

复制代码

博客更新不是很及时,须要看反面内容的可以看看我的gitee堆栈
牛客JS题Gitee堆栈

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金

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

本帖子中包含更多资源

浏览过的版块

瑞星