js的常見寫法技巧
Javascript練習題
摘要: View Code <!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; ch
閱讀全文
摘要: View Code <!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; ch
閱讀全文
摘要: View Code <!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; ch
閱讀全文
摘要: cookie思路：當點擊登陸按鈕時，把cookie存起來，再次訪問的時候就讀取cookie，即把txt的value設置以前存起來cookie的值 就行。View Code <!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&
閱讀全文
摘要: cookie設置過時時間要先獲取當前的時間日期再加上過時時間就行。如：var oDate=new Date();oDate.setDate(oDate.getDate()+7); //設置過時時間document.cookie='user=admin;password=123546;expires='+oDate;
閱讀全文
摘要: View Code window.onload=function(){ var txt=document.getElementById('txt'); var oBtn=document.getElementById('btn'); oBtn.onclick=function() { var oWindow=window.open('about:blank','_blank'); oWindow.document.write(txt.value); txt.value=''; };}; 1 <!DOCTYPE
閱讀全文
摘要: View Code 1 window.onload=function() 2 { 3 new Drag('div1'); 4 new LimitDrag('div2'); 5 }; 6 7 function Drag(id) 8 { 9 this.disX=0;10 this.disY=0;11 var _this=this;12 this.oDiv=document.getElementById(id);13 14 this.oDiv.onmousedown=function(ev)15 {16 _t...
閱讀全文
摘要: JS代碼：View Code 1 <script> 2 window.onload=function() 3 { 4 var oDiv=document.getElementById('div'); 5 var disX=0; 6 var disY=0; 7 8 oDiv.onmousedown=function(ev) //鼠標按下DIV 9 {10 var oEvent=ev||event;11 disX=oEvent.clientX-oDiv.offsetLeft; //鼠標的X座標減去DIV的左邊距...
閱讀全文
摘要: JS代碼：View Code 1 <script> 2 window.onload=function() 3 { 4 var oTxt=document.getElementById('txt'); 5 oTxt.onkeydown=function(ev) 6 { 7 var oEvent=ev||event; 8 //alert(oEvent.keyCode); 9 if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57)) //oEvent.k...
閱讀全文
摘要: JS代碼：View Code 1 <script> 2 function getPosition(ev) //獲取頁面到鼠標點的X Y座標 3 { 4 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 5 var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; 6 return{x: scrollLeft+ev.clientX,y: scrollTop+ev.clien...
閱讀全文
摘要: Crtl+Enter提交留言代碼：View Code 1 <script> 2 window.onload=function() 3 { 4 var oTxt1=document.getElementById('txt1'); 5 var oTxt2=document.getElementById('txt2'); 6 7 oTxt1.onkeydown=function(ev) 8 { 9 var oEvent=ev||event;10 if(oEvent.keyCode==13 && oEvent.ctrlKey)11 ...
閱讀全文
摘要: 效果:發佈時高度慢慢增大，透明度也同時變爲100思路：一、建立li二、li的值是從文本框獲取的 li.innerHtml=txt.value;三、清空文本框 txt.value='';四、if判斷若是沒有內容的時候就appendChild插入，若是有內容就倒序插入。五、用offsetHeight獲取 li高度，先把li高度設置爲0，再經過運動框架設置li高度和透明度JS代碼：View Code 1 <script> 2 window.onload=function() 3 { 4 var oUl=document.getElementById('ul'
閱讀全文
摘要: 淘寶幻燈片效果：能自動播放，鼠標指向或者點擊數字按鈕就能切換圖片。實現思路：一、for循環給數字按鈕加上點擊事件。2.for循環先把按鈕的樣式清 空，再把當前樣式設置樣式。三、給每一個按鈕添加自定義屬性index aBtn[i].index=i aBtn[2]=2 第二個按鈕和第二張圖片想對應，用運動框架把大圖的UL每次移動-150px，由於圖片高度是150px。若是移動到第n張圖片就是-150*n。四、定 義變量now，用來自動播放用的。把當前圖片賦值給now now=this.index。五、定義自動播放函數。now++ 下一張，if判斷，到最後一張圖片的時候就把now設置爲0，就是第一張。 i
閱讀全文
摘要: 效果：一、上面大圖鼠標移到左邊就過渡顯示左邊的按鈕，鼠標移到右邊就過渡顯示右邊的按鈕。二、點擊下方縮略圖時大圖就切換爲相應的並有一個拉窗簾的效 果。三、縮略圖有透明度，鼠標移入縮略圖就不透明。四、按大圖按鈕切換圖片，縮略圖會相應切換。五、自動播放，當圖片播放到最後一張時自動返回從第一張開 始。實現思路：1、大圖左右按鈕：一、在大圖上弄2個遮罩層，opacity透明度設置爲0，當鼠標移出左邊或者右邊的運動框架時，經過運動框架使按鈕 opacity從0變爲100，鼠標移出時就把opacity從100變爲0二、按鈕opacity透明度設置爲0，鼠標移出按鈕時經過運動框架使按鈕 opacity從0變爲100，
閱讀全文
摘要: function getByClass(oParent, sClass) //兩個形參，第一個對象oParent 第二個樣式名class{ var aEle=oParent.getElementsByTagName('*'); //從對象裏選擇全部元素 var aResult=[]; //空數組 for(var i=0;i<aEle.length;i++) //歷遍全部oParent元素裏面的全部元素 { if(aEle[i].className==sClass) //當有oParent元素裏面的元素類名和傳進來的類名是同樣的 { aResult.push(aEle[i]
閱讀全文
摘要: 任意值運動框架思路：一、任意值運動框架帶有3個形參，第一個是obj對象，第二個是attr屬性，第三個是iTarget對象運動的目標值。二、清除當 前對象的定時器 clearInterval(obj.timer)三、設置定時器 obj.setInterval(function(){},30)3.一、定義一個空的cur用來設置當前屬性。3.二、由於有時候是opacity透 明度運動，因此就要用if else加一個判斷1 if(attr=='opacity'){2 cur=Math.round(parseFloat(getStyle(obj,attr))*100); //opacity要
閱讀全文
摘要: 思路：有多個物體運動時，當切換到另一個時就要把當前物體運動的定時器關閉運動框架：一、先關閉當前DIV的定時器 clearInterval(obj.timer)二、開啓當前DIV的定時器obj.timer=setInterval()2.一、定義物體運動的速 度。速度等於目標(形參)減去當前DIV的寬度 obj.offsetWidth2.二、用三目運算符把速度向上取整Math.ceil()和向下取整Math.floor()2.三、用if判斷，噹噹 前DIV寬度等於目標值(iTarget)就清除當前DIV的定時器clearInterval(obj.timer)，不然else就設置DIV的寬度 等於當前D
閱讀全文
摘要: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>無標題文檔</title> 6 <style> 7 #div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;} 8 #div2 {width:1px; height:300px; position:absolute; left:30
閱讀全文
摘要: 建立元素是用createElement,先把建立的元素賦值給一個變量，再把這個變量插入到文檔元素中。末尾插入元素是用：appendChild appendChild的形式是：父級.appendChild(子節點)，把子節點插入到父級下的末尾。insertBefore:在父級以前插入子節 點，形式：父級.insertBefore(子節點,在誰以前)removeChild:從父級刪除一個子節點，形式父 級.appendChild(removeChild)正常順序插入Li 和倒序插入LI代碼： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
閱讀全文
摘要: 思路：一、獲取元素。二、要使圖片動起來就是用setInterval來改變，如往左邊滾動就改變offsetLeft，把圖片的左邊距改成負數。三、當 圖片往左滾的時候，右邊就會出現空白，這時候須要用innerHTML複製原來的4個li 造成8個li四、就算有8個li，但總會有滾到盡頭的時候，這時就作一個判斷當offsetLeft大於ul寬度的一半時，把ul拉回來0的位置（往左 滾）。五、當offsetLeft大於0時，就把Left設置爲負ul 寬度的一半。（往右滾）六、鼠標指向圖片，圖片中止。七、鼠標離開圖片，圖片繼續滾動。八、往左滾 往右滾就是控制offsetLeft，負數就是向左滾，正數就是向右滾
閱讀全文
摘要: 提示框功能：當鼠標指向頭像時，彈出一個信息框，鼠標可移動到信息框，當鼠標離開頭像時信息框消失，當鼠標離開信息框時信息框消失。實現功能思路：一、獲 取元素。二、當鼠標指向Div1時，Div2顯示。三、當鼠標離開Div1時，使Div2延遲0.5秒消失，這樣以便有時間把鼠標移到Div2。四、當鼠 標指向Div2時，Div2顯示。由於第3步設置setTimeout使Div2消失，因此把用clearTimeout()把setTimeout清除 了就能夠實現Div2顯示了。五、當鼠標離開Div2時，使Div2延遲0.5秒消失，這樣以便有時間把鼠標指向Div1。六、第2步已經設置了鼠標指向 Div1，Div2就顯示
閱讀全文
摘要: 日曆描述：有12個月，鼠標指向哪一個月就會在下方顯示月數和當月活動。思路：一、獲取元素。二、用數組定義月分內容三、for循環歷遍li元素添加鼠標指 向事件。四、for循環歷遍li元素去掉li樣式。五、爲當前li元素添加樣式。六、用innerHTML追加當前月分內容。JS代碼： 1 <script> 2 var neirong=['一','二','三','四','五','六','七','八','九','十','十一'
閱讀全文
摘要: 思路：選項卡就是點擊按鈕切換到相應內容，其實就是點擊按鈕把內容經過display(block none)來實現切換的。一、首先獲取元素。二、for循環歷遍按鈕元素添加onclick 或者 onmousemove事件。三、由於點擊當前按鈕時會以高亮狀態顯示，因此要再經過for循環歷遍把全部的按鈕樣式設置爲空和把全部DIV的 display設置爲none。四、把當前按鈕添加樣式，把當前DIV顯示出來，display設置爲block。注：給多個元素添加多個事件要用for 循環歷遍。如選項卡是點擊切換，當前按鈕高度，點擊和按鈕高亮就是2個事件，因此要用2個for循環歷遍。HTML代碼： 1 <div
閱讀全文
摘要: 思路：一、獲取元素。二、用for循環歷遍數組，把checkbox的checked設置爲true即實現全選，把checkbox的checked設置 爲false即實現不選。三、經過if判斷，若是checked爲true選中狀態的，就把checked設爲false不選狀態，若是checked爲 false不選狀態的，就把checked設爲true選中狀態。JS代碼： 1 <script> 2 window.onload=function(){ 3 var CheckAll=document.getElementById('All'); 4 var UnCheck=docum
閱讀全文
摘要: JS點擊顯示隱藏密碼思路：獲取元素，判斷點擊，若是DIV顯示就隱藏，若是DIV隱藏就顯示出來。1 if(DIV是顯示的){2 div.style.display='none';3 }4 else{5 div.style.display='block'; 6 }代碼：style:1 <style>2 #text{display:block;width:300px;cursor:pointer;height:20px;border:solid 1px #CCC;}3 #menu{display:none;width:300px;height:100px;
閱讀全文
摘要: 思路：一、首先用把密碼框用txt暫時替代，並賦上默認值 <input type="text" value="請輸入密碼" /> 二、當文本框獲取焦點後，把默認值清空，把type改成password。 三、當文本框失去焦點後，把type改成txt，把默認值設爲「請輸入密碼」。JS代碼： 1 window.onload=function(){ 2 3 var input=document.getElementById('input'); 4 5 input.onfocus=function(){ 6 7 if(this.value
閱讀全文
摘要: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; c
閱讀全文
摘要: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; c
閱讀全文
摘要: 1 <html> 2 <head> 3 <script type="text/javascript"> 4 /******************************************帶控制按鈕的簡單幻燈 片*********************************************/ 5 var i=0; //定義全局變量i timeout 6 var timeout; 7 function preLoadImages(){ //建立預加載函數數組，數組由3張圖片 8 Planet=new Array(); 9 P
閱讀全文
摘要: 一、建立一個clock對象的函數，帶三個屬性：seconds minutes hours。二、寫兩個方法：seTime()用來設置當前時間，displayTime()用了顯示時間。三、提示用戶選擇a.m/p.m。用戶的選擇 將做爲參數傳遞給displayTime()方法。四、輸出以下格式的效果：14：10：26或2：10:26 PM，具體哪一種輸出效果取決於display()方法的參數。<script type=text/javascript>function clock(){//對象函數this.seconds=0;//三個屬性 時\分\秒this.minutes=0;this.ho
閱讀全文
摘要: 編寫一個函數計算小費，小費爲總帳單的20%<script type=text/javascript>function tip(total){ return total*0.2;};var givetotal=prompt("總帳單是多少元","")-0;if (isNaN(givetotal)){ alert("只能輸出數字");}else if(givetotal==""){ alert("不能爲空");}else{ var tip=tip(givetotal); alert(&q
閱讀全文
摘要: 要求用switch重寫if else if else語句，要求提示用戶輸入月份，而不是直接賦值。原代碼：<script type=text/javascript>month=8;if(month==1){ alert("January");else if(month==8){ alert("August");}else{ alert("沒有合適的條件")}</script>重寫後代碼：<script type=text/javascript>var month=parseInt(prompt(&qu
閱讀全文
相關文章
- 1. 常見JS寫法
- 2. js代碼常見技巧總結
- 3. JS經常使用簡寫技巧
- 4. Mysql常見使用技巧
- 5. 常見sql技巧 優化
- 6. AWK常見使用技巧
- 7. CSS常見佈局技巧
- 8. 常見佈局技巧
- 9. JS 經常使用技巧
- 10. js常見算法
- 更多相關文章...
- • Markdown 高級技巧 - Markdown 教程
- • Hibernate的快照技術 - Hibernate教程
- • 常用的分佈式事務解決方案
- • C# 中 foreach 遍歷的用法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 常見JS寫法
- 2. js代碼常見技巧總結
- 3. JS經常使用簡寫技巧
- 4. Mysql常見使用技巧
- 5. 常見sql技巧 優化
- 6. AWK常見使用技巧
- 7. CSS常見佈局技巧
- 8. 常見佈局技巧
- 9. JS 經常使用技巧
- 10. js常見算法