JS27. 控制动画
描述
请补全代码，要求当滑动id为"range"的滑块控件时可以改变id为"rect"的矩形旋转速度。要求如下：HTML/CSS/JavaScript 解法, 执行用时: 1754ms, 内存消耗: 77900KB, 提交时间: 2021-12-27
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n #rect {\n width: 120px;\n height: 100px;\n background-color: black;\n /*补全代码*/\n animation:rect 10s linear infinite ;\n }\n @keyframes rect {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n </style>\n </head>\n <body>\n <!-- 补全代码 -->\n \t<div id=\"rect\"></div>\n <input id=\"range\" type=\"range\" min=\"1\" max=\"10\" step=\"1\" value=\"1\"/>\n \n <script type=\"text/javascript\">\n // 补全代码\n document.querySelector(\"#range\").onchange = function(){\n let inputVal = document.querySelector('#range').value;\n let time = 10 - inputVal + 1;\n let rect = document.querySelector(\"#rect\");\n rect.style.animationDuration = time + 's';\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1755ms, 内存消耗: 77856KB, 提交时间: 2021-12-05
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n #rect {\n width: 120px;\n height: 100px;\n background-color: black;\n /*补全代码*/\n animation: rect 10s linear infinite;\n }\n @keyframes rect {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n </style>\n </head>\n <body>\n <!-- 补全代码 -->\n \t<div id=\"rect\"></div>\n <input id=\"range\" type=\"range\" step=\"1\" defaultValue=\"1\" value=\"1\" min=\"1\" max=\"10\">\n \n <script type=\"text/javascript\">\n // 补全代码\n document.querySelector('#range').onchange = function() {\n let speed = document.querySelector('#range').value\n document.querySelector('#rect').style.animationDuration = 11 - speed + 's'\n}\n\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1756ms, 内存消耗: 77772KB, 提交时间: 2021-12-06
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n #rect {\n width: 120px;\n height: 100px;\n background-color: black;\n /*补全代码*/\n animation: rect 10s linear infinite;\n }\n @keyframes rect {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n </style>\n </head>\n <body>\n <!-- 补全代码 -->\n \t<div id=\"rect\"></div>\n <input id=\"range\" type='range' step='1' defaultValue='1' value='1' min='1' max='10' />\n \n <script type=\"text/javascript\">\n // 补全代码\n var range1 = document.querySelector('#range')\n range1.onchange = function () {\n let speed = document.querySelector('#range').value\n document.querySelector('#rect').style.animationDuration = 11 - speed + 's'\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1758ms, 内存消耗: 77796KB, 提交时间: 2022-01-06
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n #rect {\n width: 120px;\n height: 100px;\n background-color: black;\n /*补全代码*/\n animation:rect 10s;\n }\n @keyframes rect {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n </style>\n </head>\n <body>\n <!-- 补全代码 -->\n \t<div id=\"rect\"></div>\n <input id=\"range\" type='range' min=1 max=10 step=1 onchange=\"rotateRate()\"/>\n \n <script type=\"text/javascript\">\n // 补全代码\n input = document.getElementById('range')\n rect = document.getElementById('rect');\n function rotateRate(){\n rect.style.animationDuration = 11 - input.value + 's';\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1758ms, 内存消耗: 77844KB, 提交时间: 2021-12-14
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n #rect {\n width: 120px;\n height: 100px;\n background-color: black;\n /*补全代码*/\n animation: rect 10s linear infinite\n }\n @keyframes rect {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n <div id=\"rect\"></div>\n <input id=\"range\" type=\"range\" step=\"1\" defaultValue=\"1\" value=\"1\" min=\"1\" max=\"10\">\n </style>\n </head>\n <body>\n <!-- 补全代码 -->\n \t<div id=\"rect\"></div>\n <input id=\"range\" />\n \n <script type=\"text/javascript\">\n // 补全代码\n document.querySelector('#range').onchange = function() {\n let speed = document.querySelector('#range').value\n document.querySelector('#rect').style.animationDuration = 11 - speed + 's'\n}\n\n </script>\n </body>\n</html>","libs":[]}