<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box { width:1000px;height:1000px;}
#box div { width:100px;height:100px;float:left;}
</style>
<script>
function p(){
var img=new Array();
var imgbg=document.createElement("img");
imgbg.src="img/bg.gif";
for(var j=1;j<=8;j++){
img[j]=document.createElement("img");
img[j].src="img/bg"+j+".gif";
}
for(var i=1;i<=100;i++){
var div=document.createElement("div");
var box=document.getElementById("box");
box.appendChild(div);
div.id="div"+i;
if(i==1){
div.appendChild(img[1]);
}else if(i==10){
div.appendChild(img[4]);
}else if(i==91){
div.appendChild(img[2]);
}else if(i==100){
div.appendChild(img[6]);
}else if(i>1&&i<10){
div.appendChild(img[7]);
}else if(i>90&&i<100){
div.appendChild(img[8]);
}else if(i%10==1){
div.appendChild(img[3]);
}else if(i%10==0){
div.appendChild(img[5]);
}else{
div.appendChild(imgbg);
}
}
}
</script>
</head>
<body onload="p()">
<div id="box" >
</div>
</body>
</html>
这段代码是用来制作一个五子棋棋盘。
老师的方法是把那些img作为背景放到div里。确实这种简单。
但我写的这种方法是向div里追加img元素,确实麻烦,但逻辑上我感觉也可以,就是我不懂为什么四个角(四个div)追加各自的img都没有问题,然后换成中间其他部分,像div 2~9的时候,就只有9被追加了,其他几个也是,只有第9个,第99个,第81个,第89个被追加,也是是if条件里的最后一个div。不懂为什么只追加了最后一个,每一个div不是独立的吗,为什么这种方法是错误的呢。那比如,创建第2个div的时候,满足条件1-10,就应该向它的里面追加img【7】,创建第3个div的时候,满足条件1-10,就应该向它的里面追加img【7】,怎么这样循环下来,就只有最后一个有img元素。
第一次在这里提问,这里应该都是大神,虽然我这个问题有点低级,希望有好心人不厌其烦给我解释一下啊。
这个是五子棋盘的一些图: