学习内容
- dom（文档对象模型）
学习的代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#content {
width: 400px;
height: 400px;
background-color: grey;
margin: 100px auto;
}
#pager {
width: 400px;
margin: 100px auto;
text-align: center;
}
</style>
</head>
<body>
<div id="content">
<img id="cimg" src="" alt="图片的描述问题" width="400px" height="400px">
</div>
<div id="pager">
</div>
<select id="sel" onchange="changeImg(this);">
</select>
<script type="text/javascript">
// 图片数据源
var imgArray = [
"http://placehold.it/400x400/333333/00a2ff.png&text=1",
"http://placehold.it/400x400/333333/00a2ff.png&text=2",
"http://placehold.it/400x400/333333/00a2ff.png&text=3",
"http://placehold.it/400x400/333333/00a2ff.png&text=4",
"http://placehold.it/400x400/333333/00a2ff.png&text=5"];
var i = 1; // 全局变量i，用于指定显示哪种图片
var achangeImg = function(v) {
document.getElementById("cimg").src = imgArray[v];
i = v;
}
var changeImg = function(sel) {
document.getElementById("cimg").src = imgArray[sel.value];
i = sel.value;
}
// 初始化select标签中option的内容
var selOptions = "";
var as = "";
for (var k = 0; k < imgArray.length; k++) {
selOptions += "<option value='"+k+"'>第"+(k+1)+"张</option>";
as += "<a href='javascript:achangeImg("+k+")'>"+(k+1)+"</a> ";
}
document.getElementById("sel").innerHTML = selOptions;
document.getElementById("pager").innerHTML = as;
document.getElementById("cimg").src = imgArray[0];
var ci = function() {
document.getElementById("cimg").src = imgArray[i]; // 显示图片
// 准备下一张图片
i++; // 1
// 如果i加完的结果超过了图片的长度，则初始化i=1
if (i == imgArray.length) {
i = 0;
}
}
setInterval(ci, 1000);
</script>
</body>
</html>学习总结
今天上午老师讲解了“HTML DOM” 了解了该元素的重要性，HTML DOM （文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
今天简单的默写了英语，感觉只要好好背就一定可以的。明天马上就要考试了，对明天的考试有莫名的恐惧，加油把！