JavaScript-如何制作它，以便我可以重复该功能？

发布于 2025-01-22 19:30:09 字数 1864 浏览 3 评论 0原文

每次点击按钮时，这里的代码都应该在网页中随机位置移动块，但是我编写的功能仅在单击按钮时将块移动一次。我正在尝试做到这一点，以便每次点击按钮时，块都会移动。我应该怎么办？



    /*-- dont mind the css, I think nothings wrong here, maybe? --*/
    body{
        height: 100vh;
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      button{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .box{
        height: 170px;
        width: 170px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgb(190, 46, 46);
        transition: 0.5s;
      }
      
   
    <body>
      <div class="box" id="box"></div>
      <!-- I tried onclick and onmousedown functions, but they dont work-->
      <button type="button" onmousedown="activationButton()">Click Me</button>

      <script>
        const box = document.getElementById("box");
        const button = document.getElementById("activationButton");
        const transformX = Math.floor(Math.random() * 300);
        const transformY = Math.floor(Math.random() * 330);
        const positionXY = Math.floor(Math.random() * 90);
        
        // function doesn't repeat itself. I think it is because the variables transformX and 
        //transformY 
        // doesn't reset, thus it locks the block in place?
        function activationButton() {
          box.style.transform = `translate( -${transformX}%, -${transformY}%)`;
          box.style.right = `${positionXY}%`
          box.style.left = `${positionXY}%`
        }
      </script>
    </body>

原文

the code here is supposed to move the block in a random position in the webpage every time the button is clicked, but the function I wrote only moves the block once when the button is clicked. I am trying to make it so that every time the button is clicked, the block moves. What should I do?



    /*-- dont mind the css, I think nothings wrong here, maybe? --*/
    body{
        height: 100vh;
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      button{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .box{
        height: 170px;
        width: 170px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgb(190, 46, 46);
        transition: 0.5s;
      }
      
   
    <body>
      <div class="box" id="box"></div>
      <!-- I tried onclick and onmousedown functions, but they dont work-->
      <button type="button" onmousedown="activationButton()">Click Me</button>

      <script>
        const box = document.getElementById("box");
        const button = document.getElementById("activationButton");
        const transformX = Math.floor(Math.random() * 300);
        const transformY = Math.floor(Math.random() * 330);
        const positionXY = Math.floor(Math.random() * 90);
        
        // function doesn't repeat itself. I think it is because the variables transformX and 
        //transformY 
        // doesn't reset, thus it locks the block in place?
        function activationButton() {
          box.style.transform = `translate( -${transformX}%, -${transformY}%)`;
          box.style.right = `${positionXY}%`
          box.style.left = `${positionXY}%`
        }
      </script>
    </body>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

白馒头 2025-01-29 19:30:09

您的随机位置只会声明一次。将其移入功能中，每次点击时随机对其进行随机化

 <script>
    const box = document.getElementById("box");
    const button = document.getElementById("activationButton");

    function activationButton() {
        var transformX = Math.floor(Math.random() * 300);
        var transformY = Math.floor(Math.random() * 330);
        var positionXY = Math.floor(Math.random() * 90);
        box.style.transform = `translate( -${transformX}%, -${transformY}%)`;
        box.style.right = `${positionXY}%`
        box.style.left = `${positionXY}%`
    }
</script>

Your random position only gets declared once. Move it inside of the function to randomize it everytime it gets clicked

 <script>
    const box = document.getElementById("box");
    const button = document.getElementById("activationButton");

    function activationButton() {
        var transformX = Math.floor(Math.random() * 300);
        var transformY = Math.floor(Math.random() * 330);
        var positionXY = Math.floor(Math.random() * 90);
        box.style.transform = `translate( -${transformX}%, -${transformY}%)`;
        box.style.right = `${positionXY}%`
        box.style.left = `${positionXY}%`
    }
</script>

回复收藏 0 原文

无敌元气妹 2025-01-29 19:30:09

您正在计算随机transformx和transformy一次，并且每次在activateButton函数中使用相同的值。

您需要将随机化放入功能中。另外，我将onMousedown更改为onclick。

const box = document.getElementById("box");
const button = document.getElementById("activationButton");


// function doesn't repeat itself. I think it is because the variables transformX and 
//transformY 
// doesn't reset, thus it locks the block in place?
function activationButton() {

const transformX = Math.floor(Math.random() * 300);
const transformY = Math.floor(Math.random() * 330);
const positionXY = Math.floor(Math.random() * 90);
  box.style.transform = `translate( -${transformX}%, -${transformY}%)`;
  box.style.right = `${positionXY}%`
  box.style.left = `${positionXY}%`
}

button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box {
  height: 170px;
  width: 170px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(190, 46, 46);
  transition: 0.5s;
}

<body>
  <div class="box" id="box">asd</div>
  <!-- I tried onclick and onmousedown functions, but they dont work-->
  <button type="button" onclick="activationButton()">Click Me</button>

</body>

You are calculating random transformX and transformY only once and using the same value every time inside the activateButton function.

You need to put the randomisation inside the function. Also I changed onmousedown to onclick.

const box = document.getElementById("box");
const button = document.getElementById("activationButton");


// function doesn't repeat itself. I think it is because the variables transformX and 
//transformY 
// doesn't reset, thus it locks the block in place?
function activationButton() {

const transformX = Math.floor(Math.random() * 300);
const transformY = Math.floor(Math.random() * 330);
const positionXY = Math.floor(Math.random() * 90);
  box.style.transform = `translate( -${transformX}%, -${transformY}%)`;
  box.style.right = `${positionXY}%`
  box.style.left = `${positionXY}%`
}

button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box {
  height: 170px;
  width: 170px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(190, 46, 46);
  transition: 0.5s;
}

<body>
  <div class="box" id="box">asd</div>
  <!-- I tried onclick and onmousedown functions, but they dont work-->
  <button type="button" onclick="activationButton()">Click Me</button>

</body>

回复收藏 0 原文

~没有更多了~