原聲js基礎筆記
原聲js基礎筆記
前端開發羣：歡迎加入。
<!DOCTYPE html> <html> <head> <title>設置一個元素是否可見</title> <meta charset="utf-8"> </head> <style type="text/css"> .tips{width:370px;background:#CCC;display:none;} </style> <script type="text/javascript"> //定義一個函數 function show_or_hide() { //經過id來獲取一個元素 var objl =document.getElementById("get_p"); // 這種是行內樣式的寫法,形如：<p style="display:none;"></p> if(objl.style.display == 'block') objl.style.display = 'none'; else objl.style.display = 'block'; } </script> <body> <!-- 添加點擊事件 --> <input type="button" value="隱藏/顯示" onclick="show_or_hide()" title="能夠點擊我一下"> <p id="get_p" class="tips" > 從前有座山，山上有座廟，廟裏有個帥哥寫代碼 </p> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>鼠標移入移出事件</title> <meta charset="utf-8"> </head> <style type="text/css"> #get_input{background:yellow;} </style> <script type="text/javascript"> function over_bg_color() { var obj = document.getElementById('get_input'); // 這種是行內樣式的寫法,形如：<p style="background:red;"></p> obj.style.background='red'; } function out_bg_color() { var obj = document.getElementById('get_input'); obj.style.background='yellow'; } </script> <body> <!-- 添加鼠標移入移出事件 --> <input id="get_input" type="button" value="隱藏/顯示"onmouseover="over_bg_color()" onmouseout="out_bg_color()" > </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>二級菜單</title> <meta charset="utf-8"> <style type="text/css"> #nav{height:50px;background:red;margin:50px auto 0px;} a { float:left;width:250px;line-height:50px; text-align:center;color:#FFF;text-decoration:none; } #detailed { width:250px;height:200px;background:red; position:relative;border-top:2px solid yellow; display:none;left:0px; } </style> <script type="text/javascript"> function show_detailed(index) { var obj = document.getElementById('detailed'); // 設置元素可見 obj.style.display='block'; var move_left = 250*index-250; move_left = move_left+"px";//將結果轉換成字符串 obj.style.left =move_left; } function hide_detailed() { var obj = document.getElementById('detailed'); obj.style.display='none'; } </script> </head> <body> <div id="nav"> <!-- 這種直接在行內爲元素添加事件不美觀，能夠寫在JS裏面 --> <a href="#" onmouseover="show_detailed(1)"onmouseout="hide_detailed()"> 首頁</a> <a href="#" onmouseover="show_detailed(2)"onmouseout="hide_detailed()">家電</a> <a href="#" onmouseover="show_detailed(3)"onmouseout="hide_detailed()">手機</a> <a href="#" onmouseover="show_detailed(4)"onmouseout="hide_detailed()">付款方式</a> <a href="#" onmouseover="show_detailed(5)"onmouseout="hide_detailed()">客服</a> </div> <div id="detailed"> <a href="#">一</a> <a href="#">二</a> <a href="#">三</a> <a href="#">四</a> </div> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>改變物體外觀</title> <meta charset="utf-8"> <style type="text/css"> body{padding:200px;} #change_box{width:300px;height:300px;background:#CCC;} </style> <script type="text/javascript"> function change_color(want_color) { var obj = document.getElementById('change_box'); obj.style.background = want_color; } function change_size(width_size,height_size) { var obj = document.getElementById('change_box'); obj.style.width = width_size+'px'; obj.style.height = height_size+'px'; } </script> </head> <body> <input type="button" value="變黃" onclick="change_color('yellow')"> <input type="button" value="變綠" onclick="change_color('green')"> <input type="button" value="變紅" onclick="change_color('red')"> <input type="button" value="變大" onclick="change_size(500,600)"> <input type="button" value="變小" onclick="change_size(100,200)"> <div id="change_box"></div> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>JS爲元素添加事件</title> <meta > <meta charset="utf-8"> </head> <body> <input id="btn1" type="button" value="按鈕" onclick="abc()" /> <script type="text/javascript"> // 下面這個獲取元素的代碼要寫在該目標 元素的下面 // 由於程序是從上到下執行的，否則的話會報錯 var obtn = document.getElementById('btn1'); function abc() { alert('這是一個彈窗');//能夠是單引號，也能夠是雙引號 } //obtn.onclick=abc;//這種是直接在JS裏面爲元素添加事件的寫法 //這裏函數不能加括號 </script> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>全選反選按鈕</title> <meta charset="utf-8"> <style type="text/css"> body{padding:150px;background:#CCC;} </style> </head> <body> <input type="button" id="btn_all" value="全選"></input> <input type="button" id="btn_reversed" value="反選"></input> <input type="button" id="btn_no" value="都不選"></input> <div id="ware"> <input type="checkbox" ></input><input type="checkbox" ></input> <input type="checkbox" ></input><input type="checkbox" ></input> <input type="checkbox" ></input><input type="checkbox" ></input> </div> </body> <script type="text/javascript"> function choose_all() { var obj = document.getElementById('ware'); //從一個目標元素中再獲取元素 //下面是經過html元素名字來獲取，結果是數組 var ch_b = obj.getElementsByTagName('input'); for(var i=0; i <= ch_b.length; i++) //下面的語句相似於：<input type="checkbox" checked="true"></input> ch_b[i].checked = true; } function choose_no() { var obj = document.getElementById('ware'); var ch_b = obj.getElementsByTagName('input'); for(var i=0; i <= ch_b.length; i++) ch_b[i].checked = false; } function choose_reversed() { var obj = document.getElementById('ware'); var ch_b = obj.getElementsByTagName('input'); for(var i=0; i <= ch_b.length; i++) ch_b[i].checked = ( ch_b[i].checked == true )? false:true; } //我並無直接document.getElementById('');這樣獲取元素 //按理說要先獲取元素，再來操做，否則是不行的， //我也不知道爲何個人這段代碼卻能夠 btn_all.onclick = choose_all; btn_no.onclick = choose_no; btn_reversed.onclick = choose_reversed; </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>選項卡</title> <meta charset="utf-8"> <style type="text/css"> body{padding:150px;} #xuan_xiang_ka{width:208px;height:350px;} .title{height:50px;} .title input{height:50px;width:50px;float:left;border:1px solid #CCC;margin-left:2px;} .active{background:#5CB85C;} #content_box{background:yellow;} #content_box div{display:none;}/*設置子元素不可見*/ </style> </head> <body> <div id="xuan_xiang_ka"> <div class="title"> <input class="active" type="button" value="新聞1"></input> <input type="button" value="新聞2"></input> <input type="button" value="新聞3"></input> <input type="button" value="新聞4"></input> </div> <div id="content_box" > <div style="display:block;"> 從前有座山1 </div> <div> 從前有座山2 </div> <div> 從前有座山3 </div> <div> 從前有座山4 </div> </div> </div> </body> <script type="text/javascript"> var an_niu = document.getElementsByTagName('input'); var temp =document.getElementById('content_box'); var wen_zhang =temp.getElementsByTagName('div'); for(var i=0; i < an_niu.length; i++) { an_niu[i].index = i;//爲每一個按鈕添加序號 an_niu[i].onclick = function () { for(var j=0; j < an_niu.length; j++) { an_niu[j].className = '';//清除類 wen_zhang[j].style.display = 'none'; } this.className = 'active';//當前按鈕添加活動類 wen_zhang[this.index].style.display ='block';//當前選項卡可見 //思路：在點擊一個選項卡以前，把其餘的選項卡都影藏，並清除類 //以後再爲當前的選項卡添加屬性 } } </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>innerHTML練習</title> <meta charset="utf-8"> <style type="text/css"> body{padding:50px;} div{border:1px solid red;width:260px;height:200px;padding:20px;} </style> </head> <body> <input id="text1" type="text"></input> <input id="btn1" type="button" value="設置文字"></input> <div id="div1"> 從前有座山 </div> </body> <script type="text/javascript"> var btn1 = document.getElementById('btn1'); var text1 = document.getElementById('text1'); var div1 = document.getElementById('div1'); btn1.onclick = function () { // 讓div裏面的文字是text裏面的文字 div1.innerHTML = text1.value; } </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>月曆選項卡</title> <meta charset="utf-8"> <style type="text/css"> *{margin:0px;padding:0px;} .ware{background:yellow;padding:15px 0px 15px 15px;width:285px;margin:100px auto;overflow:hidden;} .month{overflow:hidden;} span{float:left;width:80px;line-height:80px;text-align:center;font-size:16px;color:#FFF;font-weight:bold; margin-right:15px;margin-bottom:15px; background:#999;} .tips{background:red;clear:both;width:240px;padding:15px;font-weight:bold;color:#FFF;} .active{background:#FFF;color:black;} </style> </head> <body> <div class="ware"> <div class="month"> <span class="active">1</span><span>2</span><span>3</span> <span>4</span><span>5</span><span>6</span> <span>7</span><span>8</span><span>9</span> <span>10</span><span>11</span><span>12</span> </div> <div id="setText" class="tips"> </div> </div> </body> <script type="text/javascript"> var obj_month = document.getElementsByTagName('span'); var objTips = document.getElementById('setText'); var arr =[ '這個月有元旦', '咱們一塊兒過年吧', '這個月有38婦女節', '4月分有什麼節日呢？', '哈哈勞動節快到了', '惋惜兒童節不屬於咱們', '貌似有建黨節吧', '這個月有建軍節吧麼麼噠', '教師節到了，給老師一份祝福吧', '一塊兒看閱兵式吧', '光棍節到了，有木有很傷心～', '聖誕節不是中國的～' ]; // 默認顯示第一個月 objTips.innerHTML = '<p>1月活動'+'</p>'+arr[0]; for(var i=0; i < obj_month.length; i++) { obj_month[i].index = i; obj_month[i].onmousemove = function () { for(var j=0; j < obj_month.length; j++) obj_month[j].className = ''; this.className = 'active'; objTips.innerHTML = '<p>'+(this.index+1)+'月活動'+'</p>'+arr[this.index]; } } </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>數組遍歷</title> <meta charset="utf-8"> </head> <body> </body> <script type="text/javascript"> var colorS =['yellow','blue','green','pink','black']; for( var x in colorS)//x 是下標 { alert(colorS[x]); //alert(x); } </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>屬性用變量代替</title> <meta charset="utf-8"> <style type="text/css"> body{padding:400px; padding-top:200px;} #box{width:300px;height:300px;background:yellow;} </style> </head> <body> <div id="box"></div> <input type="button" value="點擊我一下下～" id="btn"></input> </body> <script type="text/javascript"> var value = 'background'; var oBtn = document.getElementById('btn'); var oBox = document.getElementById('box'); oBtn.onclick = function () { oBox.style[value] = 'red'; //等同於 oBox.style.background = 'red'; } </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>根據參數個數實現相應功能</title> <meta charset="utf-8"> </head> <body> <div id="J_box" style="width:300px;height:240px;background:#CCC;margin:100px;"></div> </body> <script type="text/javascript"> var oBox = document.getElementById('J_box'); function css () { if(arguments.length == 2) alert(arguments[0].style[arguments[1]]); if(arguments.length == 3) arguments[0].style[arguments[1]] = arguments[2]; } css(oBox,'width','800px'); </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>獲取非行間樣式</title> <meta charset="utf-8"> <style type="text/css"> #J_box{width:300px;height:240px;background:#CCC;margin:100px;} </style> </head> <body> <div id="J_box"></div> </body> <script type="text/javascript"> var oBox = document.getElementById('J_box'); if(oBox.currentStyle) alert(oBox.currentStyle.width);//IE else alert(getComputedStyle(oBox,false).width);//FF //採用變量的寫法 alert(getComputedStyle(oBox , false)['width']); </script> </html> <script type="text/javascript"> // 函數封裝 // function getStyle(obj,name) // { // if( obj.currentStyle) // return obj.currentStyle[name];//obj.currentStyle.width; // else // return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width; // } </script> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>數組的基本操做</title> <meta charset="utf-8"> </head> <body> </body> <script type="text/javascript"> var arr = [1,3,5,7,9,10]; var add = [100,200,300,400,500]; //arr.push(6);//尾部追加一個元素 //arr.pop();//尾部刪除一個元素 //arr.unshift('lijun');//頭部追加元素 //arr.shift();//頭部刪除一個 //arr.splice(3,2)//刪除元素 起點 長度 從0開始算 //arr.splice(3,0);//從下標3開始，依次刪除0個元素 //arr.splice(3,2,6,7);//從下標3開始，依次刪除2個，而後添加6,7元素 //arr.concat(add);//兩個字符串鏈接，可是兩個數組並無變 //alert(arr.join('***'));//記得加引號，相鄰數組元素間添加分隔符,不會真的改變數組 /*var temp = ['aaa','xxx','dddd','ssss','eeee','bbbbb']; alert(temp.sort());*/ //數組排序，只能排字符串 /*var temp =[6,7,45,8,6,10,7,8,45,1,14,89,39]; alert(temp.sort( function(num1,num2) { return num1 - num2; } ));*/ //數組排序，排數字 // 數組排序的時候要根據實際狀況改動，例如傳遞的是li或者其餘元素， // 要把最後在比較的是數值比較 alert(arr); </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>定時器的使用</title> <meta charset="utf-8"> </head> <body> <input id="kai" type="button" value="開啓"></input> <input id="guan" type="button" value="關閉"></input> </body> <script type="text/javascript"> //setInterval 間隔 //setTimeout 延時 var okai = document.getElementById('kai'); var oguan = document.getElementById('guan'); function say() { alert('您好~'); } okai.onclick = function () { temp = setInterval(say,2500);//函數只寫名字不加括號，變量也是全局的，否則等下下面不能關閉 } oguan.onclick = function() { clearInterval(temp);//這個被關閉的變量是全局的，不要定義成局部的。 } </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>數字時鐘，須要相關圖片輔助</title> <meta charset="utf-8"> <style type="text/css"> body{background:#555;} .timeBox{width:300px;margin:200px auto;} span{font-size: 50px;} </style> </head> <body> <div class="timeBox"> <img src="./images/0.png"><img src="./images/0.png"> <span>:</span> <img src="./images/0.png"><img src="./images/0.png"> <span>:</span> <img src="./images/0.png"><img src="./images/0.png"> </div> </body> <script type="text/javascript"> function setNumberToStr(number) { // 把數字弄成兩位數的，並轉換成字符串 if(number < 10) return '0' + number; else return '' + number; } // 獲取系統時間 function realTime() { var oDate = new Date(); var hour = oDate.getHours();//獲取小時 var minute = oDate.getMinutes();//獲取分鐘 var second = oDate.getSeconds();//獲取秒 return setNumberToStr(hour) + setNumberToStr(minute) + setNumberToStr(second); } function setTime() { var otime = document.getElementsByTagName('img'); var howTime = realTime();//當前時間 轉換成字符串格式後存入數組 for(var i=0; i < otime.length; i++) otime[i].src = './images/'+howTime[i]+'.png'; } setTime();//這個是爲了解決刷新的時候所有顯示０的狀況，也能夠把一秒設置更小 setInterval(setTime,1000); </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>字符串查找、系統時間</title> <meta charset="utf-8"> </head> <body> </body> <script type="text/javascript"> var times = "我是一個大帥哥"; alert(times.charAt(0));//用來查找字符串中某個座標中的內容 // 不能是數組，只能是字符串 var odate = new Date(); //alert(odate.getFullYear()); //alert(odate.getMonth()+1);//月份少1 // alert(odate.getDate());//星期幾 //alert(odate.getHours());//獲取小時 //alert(odate.getMinutes());//獲取分鐘 //alert(odate.getSeconds());//獲取秒 //alert(odate.getDay());//週日是０ </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>孩子節點</title> <meta charset="utf-8"> <script type="text/javascript"> window.onload = function() { var oUl = document.getElementById('ul1'); //alert(oUl.childNodes.length);//節點的個數，會包括文本節點。 //for(var i=0; i < oUl.childNodes.length; i++) //alert(oUl.childNodes[i].nodeType);//節點的類型 文本節點->3 元素節點->1 //alert(oUl.children.length);節點的個數，不包括文本節點。 for(var i=0; i < oUl.children.length; i++) oUl.children[i].style.background = 'red'; } </script> </head> <body> <ul id="ul1"> <li></li> <li></li> </ul> </body> </html> <!-- DOM節點 childNodes children nodeType parentNode offsetParent --> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>父節點</title> <meta charset="utf-8"> <style type="text/css"> body{padding-left:400px;padding-top:200px;} a{margin-left:100px;} </style> <script type="text/javascript"> window.onload = function() { //var oUl = document.getElementById('ul1'); //alert(oUl.children[i].parentNode);//錯誤的寫法////////////////////////////// //var oSoon = document.getElementById('soon'); //alert(oSoon.parentNode);//獲取某個元素的父節點 var oA = document.getElementsByTagName('a'); for(var i=0; i < oA.length; i++) { oA[i].onclick = function() { this.parentNode.style.display = 'none'; //a的父親就是li，讓li隱藏 } } } </script> </head> <body> <ul id="ul1"> <li>從前有座山 <a href="#">隱藏</a> </li> <li>山上有座廟 <a href="#">隱藏</a> </li> <li>廟裏有個老和尚 <a href="#">隱藏</a> </li> <li>老和尚對着小和尚說 <a href="#">隱藏</a> </li> <li>咱們這裏有座山 <a href="#">隱藏</a> </li> <li>裏面有個老和尚 <a href="#">隱藏</a> </li> </ul> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>父級元素</title> <meta charset="utf-8"> <script type="text/javascript"> window.onload = function() { // 經過html標籤來獲取元素，返回的是數組， //能夠在後面加座標指定要獲取某個元素 var demo1 = document.getElementsByTagName('ul'); var demo2 = document.getElementsByTagName('li'); alert(demo2[2].offsetParent);//父級元素（有定位屬性的父級元素） } </script> </head> <body> <ul> <li>從前有座山</li> <li>山上有座廟</li> <li>廟裏有個老和尚</li> <li>老和尚對着小和尚說</li> <li>咱們這裏有座山</li> <li>裏面有個老和尚</li> </ul> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>孩子節點</title> <meta charset="utf-8"> <style type="text/css"> </style> <script type="text/javascript"> window.onload = function() { // 這是比較便捷的寫法，讓某些類擁有一些樣式 // var oLi = document.getElementsByTagName('li'); // for(var i=0; i < oLi.length; i++) // if(oLi[i].className == 'bgRed') // oLi[i].style.background = 'red'; var oul = document.getElementsByTagName('ul')[0]; for(var i=0; i < oul.childNodes.length; i++) if(oul.childNodes[i].className == 'bgRed') oul.childNodes[i].style.background = 'red'; } </script> </head> <body> <ul> <li class="bgRed">從前有座山</li> <li>山上有座廟</li> <li>廟裏有個老和尚</li> <li class="bgRed">老和尚對着小和尚說 </li> <li>咱們這裏有座山</li> <li class="bgRed">裏面有個老和尚</li> </ul> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>代碼塊封裝思想</title> <meta charset="utf-8"> <script type="text/javascript"> function getByClass(oParent,oClass) { var oReturn = [];//存放結果 // 獲取該元素下面的全部元素 var oElem = oParent.getElementsByTagName('*'); for(var i=0; i < oElem.length; i++) if(oElem[i].className == oClass) oReturn.push(oElem[i]); return oReturn; } window.onload = function() { var oul = document.getElementsByTagName('ul')[0]; //0蒐集的結果都放在這裏 var oChange = getByClass(oul,'bgRed'); for(var i=0; i <oChange.length; i++) oChange[i].style.background = 'red'; } </script> </head> <body> <ul> <li class="bgRed">從前有座山</li> <li>山上有座廟</li> <li>廟裏有個老和尚</li> <li class="bgRed">老和尚對着小和尚說 </li> <li>咱們這裏有座山</li> <li class="bgRed">裏面有個老和尚</li> </ul> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>DOM 方式操做元素屬性</title> <meta charset="utf-8"> <script type="text/javascript"> window.onload = function() { var oa =document.getElementsByTagName('a')[0]; // 獲取：getAttribute(名稱) // 設置：setAttribute(名稱，值) // 刪除： removeAttribute(名稱) oa.setAttribute('title','哈哈~'); } </script> </head> <body> <a href="#">我很帥</a> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>添加節點</title> <meta charset=" utf-8"> <script type="text/javascript"> window.onload = function() { var oBtn = document.getElementsByTagName('input')[1]; var oTxt = document.getElementsByTagName('input')[0]; var oUl = document.getElementsByTagName('ul')[0]; oBtn.onclick = function() { var oLi = document.createElement('li');//建立一個元素 var inBeforeLi = document.getElementsByTagName('li')[0]; if(inBeforeLi) oUl.insertBefore(oLi,inBeforeLi)//在某個元素以前追加 else oUl.appendChild(oLi);//末尾追加 oLi.innerHTML = oTxt.value; } } </script> </head> <body> <input type="text"></input> <input type="button" value="建立li"></input> <ul> </ul> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>刪除節點</title> <meta charset=" utf-8"> <script type="text/javascript"> window.onload = function() { var oA = document.getElementsByTagName('a'); var oUl = document.getElementsByTagName('ul')[0]; for(var i=0; i < oA.length; i++) oA[i].onclick = function() { oUl.removeChild(this.parentNode); } } </script> </head> <body> <ul> <li>111<a href="#">刪除</a></li> <li>222<a href="#">刪除</a></li> <li>333<a href="#">刪除</a></li> <li>444<a href="#">刪除</a></li> <li>555<a href="#">刪除</a></li> <li>666<a href="#">刪除</a></li> <li>777<a href="#">刪除</a></li> </ul> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>節點碎片</title> <meta charset=" utf-8"> <script type="text/javascript"> window.onload = function() { // 建立一個節點碎片 var temp = document.createDocumentFragment(); for(var i=0; i<25; i++) { var oLi = document.createElement('li'); // 向節點碎片中添加孩子節點 temp.appendChild(oLi); } // 直接給要添加節點的元素添加 已經存在的碎片 document.getElementsByTagName('ul')[0].appendChild(temp); } </script> </head> <body> <ul> </ul> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>表格基本屬性</title> <meta charset=" utf-8"> <script type="text/javascript"> window.onload = function() { var oTab = document.getElementsByTagName('table')[0]; // alert(oTab.tBodies[0].rows[0].cells[1].innerHTML); var oldColor = '';//記錄原來的顏色 // 表格隔行換色，鼠標移入換色，移出換回原來的顏色 for(var i=0; i < oTab.tBodies[0].rows.length; i++) { if( i % 2 )//奇偶行數 oTab.tBodies[0].rows[i].style.background = '#CCC'; else oTab.tBodies[0].rows[i].style.background = '#555'; oTab.tBodies[0].rows[i].onmouseover = function() { oldColor = this.style.background; this.style.background = 'green'; } oTab.tBodies[0].rows[i].onmouseout = function() { this.style.background = oldColor; } } } </script> </head> <body> <table border="1px" width="500px"> <thead> <td>ID</td ><td>姓名</td><td>年齡</td> </thead> <tbody> <tr> <td>1</td><td>李俊</td><td>18</td> </tr> <tr> <td>2</td><td>李白</td><td>96</td> </tr> <tr> <td>3</td><td>小明</td><td>17</td> </tr> <tr> <td>4</td><td>李俊</td><td>18</td> </tr> <tr> <td>5</td> <td>李白</td><td>96</td> </tr> <tr> <td>6</td><td>小明</td><td>17</td> </tr> </tbody> </table> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>表格自動增長行數</title> <meta charset=" utf-8"> <script type="text/javascript"> window.onload = function() { // 直接讀取某行某列的值 // alert(oTab.tBodies[0].rows[0].cells[1].innerHTML); var oTab = document.getElementsByTagName('table')[0]; var oname = document.getElementsByTagName('input')[0]; var oage = document.getElementsByTagName('input')[1]; var obtn = document.getElementsByTagName('input')[2]; var id = oTab.tBodies[0].rows.length; obtn.onclick = function() { // 建立1個行 var oTr = document.createElement('tr'); // 建立第1個列 var oTd_1 = document.createElement('td'); oTd_1.innerHTML = ++id; // 添加到行裏面 oTr.appendChild(oTd_1); //建立第2個列 var oTd_2 = document.createElement('td'); oTd_2.innerHTML = oname.value; oTr.appendChild(oTd_2); //建立第3個列 var oTd_3 = document.createElement('td'); oTd_3.innerHTML = oage.value; oTr.appendChild(oTd_3); // 添加一行行 oTab.appendChild(oTr); } } </script> </head> <body style="padding-left:400px;padding-top:100px;"> 姓名：<input type="text"></input> 年齡：<input type="text"></input> <input type="button" value="添加"></input> <table border="1px" width="500px"> <thead> <td>ID</td ><td>姓名</td><td>年齡</td> </thead> <tbody> <tr> <td>1</td><td>李俊</td><td>18</td> </tr> <tr> <td>2</td><td>李白</td><td>96</td> </tr> <tr> <td>3</td><td>小明</td><td>17</td> </tr> </tbody> </table> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>表格自動刪除單元格</title> <meta charset=" utf-8"> <script type="text/javascript"> window.onload = function() { var oTab = document.getElementsByTagName('table')[0]; // 這個註釋是在爲表格添加行的時候，添加刪除操做單元格的時候的代碼 // 貌似經過JS添加的單元格並不會有點擊事件 // var oTd_4 = document.createElement('td'); // oTd_4.innerHTML = '<a href="#">刪除</a>'; // oTr.appendChild(oTd_4); // oTab.appendChild(oTr); var oA = oTab.getElementsByTagName('a'); for(var i=0; i < oA.length; i++) { oA[i].onclick = function() { oTab.tBodies[0].removeChild(this.parentNode.parentNode); } } } </script> </head> <body style="padding-left:400px;padding-top:100px;"> <table border="1px" width="500px"> <thead> <td>ID</td ><td>姓名</td><td>年齡</td><td>編輯</td> </thead> <tbody> <tr> <td>1</td><td>李俊</td><td>18</td><td><a href="#">刪除</a></td> </tr> <tr> <td>2</td><td>李白</td><td>96</td><td><a href="#">刪除</a></td> </tr> <tr> <td>3</td><td>小明</td><td>17</td><td><a href="#">刪除</a></td> </tr> </tbody> </table> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>表格搜索</title> <meta charset=" utf-8"> <script type="text/javascript"> window.onload = function() { var oTab = document.getElementsByTagName('table')[0]; var obtn = document.getElementsByTagName('input')[1]; var oname = document.getElementsByTagName('input')[0]; obtn.onclick = function() { for(var i=0; i< oTab.tBodies[0].rows.length; i++) { // 輸入要搜索的名字，必須徹底同樣才能匹配 if(oname.value == oTab.tBodies[0].rows[i].cells[1].innerHTML) oTab.tBodies[0].rows[i].style.background = 'yellow'; else oTab.tBodies[0].rows[i].style.background = ''; } } //忽略大小寫搜索 // obtn.onclick = function() // { // for(var i=0; i< oTab.tBodies[0].rows.length; i++) // { // var sTxt = oname.value; // var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML; // if( sTxt.toLowerCase() == sTab.toLowerCase() ) // oTab.tBodies[0].rows[i].style.background = 'yellow'; // else // oTab.tBodies[0].rows[i].style.background = ''; // } // } // 單個關鍵字模糊搜索 // obtn.onclick = function() // { // for(var i=0; i < oTab.tBodies[0].rows.length; i++) // { // var oTabName = oTab.tBodies[0].rows[i].cells[1].innerHTML; // if( oTabName.search(oname.value) != -1) // oTab.tBodies[0].rows[i].style.background = 'blue'; // else // oTab.tBodies[0].rows[i].style.background = 'red'; // } // } // 多關鍵字模糊搜索 // obtn.onclick = function() // { // for(var i=0; i < oTab.tBodies[0].rows.length; i++) // { // var oTabName = oTab.tBodies[0].rows[i].cells[1].innerHTML; // var arr = oname.value.split(' ');//用空格把字符串分割 // oTab.tBodies[0].rows[i].style.background = '';//不要寫在下面的if else中 // for(var j=0; j < arr.length; j++) // { // if( oTabName.search(arr[j]) != -1 ) // oTab.tBodies[0].rows[i].style.background = 'blue'; // } // } // } } </script> </head> <body style="padding-left:400px;padding-top:100px;"> 姓名：<input type="text"></input> <input type="button" value="搜索"></input> <table border="1px" width="500px"> <thead> <td>ID</td ><td>姓名</td><td>年齡</td> </thead> <tbody> <tr> <td>1</td><td>李俊</td><td>18</td> </tr> <tr> <td>2</td><td>李白</td><td>96</td> </tr> <tr> <td>3</td><td>小明</td><td>17</td> </tr> </tbody> </table> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>字符串查找</title> <meta charset=" utf-8"> <script type="text/javascript"> var str = 'asdfghjkl'; alert(str.search('kl'));//查找這個k在字符串中的第幾個位置。7 沒有-1 </script> </head> <body> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>添加孩子節點，會先刪除原來所在的位置</title> <meta charset=" utf-8"> <style type="text/css"> ul{background:yellow;margin-bottom:20px;} </style> <script type="text/javascript"> window.onload = function() { var oBtn = document.getElementsByTagName('input')[0]; var oUl1 = document.getElementsByTagName('ul')[0]; var oUl2 = document.getElementsByTagName('ul')[1]; oBtn.onclick = function() { //var temp = oUl1.getElementsByTagName('li')[0]; var temp = oUl1.children[0]; oUl2.appendChild(temp);//這個是在一個元素添加孩子節點。 //oUl1.removeChild(temp);//這步驟能夠省略，上面那個代碼會先刪除再添加。 } } </script> </head> <body style="padding-left:400px;padding-top:100px;"> <ul> <li>1</li><li>2</li><li>3</li> <li>4</li><li>5</li><li>6</li> <li>7</li><li>8</li><li>9</li> </ul> <ul></ul> <input type="button" value="移動"></input> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>列表排序</title> <meta charset=" utf-8"> <style type="text/css"> ul{background:yellow;margin-bottom:20px;} </style> <script type="text/javascript"> window.onload = function() { var oBtn = document.getElementsByTagName('input')[0]; var oLi = document.getElementsByTagName('ul')[0].children; var arr = []; oBtn.onclick = function() { for(var i=0; i < oLi.length; i++) arr[i] = oLi[i]; //alert(arr[0] === oLi[0]); arr.sort(function(li1,li2){return parseInt(li1.innerHTML) - parseInt(li2.innerHTML);}); for(var i=0; i < arr.length; i++) document.getElementsByTagName('ul')[0].appendChild(arr[i]); // 本來覺得排序好後列表的長度是原來的兩倍 // 可是不是，估計是添加孩子節點的時候，就把原來的節點給刪除了。 } } </script> </head> <body style="padding-left:400px;padding-top:100px;"> <input type="button" value="排序"></input> <ul> <li>99</li> <li>48</li> <li>25</li> <li>97</li> <li>3</li> <li>38</li> <li>26</li> <li>49</li> </ul> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>表格排序</title> <meta charset=" utf-8"> <script type="text/javascript"> window.onload = function() { var oBtn = document.getElementsByTagName('input')[0]; var oTab = document.getElementsByTagName('table')[0]; oBtn.onclick = function () { var arr = []; for(var i=0; i< oTab.tBodies[0].rows.length; i++) arr[i] = oTab.tBodies[0].rows[i];//把表格的每行存入一個數組 arr.sort(function (tr1,tr2) {return parseInt(tr1.cells[0].innerHTML) - parseInt(tr2.cells[0].innerHTML);}); for(var i=0; i < arr.length; i++) oTab.tBodies[0].appendChild(arr[i]);//把排序好的數組添加的表格中 } } </script> </head> <body style="padding-left:400px;padding-top:100px;"> <input type="button" value="排序"></input> <table border="1px" width="500px"> <thead> <td>ID</td><td>姓名</td><td>年齡</td> </thead> <tbody> <tr> <td>1</td><td>李俊</td><td>18</td> </tr> <tr> <td>7</td><td>張三</td><td>16</td> </tr> <tr> <td>3</td><td>王五</td><td>25</td> </tr> <tr> <td>6</td><td>馬雲</td><td>17</td> </tr> <tr> <td>2</td><td>小三</td><td>9</td> </tr> <tr> <td>5</td><td>小芳</td><td>36</td> </tr> <tr> <td>4</td><td>君君</td><td>14</td> </tr> </tbody> </table> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>定時器的使用</title> <meta charset=" utf-8"> <style type="text/css"> div{width:200px;height:150px;background:yellow;position:absolute;} } </style> <script type="text/javascript"> window.onload = function() { function Move() { document.getElementsByTagName('div')[0].style.left = document.getElementsByTagName('div')[0].offsetLeft + 10 + 'px'; } setInterval(Move,30); } </script> </head> <body> <div></div> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>物體的運動</title> <meta charset=" utf-8"> <style type="text/css"> body{margin:0px;padding:0px;} div{width:200px;height:150px;background:yellow;position:absolute;} } </style> <script type="text/javascript"> window.onload = function() { var timer = null; var oBtn = document.getElementsByTagName('input')[0]; oBtn.onclick = function () { clearInterval(timer);//保證只有一個定時器被打開 timer = setInterval(Move,30); } function Move() { var oDiv = document.getElementsByTagName('div')[0]; if(oDiv.offsetLeft == 600)//這兩個語句不能調換順序，否則會有誤差 clearInterval(timer); else oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; //如今是由於有if，兩個語句只會執行一個，能夠換順序 } //在開始運動時，關閉已經存在的定時器 //把運動和中止隔開（if else） } </script> </head> <body> <input type="button" value="動起來~"></input> <div></div> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>無縫滾動 -By小小俊</title> <meta charset="utf-8"> <style type="text/css"> *{margin:0px;padding:0px;} button{margin-top:180px;margin-left:400px;} div{margin:20px auto;width:730px;height:233px; position:relative;background:yellow; box-shadow: 20px 20px 3px #CCC;overflow:hidden; border:2px solid #CCC;border-radius:25px; } div ul{background:red;width:1480px;height:233px;position:absolute; } div ul li{float:left;list-style:none;margin-right:10px;} </style> <script type="text/javascript"> var speed = 0; var timer = null; window.onload = function() { var leftBtn = document.getElementsByTagName('button')[0];//左邊的按鈕 var rightBtn = document.getElementsByTagName('button')[1];//右邊的按鈕 var oUl = document.getElementsByTagName('ul')[0];//裝圖片的容器 oUl.innerHTML = oUl.innerHTML + oUl.innerHTML; timer = setInterval(Move,30);//貌似點擊按鈕的時候這個定時器沒有被關閉，致使疊加 leftBtn.onclick = function(){speed = -5;startMove();} rightBtn.onclick = function(){speed = 5;startMove();} oUl.onmouseover = function(){clearInterval(timer);} oUl.onmouseout = function(){timer = setInterval(Move,30);} function Move() { oUl.style.left = oUl.offsetLeft + speed + 'px'; if( oUl.offsetLeft < -740)//往左邊滾動的時候 oUl.style.left = '0px'; else if( oUl.offsetLeft > 0)//往右邊滾動的時候 oUl.style.left = '-740px'; } function startMove() { clearInterval(timer);//避免定時器疊加 timer = setInterval(Move,30); } } </script> </head> <body> <button>點擊向左邊滾動、麼麼噠</button> <button style="margin-left:280px">點擊向右邊滾動、麼麼噠</button> <div> <ul> <li><img src="./1.jpg"></li> <li><img src="./2.jpg"></li> <li><img src="./3.jpg"></li> <li><img src="./4.jpg"></li> </ul> </div> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>分享按鈕</title> <meta charset=" utf-8"> <style type="text/css"> div{width:150px;height:200px;position:absolute;background:yellow;left:-150px;} span{width:20px;height:60px;line-height:20px;position:absolute;right:-20px; top:70px;background:pink;} </style> <script type="text/javascript"> var timer = null;var Speed = 0;var Target = 0;//定時器、速度、目標 window.onload = function() { var oDiv = document.getElementsByTagName('div')[0]; function move(target,speed) { clearInterval(timer); timer = setInterval(function(){ if(oDiv.offsetLeft == target) clearInterval(timer); else oDiv.style.left = oDiv.offsetLeft + speed + 'px'; },30); } oDiv.onmouseover = function () { move(0,5); // clearInterval(timer); // timer = setInterval(function(){ // if(oDiv.offsetLeft == 0) // clearInterval(timer); // else // oDiv.style.left = oDiv.offsetLeft + 5 + 'px'; // },30); } oDiv.onmouseout = function () { move(-150,-5); // clearInterval(timer); // timer = setInterval(function(){ // if(oDiv.offsetLeft == -150) // clearInterval(timer); // else // oDiv.style.left = oDiv.offsetLeft - 5 + 'px'; // },30); } } </script> </head> <body> <div> <span>分享到</span> </div> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>淡入淡出</title> <meta charset="utf-8"> <style type="text/css"> div{filter:alpha(opacity:10);opacity:0.1;width:300px;height:300px;background:red;} </style> <script type="text/javascript"> var timer = null; var alpha = 10; window.onload = function() { var oDiv = document.getElementsByTagName('div')[0]; oDiv.onmouseover = function() { move(100); } oDiv.onmouseout = function() { move(10); } function move(target) { clearInterval(timer); timer = setInterval(function(){ if(alpha < target) speed = 4; else speed = -4; if(alpha == target) clearInterval(timer); else alpha += speed; oDiv.style.filter = 'alpha(opacity:'+alpha+')'; oDiv.style.opacity = alpha/100; },30); } } </script> </head> <body> <div> <!-- <img src="./1.jpg"> --> </div> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>緩衝運動</title> <meta charset="utf-8"> <style type="text/css"> div{width:300px;height:300px;background:red;position:absolute;left:0px;} p{width:1px;height:500px;background:black;position:absolute;left:600px;} </style> <script type="text/javascript"> window.onload = function() { var timer = null; var oDiv = document.getElementsByTagName('div')[0]; oDiv.onclick = function() { clearInterval(timer); timer = setInterval(move,30); } function move() { // 速度和距離成正比 var speed = (600 - oDiv.offsetLeft) / 50; // 對速度進行取整，否則沒法到達目的距離 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); oDiv.style.left = oDiv.offsetLeft + speed + 'px'; document.title = oDiv.offsetLeft+','+speed; } } </script> </head> <body> <div></div> <p></p> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>第一個孩子節點</title> <meta charset="utf-8"> <script type="text/javascript"> window.onload = function() { var oUl =document.getElementsByTagName('ul')[0]; // 記得把若是調換順序 而後調試 if(oUl.firstElementChild) oUl.firstElementChild.style.background = 'red'; else oUl.firstChild.style.background = 'red'; } </script> </head> <body> <ul> <li>從前有座山</li> <li>山上有座廟</li> <li>廟裏有個老和尚</li> <li>老和尚對着小和尚說 </li> <li>咱們這裏有座山</li> <li>裏面有個老和尚</li> </ul> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>運動中止邊界問題</title> <meta charset="utf-8"> <style type="text/css"> body{margin:0;padding:0;} div{width:300px;height:300px;background:red;position:absolute;left:0px;} p{width:1px;height:500px;background:black;position:absolute;left:600px;} </style> <script type="text/javascript"> window.onload = function() { var timer = null; var oDiv = document.getElementsByTagName('div')[0]; oDiv.onclick = function() { clearInterval(timer); timer = setInterval(move,30); } function move() { if(oDiv.offsetLeft < 600) speed = 7; else if(oDiv.offsetLeft > 600) speed = -7; else speed = 0; // 勻速運動解決不能到達終點問題， // 由於距離有可能不是速度的整數倍， // 因此在快到的時候，就關閉定時器，而後直接把物體放在終點 // 緩衝運動不用考慮這個問題是由於對速度進行取整，能夠慢慢往前面蹭 if(Math.abs(600 - oDiv.offsetLeft) < 7) { clearInterval(timer); oDiv.style.left = 600 + 'px'; } else oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } } </script> </head> <body> <div></div> <p></p> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>對聯效果</title> <meta charset="utf-8"> <style type="text/css"> body{height:5000px;} div{width:100px;height:150px;background:red;position:absolute;right:0px;bottom:0px;} </style> <script type="text/javascript"> window.onscroll = function() { var oDiv = document.getElementsByTagName('div')[0]; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop + 'px'; } </script> </head> <body> <div></div> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>多物體運動(卡住現象)</title> <meta charset="utf-8"> <style type="text/css"> div{width:100px;height:50px;margin:10px 0;background:red;} </style> <script type="text/javascript"> var timer = null; window.onload = function() { oDiv = document.getElementsByTagName('div'); for(var i=0; i < oDiv.length; i++) { oDiv[i].onmouseover = function() { move(this,500); } oDiv[i].onmouseout = function() { move(this,100); } } } function move(obj,target) { clearInterval(timer); timer = setInterval(function(){ var speed = (target -obj.offsetWidth) / 5; speed = speed > 0 ? Math.ceil(speed):Math.floor(speed); if( obj.offsetWidth == target ) clearInterval(timer); else obj.style.width = obj.offsetWidth + speed + 'px'; },30); } </script> </head> <body> <div></div> <div></div> <div></div> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>多物體運動(解決卡住現象)</title> <meta charset="utf-8"> <style type="text/css"> div{width:100px;height:50px;margin:10px 0;background:red;} </style> <script type="text/javascript"> window.onload = function() { var oDiv = document.getElementsByTagName('div'); for(var i=0; i < oDiv.length; i++) { //每一個物體本身開一個定時器 //JS手動給對象添加屬性 oDiv[i].timer = null; oDiv[i].onmouseover = function() { move(this,500); } oDiv[i].onmouseout = function() { move(this,100); } } } function move(obj,target) { clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (target - obj.offsetWidth) / 5; speed = speed > 0 ? Math.ceil(speed):Math.floor(speed); if( obj.offsetWidth == target ) clearInterval(obj.timer); else obj.style.width = obj.offsetWidth + speed + 'px'; },30); } </script> </head> <body> <input type="text"/> <div></div> <div></div> <div></div> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>多物體漸變(屬性不能公有)</title> <meta charset="utf-8"> <style type="text/css"> div{width:200px;height:200px;background:red;filter:alpha(opacity:30);opacity:0.3;float:left;margin:20px;} </style> <script type="text/javascript"> window.onload = function() { //var timer = null;//這個變量不該該定義在changeColorLight函數裏面 //var light = 30;//這個變量不該該定義在changeColorLight函數裏面 //初始值應該和樣式表保持一致，否則會產生閃的效果 var oDiv = document.getElementsByTagName('div'); for(var i=0; i < oDiv.length; i++) { oDiv[i].timer = null;//貌似這個語句能夠不用寫 oDiv[i].light = 30;//這個不寫的話會有問題 oDiv[i].onmouseover = function() { changeColorLight(this,100); } oDiv[i].onmouseout = function() { changeColorLight(this,30); } } function changeColorLight(obj,target) { //var timer = null; //var light = 0; clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (target - obj.light) / 10; speed = speed > 0 ? Math.ceil(speed):Math.floor(speed); if(obj.light == target) clearInterval(obj.timer); else { obj.light += speed; obj.style.filter = 'alpha(opacity:'+obj.light+')'; obj.style.opacity = obj.light / 100; } },30); } } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>offset問題</title> <meta charset="utf-8"> <style type="text/css"> div{width:200px;height:200px;background:yellow;float:left;margin:20px;border:1px solid red;} </style> <script type="text/javascript"> setInterval(function(){ //一開始有考慮到下面這個語句爲何不用寫在onload事件中 var oDiv = document.getElementsByTagName('div')[0]; //alert(oDiv.offsetWidth); //由於width設置後，還要加上邊框，因此也就是+2-1 //所以物體不是變窄，而是不斷的變寬 oDiv.style.width = oDiv.offsetWidth -1 + 'px'; },30); </script> </head> <body> <div></div> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>offset問題（修復）</title> <meta charset="utf-8"> <style type="text/css"> div{width:200px;height:200px;background:yellow;float:left;margin:20px;border:1px solid red;} </style> <script type="text/javascript"> function getStyle(obj,name) { if( obj.currentStyle ) return obj.currentStyle[name];//obj.currentStyle.width else return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width } setInterval(function(){ var oDiv = document.getElementsByTagName('div')[0]; //oDiv.style.width = oDiv.offsetWidth - 1 + 'px'; oDiv.style.width = parseInt( getStyle(oDiv,'width') ) - 1 + 'px'; },30); </script> </head> <body> <div></div> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>多物體運動框架（不能實現漸變）</title> <meta charset="utf-8"> <style type="text/css"> div{width:200px;height:200px;background:yellow;float:left;margin:20px;border:1px solid red;} </style> <script type="text/javascript"> window.onload = function() { var oDiv = document.getElementsByTagName('div')[0]; oDiv.onmouseover = function() { startMove(oDiv,'fontSize',50); } oDiv.onmouseout = function() { startMove(oDiv,'fontSize',12); } } function getStyle(obj,name) { if( obj.currentStyle ) return obj.currentStyle[name];//obj.currentStyle.width else return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width } function startMove(obj,name,target) { clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = ( target - parseInt( getStyle(obj,name) ) ) / 10; speed = speed > 0 ? Math.ceil(speed):Math.floor(speed); if( parseInt( getStyle(obj,name) ) == target ) clearInterval( obj.timer ); else obj.style[name] = parseInt( getStyle(obj,name) ) + speed + 'px'; ; },30); } </script> </head> <body> <div>從前有一座山</div> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>多物體運動框架（實現漸變）</title> <meta charset="utf-8"> <style type="text/css"> div{width:200px;height:200px;background:yellow;float:left;margin:20px;border:1px solid red;filter:alpha(opacity:30);opacity:0.3;} </style> <script type="text/javascript"> window.onload = function() { var oDiv = document.getElementsByTagName('div')[0]; oDiv.onmouseover = function() { startMove(oDiv,'opacity',100); } oDiv.onmouseout = function() { startMove(oDiv,'opacity',30); } } function getStyle(obj,name) { if( obj.currentStyle ) return obj.currentStyle[name];//obj.currentStyle.width else return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width } function startMove(obj,name,target) { clearInterval(obj.timer); obj.timer = setInterval(function(){ if( name == 'opacity') var status = parseFloat(getStyle(obj,name)) * 100; else var status = parseInt(getStyle(obj,name)); var speed = (target - status) / 6; speed = speed > 0 ? Math.ceil(speed):Math.floor(speed); if(status == target) clearInterval(obj.timer); else { if( name == 'opacity') { obj.style.filter = 'alpha(opacity:' + (status+speed) + ')'; obj.style.opacity = (status+speed) / 100; } else obj.style[name] = status + speed + 'px'; } },30); } </script> </head> <body> <div>從前有一座山</div> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>浮點數偏差</title> <meta charset="utf-8"> <script type="text/javascript"> alert(0.07*100); alert(Math.round(0.07*100));//四捨五入 </script> </head> <body> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>鏈式運動</title> <meta charset="utf-8"> <style type="text/css"> div{width:100px;height:100px;background:red;opacity: 0.3} </style> <script type="text/javascript"> window.onload = function() { var oDiv = document.getElementsByTagName('div')[0]; oDiv.onmouseover = function() { startMove(oDiv,'width',800, function(){startMove(oDiv,'height',600, function(){startMove(oDiv,'opacity',100)});}) } oDiv.onmouseout = function() { startMove(oDiv,'opacity',30, function(){startMove(oDiv,'height',100, function(){startMove(oDiv,'width',100)});}) } } </script> </head> <body> <div></div> </body> <script type="text/javascript"> function getStyle(obj,name) { if( obj.currentStyle ) return obj.currentStyle[name];//obj.currentStyle.width else return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width } function startMove(obj,name,target,fnEnd) { clearInterval(obj.timer); obj.timer = setInterval(function(){ if( name == 'opacity') var status = parseFloat(getStyle(obj,name)) * 100; else var status = parseInt(getStyle(obj,name)); var speed = (target - status) / 6; speed = speed > 0 ? Math.ceil(speed):Math.floor(speed); if(status == target) { clearInterval(obj.timer); if(fnEnd) fnEnd(); } else { if( name == 'opacity') { obj.style.filter = 'alpha(opacity:' + (status+speed) + ')'; obj.style.opacity = (status+speed) / 100; } else obj.style[name] = status + speed + 'px'; } },30); } </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>運動框架小問題（不能多個屬性同時運動）</title> <meta charset="utf-8"> <style type="text/css"> div{width:100px;height:100px;background:red;opacity: 0.3} </style> <script type="text/javascript"> window.onload = function() { var oDiv = document.getElementsByTagName('div')[0]; oDiv.onmouseover = function() { startMove(oDiv,'width',800); startMove(oDiv,'height',600); // 寬高並非同時改變，僅僅是你改變了高度 } } </script> </head> <body> <div></div> </body> <script type="text/javascript"> function getStyle(obj,name) { if( obj.currentStyle ) return obj.currentStyle[name];//obj.currentStyle.width else return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width } function startMove(obj,name,target,fnEnd) { clearInterval(obj.timer); obj.timer = setInterval(function(){ if( name == 'opacity') var status = parseFloat(getStyle(obj,name)) * 100; else var status = parseInt(getStyle(obj,name)); var speed = (target - status) / 6; speed = speed > 0 ? Math.ceil(speed):Math.floor(speed); if(status == target) { clearInterval(obj.timer); if(fnEnd) fnEnd(); } else { if( name == 'opacity') { obj.style.filter = 'alpha(opacity:' + (status+speed) + ')'; obj.style.opacity = (status+speed) / 100; } else obj.style[name] = status + speed + 'px'; } },30); } </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>解決運動框架小問題（多個屬性同時運動）</title> <meta charset="utf-8"> <style type="text/css"> div{width:100px;height:100px;background:red;opacity: 0.3} </style> <script type="text/javascript"> window.onload = function() { var oDiv = document.getElementsByTagName('div')[0]; oDiv.onmouseover = function() { startMove(oDiv,{'width':500,'height':600,'opacity':100}); } oDiv.onmouseout = function() { startMove(oDiv,{'width':100,'height':100,'opacity':30}); } } </script> </head> <body> <div></div> </body> <script type="text/javascript"> function getStyle(obj,name) { if( obj.currentStyle ) return obj.currentStyle[name];//obj.currentStyle.width else return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width } function startMove(obj,json,fnEnd) { clearInterval(obj.timer); obj.timer = setInterval(temp,30); function temp() { var isStop = true; for(var index in json) { if( index == 'opacity') var status = parseFloat(getStyle(obj,index)) * 100; else var status = parseInt(getStyle(obj,index)); if( status != json[index] ) isStop = false; var speed = (json[index] - status) / 6; speed = speed > 0 ? Math.ceil(speed):Math.floor(speed); if( index == 'opacity') { obj.style.filter = 'alpha(opacity:' + (status+speed) + ')'; obj.style.opacity = (status+speed) / 100; } else obj.style[index] = status + speed + 'px'; } if( isStop ) { clearInterval(obj.timer); if(fnEnd) fnEnd(); } } } </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>留言板案例</title> <meta charset="utf-8"> <style type="text/css"> *{margin:0;padding:0;} ul{width:500px;min-height:50px;list-style:none;margin:50px auto;border:1px solid #CCC;overflow:hidden;} ul li{border-bottom:1px #DDD dashed;padding:5px;overflow:hidden;opacity:0;} </style> <script type="text/javascript"> window.onload = function() { var oTxt = document.getElementsByTagName('textarea')[0]; var oBtn = document.getElementsByTagName('input')[0]; var oUl = document.getElementsByTagName('ul')[0]; oBtn.onclick = function() { var oLi = document.createElement('li'); oLi.innerHTML = oTxt.value; oTxt.value = ''; if( oUl.children.length > 0 ) oUl.insertBefore(oLi,oUl.children[0]); else oUl.appendChild(oLi); var oHeight = oLi.offsetHeight; oLi.style.height = 0; startMove(oLi,{'height':oHeight},function(){ startMove(oLi,{'opacity':100}); } ); } } </script> </head> <body> <textarea></textarea> <input type="button" value="發佈"> <ul></ul> </body> <script type="text/javascript"> function getStyle(obj,name) { if( obj.currentStyle ) return obj.currentStyle[name];//obj.currentStyle.width else return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width } function startMove(obj,json,fnEnd) { clearInterval(obj.timer); obj.timer = setInterval(temp ,30); function temp() { var isStop = true; for(var index in json) { if( index == 'opacity') var status = parseFloat(getStyle(obj,index)) * 100; else var status = parseInt(getStyle(obj,index)); if( status != json[index] ) isStop = false; var speed = (json[index] - status) / 5; speed = speed > 0 ? Math.ceil(speed):Math.floor(speed); if( index == 'opacity') { obj.style.filter = 'alpha(opacity:' + (status+speed) + ')'; obj.style.opacity = (status+speed) / 100; } else obj.style[index] = status + speed + 'px'; } if( isStop ) { clearInterval(obj.timer); if(fnEnd) fnEnd(); } } } </script> </html> <!-- *************************************************************************************-->
相關文章
- 1. js基礎筆記
- 2. JS基礎筆記
- 3. JS基礎筆記——基礎常識篇
- 4. HTML5+CSS+JS基礎筆記
- 5. js基礎知識筆記
- 6. js基礎學習筆記
- 7. js筆記--基礎部分
- 8. css、js基礎筆記
- 9. JS基礎 筆記（一）
- 10. 前端筆記——JS基礎（原型&&原型鏈）
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. js基礎筆記
- 2. JS基礎筆記
- 3. JS基礎筆記——基礎常識篇
- 4. HTML5+CSS+JS基礎筆記
- 5. js基礎知識筆記
- 6. js基礎學習筆記
- 7. js筆記--基礎部分
- 8. css、js基礎筆記
- 9. JS基礎 筆記（一）
- 10. 前端筆記——JS基礎（原型&&原型鏈）