(需求:使用time.js实现HTML页面中时间的实时更新)
1.错误代码示例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript" src="time.js"></script>
</head>
<body>
<!--头部-->
<header>
<h1>test</h1>
</header>
<!--时间-->
<section class="publicTime">
<span id="time">2015年1月1日 11:11 星期一</span>
<a href="#">温馨提示:为了能正常浏览,请使用高版本浏览器!(IE10+)</a>
</section>
</body>
</html>
原因分析:
(1)当浏览器加载一个网页时,它会按照一定的顺序解析和执行其中的 JavaScript 和 HTML 代码;
(2)当浏览器加载到<script>标签时,src
属性指向外部 JavaScript 文件time.js,浏览器会下载并执行该文件;
(3)当执行到:time.js文件中的var div = document.getElementById("time");时,页面中的<span id="time">2015年1月1日 11:11 星期一</span>标签还没加载,此时div=null;
(4)页面显示如下:
报错:Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
浏览器加载过程中 JavaScript 和 HTML 代码的执行是并行进行的。这意味着 JavaScript 代码的执行不会阻塞 HTML 结构的解析和渲染,也不会阻塞外部资源的下载。然而,如果 JavaScript 代码需要操作和修改 HTML 或执行其他依赖于 HTML 结构的操作,最好将 JavaScript 代码放在合适的位置,以确保它们在相关 HTML 元素可用时执行。
外部JavaScript文件time.js如下:
function fn(){
var time = new Date();
var str= "";
var div = document.getElementById("time");
// console.log(div)
var year = time.getFullYear();
var mon = time.getMonth()+1;
var day = time.getDate();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
var week = time.getDay();
switch (week){
case 0:week="日";
break;
case 1:week="一";
break;
case 2:week="二";
break;
case 3:week="三";
break;
case 4:week="四";
break;
case 5:week="五";
break;
case 6:week="六";
break;
}
str = year +"年"+totwo(mon)+"月"+totwo(day)+"日"+" "+totwo(h)+":"+totwo(m)+":"+totwo(s)+" "+"星期"+week;
// console.log(str);
div.innerHTML=str;
}
fn();
setInterval(fn,1000);
function totwo(n){
if(n<=9){
return n = "0"+n;
}
else{
return n =""+n;
}
}
2.正确代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<!--头部-->
<header>
<h1>test</h1>
</header>
<!--时间-->
<section class="publicTime">
<span id="time">2015年1月1日 11:11 星期一</span>
<a href="#">温馨提示:为了能正常浏览,请使用高版本浏览器!(IE10+)</a>
</section>
</body>
<!--将其放到后面,等HTML页面加载完成,才执行-->
<script type="text/javascript" src="time.js"></script>
</html>
将<script>
标签放在</body>
标签之后,确保了JavaScript代码在HTML内容加载完成后执行。这样document.getElementById("time")
就能成功找到id
为"time"的<span>
元素,并进行内容更新。
3.当然,具体<script>放的位置,需要看你具体的需求,如果你
需要在页面加载之前进行一些操作或设置一些全局变量,那么就可以把<script>放到<head>标签中
可以确保脚本在页面加载期间首先被加载和执行。