如何使用JS左右移动框

Question

这是我的css和html中的权重和箭头。我想通过单击箭头使权重左右移动。请帮我找js。

.container {
width: 1050px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 255, 3.5, 0.4);
}
.arrow {
top: 50%;
transform: translate(0, -50%);
position: absolute;
font-size: 100px;
cursor: pointer;
}
.right {
top: 50%;
transform: translate(0, -50%);
position: absolute;
font-size: 100px;
cursor: pointer;
right: 0;
}
.board {
transform-origin: 50%, 50%;
width: 1000px;
height: 10px;
background: #ff0;
position: relative;
top: 140px;
left: 25px;
}
.weight {
transform-origin: -50% -50%;
width: 50px;
height: 50px;
background: #f00;
position: relative;
top: 140px;
left: 500px;
}

<div class="container">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<div class="arrow left"><i class="fas fa-chevron-left"></i></div>
<div class="arrow right"><i class="fas fa-chevron-right"></i></div>
<div class="scale">
<div class="base"></div>
<div class="gravity">
<div class="weight"></div>
<div class="board"></div>
</div>
</div>
</div>

我有HTML和CSS，但我想知道如何制作jS，通过单击箭头左右移动这个权重。

Answer 1

试试这个：

HTML:

<div class="arrow left" onclick="arrowLeft"><i class="fas fa-chevron-left"></i></div>
<div class="arrow right" onclick="arrowRight"><i class="fas fa-chevron-right"></i></div>
<div class="weight" id="weight"></div>

JS:

var left = 0
var right = 0
function arrowLeft() {
let x = document.getElementById("weight")
left = left + 25 + "px"
x.style.left = left;
}
function arrowRight() {
let x = document.getElementById("weight")
right = right + 25 + "px"
x.style.left = right;
}