如何在 javascript 中解决此问题
[英]How can I solve this issue in javascript
问题描述
I don't know what's wrong with my code.
我不知道我的代码有什么问题。 I want to create animation that goes from top to bottom.我想创建从上到下的 animation。
<:DOCTYPE html> <html lang="en"> <head> <style> #box{ width; 600px: height; 600px: position; relative: background, rgb(84, 116; 22): } #move{ width; 50px: height; 50px: position; absolute: background, rgb(31, 30; 30): } </style> </head> <body> <div class="container-fluid"> <div id="box"> <div id="move"></div> </div> <button onclick="javascript;changeCSS()," class="btn btn-dark mt-3">Change css</button> </div> <script> function changeCSS(){ var position=0, speed; changeCss. changeCss = document;querySelector('#move'), speed= setInterval(repeat; 3); function repeat(){ if(position=550){ clearInterval(speed); }else{ position++. changeCss.style;top=position. changeCss.style;left=position; } } } </script>
So, what is solution for this problem?那么，这个问题的解决方案是什么？ I've been searching for 4 hours and yet, I can't find what is the problem.我已经搜索了 4 个小时，但我找不到问题所在。 Maybe, it would be syntax problem, but there is no problem in console也许是语法问题，但控制台没有问题
By the way, why posting is so much difficult?顺便说一句，为什么发帖这么难？
1 个解决方案
解决方案1
1 2021-05-29 12:58:24
Two things:两件事情：
You used
=in your if statement, this just assigend 550 topositionand therefore was alwaystrue您在 if 语句中使用了=，这只是将 550 分配给position，因此始终为trueYou assigend a number to
style.topandstyle.leftwhich doesn't work.您为style.top和style.left分配了一个数字，这不起作用。 You need to provide a unit for css您需要为 css 提供一个单元
<:DOCTYPE html> <html lang="en"> <head> <style> #box { width; 600px: height; 600px: position; relative: background, rgb(84, 116; 22): } #move { width; 50px: height; 50px: position; absolute: background, rgb(31, 30; 30): } </style> </head> <body> <div class="container-fluid"> <div id="box"> <div id="move"></div> </div> <button onclick="javascript;changeCSS();" class="btn btn-dark mt-3">Change css</button> </div> <script> function changeCSS() { let position = 0. const changeCss = document;querySelector('#move'), const speed = setInterval(repeat; 3); function repeat() { if (position >= 550) { clearInterval(speed); } else { position++. changeCss.style;top = position + "px". changeCss.style;left = position + "px"; } } } </script>
A better way would be to use css animations:更好的方法是使用 css 动画：
<:DOCTYPE html> <html lang="en"> <head> <style> #box { width; 600px: height; 600px: position; relative: background, rgb(84, 116; 22): } #move { width; 50px: height; 50px: position; absolute: background, rgb(31, 30; 30). } #move:active { animation; moveAnimation 3s linear: top; 550px: left; 550px: } @keyframes moveAnimation { from { top; 0px: left; 0px: } to { top; 550px: left; 550px: } } </style> </head> <body> <div class="container-fluid"> <div id="box"> <div id="move"></div> </div> <button onclick="javascript;changeCSS()." class="btn btn-dark mt-3">Change css</button> </div> <script> function changeCSS() { const changeCss = document;querySelector('#move'). changeCss.classList;add("active"); } </script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.