如何在javascript中执行javascript函数

-3

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

我知道如何在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>

来源

2017-05-16 William Svens

你想要做的第一件事就是验证你的'，'分号不会导致的问题。他们不是必需的。 https://www.w3schools.com/jsref/event_onclick.asp – Nol

@Nol - 他们肯定不会造成问题。最佳做法是用分号结束每条语句，而不要依赖ASI。 – Quentin

我既哑又累。花了半秒钟的时间看它，并意识到我不需要这么说。似乎OP的问题是，他们没有做他们的Init，必须将imgObj留空。 – Nol

略有扩展@周华健的回答以上，这样的代码将尽快页面加载执行。

使用setInterval()，提供moveRight()为function参数和200为delay将保持调用你的函数每200毫秒。您也可以使用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>

来源

2017-05-16 14:51:22 Sandman

是的，谢谢你，那正是我想要的。 –

只是"moveRight();应该做的工作。您不需要使用window做任何技巧，因为您没有使用变量来保存函数名称。

来源

2017-05-16 14:20:25 Quentin

我在脚本里写'moveRight（）;'，但是当我启动页面时什么都没有发生，我的按钮也不工作，当我删除moveRight（）;'然后按钮开始再次工作。 –

另请参阅：http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element – Quentin

我从控制台得到这个当我尝试运行moveRight（）; 遗漏的类型错误：在tset.html：52 MoveRight的@ tset.html：在MoveRight的（36 tset.html）不能看空的特性 '风格' 36 （匿名）@ tset.html：52 –

-1

尝试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>

来源

2017-05-16 14:26:12

我不想要要使用按钮，我希望代码自动运行，并且我希望在加载页面时在JavaScript中执行该函数。 –

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.

功能中的代码将执行时 “东西” 所调用（呼叫）的功能：

当事件发生时（当用户点击一个按钮时）>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>

来源

2017-05-16 15:08:18 AvrilAlejandro

如何在javascript中执行javascript函数

回答

相关问题