首先:放置位置哪里都能放
但是js代码很有可能不起作用:例如:往id为span的标签中定时插入数字
var time=document.getElementById("span");
function counttime() {
time.innerHTML=count;
count=count-1;
if(count<0)
clearTimeout(t);
setTimeout(function () { counttime() },1000);
}
counttime();
,<span id="span" style="color: #FF0000">
解析html由上到下解析,js代码无法找到id为span的标签。因此,如果全局变量直接获取标签则js代码应该放在所用标签位置下方。
解决办法1:使用window.onload令页面加载完成后再执行。则所有标签/内容加载完毕后才会执行function(),效果等同于将function放置于所获取标签之后。
<script> window.onload=function(){ count=5; var time=document.getElementById("txt"); function counttime() { time.innerHTML=count; count=count-1; if(count<0) clearTimeout(t); setTimeout(function () { counttime() },1000); } counttime();} </script> </head> <body> <p id="txt"> ssssssssssssssssssa </p>
<body> <title>test</title> <script>
count=55; function counttime() { document.getElementById("txt").innerHTML=count; count=count-1; if(count<0) clearTimeout(t); setTimeout(function () { counttime() },1000); } </script> </head> <body> <p id="txt"> </p> <input type="button" onclick="counttime()" value="anniu">ssssss</input> </body>
当获取标签在function内,则当调用function时才能赋值,所有将function放置在head、body内.body与html之间都行。
简单说,没有在全局变量直接获取标签则script放置任何位置都可,影响的是执行效率。
当在全局变量直接获取标签,则必须放置在所获标签之后。