<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>//Point 1 delayer and timer (BOM browser Object Model)var delayer;var timer;//case 1 : 10s => 0svar i =10;functioncalculate(){// get object htmlelement var txt = document.getElementById("txtbox");if(i !=-1){txt.value = i--;}else{//stop the setIntervalwindow.clearInterval(timer);}}functionstart(){//timer，1s oncetimer = window.setInterval("calculate()",1000);}//case 2 : alter a mbox after 2 secondsfunctiondelayer(){// delay 2s a mboxwindow.setTimeout("alert('ads could be pop-up')",2000);}//conclusion about setTimeout and setInterval , function in system ,control a thing to do.//point2 html's skip : history /** below are a.html' code <a href = "../a.html">go to the a.html</a><button οnclick="history.back()">back</button>//when you back , then you could be forward.<button onclick = "history.forward()">forward</button>//go(+- 1)<button οnclick="history.go(-1)">back use 'history.go(-1)'</button>conclusion above : the browser's next and last button could be done by use these*///point3 date in jsvar dt =newDate();//year now dt.getFullYear();//Year Now(2019) - 1900 = dt.getYear()dt.getYear();//0 - 11 mm in foregin , so add 1dt.getMonth();//alert(dt.getMonth() + 1);//today is a day in this week , a numberdt.getDay();alert(dt.getDay());//day in a monthdt.getDate();alert(dt.getDate());//hour in a day dt.getHours();</script></head><body><input type ="text" id ="txtbox"/><input type ="button" value ="a surprise while you click me" onclick="start()"/><br /><button onclick="delayer()">i am a ad 2s later</button><br /><button onclick ="window.reload()">refresh me1</button><button onclick ="window.refresh()">refresh me2</button><!--js to skip a newwindow--><button onclick="location.href = '../a.html'">skip</button><script>//dom document object model 文檔對象模型，從前到后用js獲取html頁面元素,定位元素，操作元素/*頁面加載事件。* window.onload = function(){var r = document.getElementById("btn");alert(r);}*/var r = document.getElementById("btn");alert(r);//null 有先后順序，如果放在btn后面就可。functiongetClass(){//返回一個偽集合svar list = document.getElementsByClassName("a");for(var i =0; i < list.length; i++){alert(list[i].innerHTML +" "+"html標簽不會解析 "+ list[i].innerText +" 純文本");}}functiongetTagName(){//把list 看作樹節點var list = document.getElementById("ul1");//lis 就是樹節點下 通過 li 標簽得到這些元素 var lis = list.getElementsByTagName("li");for(var i =0; i < lis.length ; i++){alert(lis[i].innerText);}}functiongetName(){// object nodelistvar list = document.getElementsByName("TXT_1");alert(list.value);}</script><button onclick ="" id ="btn">hello</button><ul id ="ul1"><li>.net</li><li>java</li><li>python</li></ul><ul id ="ul2"><li>js</li><li>go</li><li>html5</li></ul><ul><li class="a">a</li><li class="a">a</li><li class="a">a</li></ul><br /><input type="text" name="TXT_T1" value="AB"/><input type="text" name="TXT_T1" value="CD"/><br /><button onclick="getClass()">get element by class</button><button onclick="getTagName()">get element by tagname</button><button onclick="getName()">get element by name</button><img src ="logo.gif" id ="jpg1"/><img src ="qie.jpg" id ="jpg2"/><input type ="button" onclick="visible1()" value ="占位顯示"/><input type ="button" onclick="hidden1()" value ="占位隱藏"/><input type ="button" onclick="hide()" value ="占位不顯示"/><input type ="button" onclick="dispaly()" value ="占位不隱藏"/><input type ="button" onclick="displayShow()" value ="顯示塊"/><script>//圖片的隱藏與顯示functionvisible1(){var j = document.getElementById("jpg1");j.style.visibility ="visible";}functionhidden1(){var h = document.getElementById("jpg1");h.style.visibility ="hidden";}functiondispaly(){var d = document.getElementById("jpg1");d.style.display ="inline";}functionhide(){var h = document.getElementById("jpg1");h.style.display ="none";}functiondisplayShow(){var h = document.getElementById("jpg1");h.style.display ="block";//顯示級。。。塊。會占一行。}</script></body></html>
