如何使用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>

联署材料：

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;
}