js练习中的困扰
通过js 实现简单的文本移动
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js动画效果演示</title>
</head>
<body>
<p id="message">666</p>
<p id="message2">777</p>
<script src="js动画效果.js"></script>
</body>
</html>
然后js有三个函数 分别是 moveelement函数
function moveElement(elementId,final_x,final_y,interval){
if(!document.getElementById) return false;
if(!document.getElementById(elementId)) return false;
var elem = document.getElementById(elementId);
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if( xpos == final_x&&ypos == final_y){
return true;
}
if(xpos>final_x){
xpos--;
}
if(xpos<final_x){
xpos++;
}
if(ypos>final_y){
ypos--;
}
if(ypos<final_y){
ypos++;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementId+"')"+final_x+","+final_y+","+interval+")";
movement = setTimeout(repeat,interval)
}
addonloadEvent函数
function addLoadEvent(func){
var oldonload = window.onload;
if( typeof window.onload != "function"){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
以及positionMessage函数
if(!document.getElementById) return false;
if(!document.getElementById("message")) return false;
var elem = document.getElementById("message");
elem.style.position = "absolute";
elem.style.left = "50px";
elem.style.top = "100px";
moveElement("message",200,100,10);
}
addLoadEvent(positionMessage);
想要实现的效果是文本移动
但实际上positiMessage成功调用
但未出现文本移动效果；
并且浏览器报错[Web浏览器] "Uncaught SyntaxError: Unexpected number" (1)
郎朗坤1回答
-
梵蒂冈之花
JSBIN你这个代码有很大的问题，没有考虑方向什么的修改了一个地方你自己比对一下补充：这个地方理应会将其拼接成一个 "moveElement('message',200,100,10)"，如果你把这个单引号去除掉，那么拼接出来就会变成"moveElement(message,200,100,10)",然后setTimeout调用的时候就会变成new Function("moveElement(message,200,100,10)")()，这个时候message只是个没意义的字符，也不是全局变量，于是程序就出错了
随时随地看视频慕课网APP
相关分类
JavaScript