js初心者学習テストの簡単な例:十枚の写真の中から三枚の写真を選んで、三枚を超えるとヒントがあります.
3041 ワード
js初心者学習テストの簡単な例:十枚の写真の中から三枚の写真を選んで、三枚を超えるとヒントがあります.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> ， - - ， </title>
<script type="text/javascript">
window.onload = function (){
var tpDiv = document.getElementById('kstupian'); // dom
for (var i=0;i<10;i++){
var images = tpDiv.getElementsByTagName("img")[i];
var myDiv = document.getElementById('myDiv'); // dom
images.onclick = function(){
var bigImg = document.createElement("img"); // img
bigImg.width="100"; //200 px
bigImg.src=this.src; // img src
var gdDiv = document.getElementById('myDiv'); // dom
var gdimg = gdDiv.getElementsByTagName("img");
if(gdimg.length<3){
myDiv.appendChild(bigImg); // dom img ]
}else{
alert(" ");
}
};
}
};
function cleardiv()
{
document.getElementById('myDiv').innerHTML="";
}
</script>
</head>
<body>
<h2> div </h2>
<div id="kstupian">
<img src="http://www.mianfeimoban.com/uploadfile/2013/1003/thumb_160_138_20131003094815615.gif" width="100">
<img src="http://www.mianfeimoban.com/uploadfile/2013/0825/thumb_160_138_20130825100031836.gif" width="100">
<img src="http://www.mianfeimoban.com/uploadfile/2012/0515/thumb_160_138_20120515102811398.gif" width="100">
<img src="http://www.mianfeimoban.com/uploadfile/2012/0507/thumb_160_138_20120507075949641.jpg" width="100">
<img src="http://www.mianfeimoban.com/uploadfile/2012/0425/20120425025042274.gif" width="100">
<img src="http://www.mianfeimoban.com/uploadfile/2013/1003/thumb_160_138_20131003094815615.gif" width="100">
<img src="http://www.mianfeimoban.com/uploadfile/2013/0825/thumb_160_138_20130825100031836.gif" width="100">
<img src="http://www.mianfeimoban.com/uploadfile/2012/0515/thumb_160_138_20120515102811398.gif" width="100">
<img src="http://www.mianfeimoban.com/uploadfile/2012/0507/thumb_160_138_20120507075949641.jpg" width="100">
<img src="http://www.mianfeimoban.com/uploadfile/2012/0425/20120425025042274.gif" width="100">
</div>
<h2> div div </h2>
<div id="myDiv" ></div>
<h2> </h2>
<input type="button" onclick="javascript:cleardiv();" value=" div ">
</body>
</html>