如何在 javascript 中执行我的 javascript 函数

Question

这是我的代码，它使图像向右移动。我搜索了如何调用和执行函数，但我不明白它们。

我知道如何在 HTML 中执行它，但在 javascript 中不知道如何执行。想一直加载页面的时候执行

<input type="button" value="Start" onclick="moveRight();" />

我看过这段代码，但我无法让它与我的代码一起工作。

window["functionName"](arguments);

例如我应该写在括号中的内容。

<script>
        var imgObj = null;
        var animate ;

        function init(){
           imgObj = document.getElementById('myImage');
           imgObj.style.position= 'relative'; 
           imgObj.style.left = '0px'; 
        }

        function moveRight(){
           imgObj.style.left = parseInt(imgObj.style.left) + 11 + 'px';
           animate = setTimeout(moveRight,22); // call moveRight in 20msec
        }

<body>

  <form>
     <img id="myImage" src="myimage.jpg" />
     <p>Click the buttons below to handle animation</p>
     <input type="button" value="Start" onclick="moveRight();" />
      <input type="button" value="Start" onclick="moveLeft();" />
     <input type="button" value="Stop" onclick="stop();" />
  </form>

Answer 1

只需 "moveRight(); 即可。您不需要对 window 做任何技巧，因为您没有使用变量来保存函数名称。

Answer 2

尝试position: absolute。

var img = document.getElementById("myImage");
var imgLeft = 0;
var imgTop = 0;
img.style.position = "absolute";

function render() {
  img.style.left = imgLeft + "px";
  img.style.top = imgTop + "px";
}

function move(x, y) {
  if (x === void 0) {
    x = imgLeft;
  }
  if (y === void 0) {
    y = imgTop;
  }
  imgLeft += x;
  imgTop += y;
  console.log(imgLeft, imgTop);
  render();
}
render();

<form>
  <img id="myImage" src="myimage.jpg" />
  <p>Click the buttons below to handle animation</p>
  <input type="button" value="right" onclick="move(10,0);" />
  <input type="button" value="left" onclick="move(-10,0);" />
  <input type="button" value="up" onclick="move(0,-10);" />
  <input type="button" value="down" onclick="move(0,10);" />
</form>

Answer 3

对上面@Emil 的回答进行了轻微扩展，以便代码将在页面加载后立即执行。

使用setInterval(), providing moveRight() as the function parameter and 200 as the delay will keep calling your function every 200 milliseconds. You can also use clearInterval()取消定时器。

您可能希望将其进一步扩展至 prevent image from going off-screen（如果这是一项要求）。

var img = document.getElementById("myImage"); 
var imgLeft = 0;
var imgTop = 0;
img.style.position = "absolute";

function render() {
  img.style.left = imgLeft + "px";
  img.style.top = imgTop + "px";
}

function moveRight() {
  console.log(img.style.left);
  imgLeft += 10;
  render();
}
var interval = setInterval(moveRight, 200);

<form>
  <img id="myImage" src="myimage.jpg" />      
</form>

Answer 4

window.onload: Execute a JavaScript immediately after a page has been loaded, You can also put a script tag after an element inside body and it will be executed when the page has loaded.

函数内部的代码会在"something"调用（调用）函数时执行:

当事件发生时（当用户单击按钮时）> elem.onclick=functionname()
从JavaScript代码调用（调用）时 > functionname()
自动（自调用）> function(){}()

setInterval() 方法以指定的时间间隔（以毫秒为单位）调用函数或计算表达式。

   window.onload = function(){
  var imgObj = document.getElementById('myImage');
  imgObj.style.position= 'relative'; 
  imgObj.style.left = '0px';
  function moveRight(){
    imgObj.style.left = parseInt(imgObj.style.left) + 11 + 'px';
  }
  var animate = setInterval(moveRight,222); // call moveRight in 20msec
  document.getElementById('stop').addEventListener("click", function(){
    clearInterval(animate);
  });
}

<form>
   <img id="myImage" src="myimage.jpg" />
   <input type="button" value="Stop" id="stop"/>
</form>

如何在 javascript 中执行我的 javascript 函数

How to execute my javascript function in javascript

javascript

function

call