极客观点
项目管理
HarmonyOS
在学习《JavaScript DOM编程艺术》，有些代码不太明白。
问题：在positionMessage（）这个函数中，声明2个elem变量。这两个变量不会冲突吗？
我的思考：JavaScript先执行第一个变量的内容，再执行第二个变量的内容。可是为什么在打开html文件的时候，message和message2是同时移动的？
搞不太懂，求解答~~~下面是相关代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>move</title>
</head>
<body>
<p id="message">6666666</p>
<script src="scripts/addLoadEvent.js"></script>
<script src="scripts/positionMessage.js"></script>
<script src="scripts/moveElement.js"></script>
</body>
</html>
----------
function 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",125,25,20);
if(!document.getElementById("message2")) return false;
var elem = document.getElementById("message2");
elem.style.position = "absolute"
elem.style.left= "50px";
elem.style.top="50px";
moveElement("message2",125,125,20);
}
addLoadEvent(positionMessage);
----------
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);
}
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != "function"){
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
html5
函数是有一个函数作用域的，作用域内使用关键字如：
var let const声明的变量只在当前作用域（或作用域内子作用域）内有效，跟平级的作用域不会冲突，可以去查作用域关键字。然后这本书好像也挺老的了，书里的东西应该都是对的，但是在当前的开发情况下可能不是最正确的，把他当成一本入门书籍就好了。