我对编码不是很了解，但是我希望能够做到这一点，因此，当我单击“测试”按钮之一时，图像会移动。我希望它是一个变量，以便它不断检查变量（我不知道如何使用变量），并且在任何给定时刻，当变量=数字时，它都位于我指定的特定位置。当我单击测试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>