如何在 javascript 中解決此問題
[英]How can I solve this issue in javascript
問題描述
我不知道我的代碼有什么問題。 我想創建從上到下的 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>
那么，這個問題的解決方案是什么？ 我已經搜索了 4 個小時，但我找不到問題所在。 也許是語法問題，但控制台沒有問題
順便說一句，為什么發帖這么難？
1 個解決方案
解決方案1
1 2021-05-29 12:58:24
兩件事情：
您在 if 語句中使用了
=，這只是將 550 分配給position，因此始終為true您為
style.top和style.left分配了一個數字，這不起作用。 您需要為 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>
更好的方法是使用 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>
在 javascript（開關）中發現無效的運算符我該如何解決此代碼
[英]Invalid operator found in javascript (switch) how can i solve this code
在 javascript 中沒有嵌套 for 循環的情況下如何解決這種情況
[英]How can i solve this scenario without nested for loop in javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.