js例子
阿新 • • 發佈：2017-06-23
block otto 500px hid 試用 關於 索引 進度 log
1.子菜單下拉
<!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=utf-8" /> <title>無標題文檔</title> <style type="text/css"> *{ margin:0px auto; padding:0px; } #caidanwai{ width:800px; height:40px; margin-top:100px; } #meau{ width:404px; height:40px; border:1px solid #99F; } .list{ float:left; width:100px; height:40px; text-align:center; line-height:40px; vertical-align:middle; border-right:1px solid #99F; } .erji{ width:0px; height:0px; float:left; } .erjiwai{ width:100px; height:120px; border:1px solid #99F; position:relative; top:41px; left:-102px; display:none; } .leixing{ width:100px; height:39px; text-align:center; line-height:40px; vertical-align:middle; border-bottom:1px solid #99F; } </style> </head> <body> <div id="caidanwai"> <div id="meau"> <div class="list" onmouseover="show(‘chanpin‘)" onmouseout="hide(‘chanpin‘)" >產品中心</div> <div class="erji"> <div class="erjiwai" id="chanpin" onmouseover="xuanzhong(this)" onmouseout="yinc(this)"> <div class="leixing">食品</div> <div class="leixing">家電</div> <div class="leixing">手機</div> </div> </div> <div class="list" onmouseover="show(‘xinwen‘)" onmouseout="hide(‘xinwen‘)">新聞中心</div> <div class="erji"> <div class="erjiwai" id="xinwen" onmouseover="xuanzhong(this)" onmouseout="yinc(this)"> <div class="leixing">體育</div> <div class="leixing">娛樂</div> <div class="leixing">軍事</div> </div> </div> <div class="list">聯系我們</div> <div class="list">關於我們</div> </div> </div> </body> <script type="text/javascript"> function show(id){//點擊顯示下拉菜單 var a=document.getElementById(id); a.style.display="block"; } function hide(id){//鼠標離開下來菜單隱藏 var a=document.getElementById(id); a.style.display="none"; } function xuanzhong(a){ a.style.display="block"; } function yinc(a){ a.style.display="none"; } </script> </html>
我的問題有：再打代碼時打錯單詞導致實現不了，還有就是，onmouseover，onmousemove用法有些不熟悉
2.圖片輪播
<!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=utf-8" /> <title>無標題文檔</title> <style type="text/css"> *{ margin:0px auto; padding:0px; } #wai{ width:1000px; height:500px; } </style> </head> <body> <div id="wai" > <img class="img" src="try/t0184016d6010089f01.jpg" width="1000" height="500" /> <img class="img" src="try/t01ec98d422ed9fab4a.jpg" width="1000" height="500" style="display:none"/> <img class="img" src="try/t017f330eeb8de34fc2.jpg" width="1000" height="500" style="display:none"/> </div> </body> <script type="text/javascript"> var img=document.getElementsByClassName("img"); var i=0; huan(); function huan(){ xianshi(); if(i>=img.length-1){ i=0; }else{ i++; } window.setTimeout("huan()",2000); } function xianshi(){ for(var a=0;a<img.length;a++){ img[a].style.display="none"; } img[i].style.display="block"; } </script> </html>
問題有：嘗試用for循環，使用i代表循環次數和圖片索引，沒有完成
/*function huan(){
for(i=0;i<img.length-1;i++){
img[i].style.display="block";
if(i>=img.length-1){
i=0
}
}
img[i].style.display="none";
window.setTimeout("huan()",2000);
}*/
3.選項卡效果
<!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=utf-8" /> <title>無標題文檔</title> <style type="text/css" > *{ margin:0px auto; padding:0px; } #xuan{ width:400px; height:30px; } .wai{width:100px; height:30px; margin-top:100px; float:left} .nei{ width:800px; height:500px; } </style> </head> <body> <div id="xuan"> <div class="wai" style="background-color:#06F" onclick="dianji(‘one‘)"></div> <div class="wai" style="background-color:#0F0" onclick="dianji(‘two‘)" ></div> <div class="wai" style="background-color:#C36" onclick="dianji(‘three‘)"></div> <div class="wai" style="background-color:#FF0" onclick="dianji(‘four‘)"></div> </div> <div style="clear:both"></div> <div class="nei" id="one " style="background-color:#06F"></div> <div class="nei" id="two" style="background-color:#0F0; display:none"></div> <div class="nei" id="three" style="background-color:#C36; display:none"></div> <div class="nei" id="four" style="background-color:#FF0; display:none"></div> </body> <script type="text/javascript"> function dianji(id){ var a=document.getElementsByClassName("nei"); for(i=0;i<a.length;i++){ a[i].style.display="none"; } document.getElementById(id).style.display="block"; } </script> </html>
問題有：當對第一個選項卡點擊2次，下面的內容不再顯示
4.進度條制作
<!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=utf-8" /> <title>無標題文檔</title> <style type="text/css"> *{ margin:0px auto; padding:0px; } #wai{ width:300px; height:30px; border:1px solid #3FF; margin-top:100px; float:left } #nei{ width:0%; height:30px; background-color:#F00; float:left } #dj{ margin-top:130px; } </style> </head> <body> <div id="wai"> <div id="nei"></div> </div> <input type="button" value="點擊" id="dj" onclick="show()" /> </body> <script type="text/javascript"> var a=0; function show(){ if(a<100){ a++; } document.getElementById("nei").style.width=a+‘%‘; window.setTimeout("show()",5); } </script> </html>
問題：
document.getElementById("nei").style.width=a+‘%‘;我第一次在"a+‘%‘"這樣寫的，實現不了
window.setTimeout("show()",5);對於settimeout（）的使用不大清晰
我想過嘗試一下設計一個停止按鈕，當你按下進度條停止，而進度條可以一直在走
js例子