Javascript 单击按钮更改图像位置
我对编码知之甚少，但我希望当我点击其中一个测试按钮时，图像能够移动。我希望它是一个变量，所以它不断地检查变量，我不知道如何使用变量，在任何给定的时刻，当变量=数字时，它处于我指定的特定位置。当我点击测试1时，这个变量上升1，当我点击测试2时，它下降1。在0-10之间的任何给定变量中，每个数字都有一个特定的图像位置。一旦变量达到11，变量将立即重置为0，就像在循环中一样。它可以包括HTML、CSS和Javascript，如果这让人困惑，很抱歉，我真的是个编码高手： 这是我到目前为止所有的代码，它真的没有帮助，但我认为我应该添加它无论如何Javascript 单击按钮更改图像位置,javascript,html,css,variables,position,Javascript,Html,Css,Variables,Position,我对编码知之甚少，但我希望当我点击其中一个测试按钮时，图像能够移动。我希望它是一个变量，所以它不断地检查变量，我不知道如何使用变量，在任何给定的时刻，当变量=数字时，它处于我指定的特定位置。当我点击测试1时，这个变量上升1，当我点击测试2时，它下降1。在0-10之间的任何给定变量中，每个数字都有一个特定的图像位置。一旦变量达到11，变量将立即重置为0，就像在循环中一样。它可以包括HTML、CSS和Javascript，如果这让人困惑，很抱歉，我真的是个编码高手： 这是我到目前为止所有的代码，它真
<img id="img01" src="https://cdn.shopify.com/s/files/1/0080/8372/products/tattly_triangle_yoko_sakao_ohama_00_1200x1200.png?v=1575322215" height="300">
<button id="test1" type="button">test 1</button>
<button id="test2" type="button">test 2</button>
感谢您的帮助：查看下面的代码。我希望这个例子能帮助你理解方块移动原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>moved image</title>
</head>
<body>
<div class="wrapper">
<div>
<img class="image" src="" width="50" style="left: 200px;">
</div>
</div>
<button class="button" type="button" id="left-button" onclick="moveLeft()">Left</button>
<button class="button" type="button" id="right-button" onclick="moveRight()">Right</button>
<style>
.wrapper {
position: relative;
width: 500px;
min-height: 200px;
background-color: yellow;
}
.image {
position: absolute;
top: 40px;
width: 100px;
height: 70px;
background-color: blue;
}
</style>
<script>
'use strict'
const getNumber = function(str) {
return parseInt(str, 10);
}
const transformToString = function(num) {
return num + 'px';
}
const SHIFT = 10;
const MARGIN = 10;
const element = document.querySelector('.image');
const LEFT_MARGIN = getNumber(element.style.left) - SHIFT * MARGIN;
const RIGHT_MARGIN = getNumber(element.style.left) + SHIFT * MARGIN;
const moveLeft = function() {
if (getNumber(element.style.left) > LEFT_MARGIN) {
element.style.left = transformToString(getNumber(element.style.left) - SHIFT);
}
}
const moveRight = function() {
if (getNumber(element.style.left) < RIGHT_MARGIN) {
element.style.left = transformToString(getNumber(element.style.left) + SHIFT);
}
}
</script>
</body>
</html>
图像的移动在某种程度上与递增/递减的值有关？它应该如何移动？向我打招呼。你想做的事情并不复杂。但是在这里，在StackOverflow上，我们不免费提供代码功能，只提供非常简单和快速的解决方案，我们可以帮助您调试/改进代码。所以你有两个选择：1。做你的研究，学习，尝试找到解决方案。如果你失败了，没问题，再来这里，向我们展示你的努力。你试过什么。或2。在自由职业者网站上，付钱给某人做这项工作