JavaScript 代碼分析

時間 2021-04-19

標籤 javascript html java 正則表達式編程數組瀏覽器 ide 函數性能欄目 JavaScript 简体版

原文原文鏈接

JavaScript代碼分析javascript

實例一：跟隨鼠標移動的DIVhtml

CSS樣式：java

#div1 {width:100px; height:100px; background:red; position:absolute; }編程

</style>數組

#div1 id選擇器，設置了長寬高，背景色，位置爲絕對定位瀏覽器

JavaScript代碼：ide

<script>函數

//在頁面範圍內移動鼠標性能

document.onmousemove=function(ev){

var oEvent = ev || event;

var oDiv = document.getElementById('div1');

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

oDiv.style.left = oEvent.clientX + scrollLeft+ 'px';

oDiv.style.top = oEvent.clientY + scrollTop +'px' ;

}

</script>

代碼分析：

document.onmousemove=function(ev)是說明鼠標移動事件在整個頁面內，ev是傳參

var oEvent = ev || event; 保證了瀏覽器的兼容性

var oDiv = document.getElementById('div1');定義對象oDiv，經過獲取元素id的方式獲取的

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;定義可視區高，同時考慮到了瀏覽器兼容性

var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;定義可視區寬，同時考慮到了瀏覽器兼容性

oDiv.style.left = oEvent.clientX + scrollLeft+ 'px';給div1的x座標賦值

oDiv.style.top = oEvent.clientY + scrollTop +'px'; 給div1的y座標賦值

以上兩項就能夠肯定div1的位置，這樣當鼠標移動事件發生後，div1就跟着一塊兒移動

實例二：鍵盤控制div移動

CSS樣式：

<style>

#div1 {width:100px; height:100px; background:red; position:absolute;}

</style>

JavaScript代碼：

document.onkeydown=function (ev){

var oEvent = ev||event;

var oDiv = document.getElementById('div1');

if(oEvent.keyCode == 37){//左

oDiv.style.left = oDiv.offsetLeft - 10 +'px';

}else if(oEvent.keyCode == 39){//右

oDiv.style.left = oDiv.offsetLeft + 10 +'px';

}

else if(oEvent.keyCode == 38){//上

oDiv.style.top = oDiv.offsetTop -10 +'px';

}

else if(oEvent.keyCode == 40){//右

oDiv.style.top = oDiv.offsetTop + 10 +'px';

}

</script>

代碼分析：

這裏大部分知識點上面都有，新增keyCode,這是個鍵盤事件，每一個鍵盤上的按鍵都對應一個數字，左上右下對應的數字分別是：37,38,39,40，

另外有個分支結構是if(){}else if(){},

oEvent.keyCode == 37條件判斷，

oDiv.style.left = oDiv.offsetLeft - 10 +'px';這裏是對div1左右位置賦值，後面oDiv.offsetLeft - 10 + 'px'能夠獲得div1的左邊距，這裏是向左移動，由於左邊距減小。下面依次類推：左邊距增長，向右移動；上邊距減小，向上移動；上邊距增長，向下移動。

實例三：拖拽

CSS樣式：

<style>

#div1 {width:100px; height:100px; background:red; position:absolute;}

</style>

JavaScript代碼：

window. ()

{

var oDiv=document.getElementById('div1');

var disX=0;

var disY=0;

oDiv. (ev)

{

var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;

disY=oEvent.clientY-oDiv.offsetTop;

document. (ev)

{

var oEvent=ev||event;

var l=oEvent.clientX-disX;

var t=oEvent.clientY-disY;

if(l<0)

{

l=0;

}

else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)

{

l=document.documentElement.clientWidth-oDiv.offsetWidth;

}

if(t<0)

{

t=0;

}

else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)

{

t=document.documentElement.clientHeight-oDiv.offsetHeight;

}

oDiv.style.left=l+'px';

oDiv.style.top=t+'px';

};

document. ()

{

document.onmousemove=null;

document.onmouseup=null;

};

return false;

};

</script>

代碼分析：

window. (){

}窗口一加載就執行的函數

var disX=0;var disY=0;定義兩個變量，並賦值0

oDiv. (ev){

document. (ev){

}

document. (){

};

}

這個結構是當鼠標落下在div1上的時候執行一個函數，而後這個函數裏面包括兩個函數，一個是當鼠標在頁面移動時，一個是當鼠標離開頁面時。

disX=oEvent.clientX-oDiv.offsetLeft; 其中Event.clientX是鼠標落下時，X的座標；oDiv.offsetLeft是div1的左邊距，兩個值之差能夠做爲一個參照值，而後鼠標移動到下一個位置時會獲得Event.clientX值，經過此時的值和disX的值就能夠求出此時的oDiv.offsetLeft，也就是div1的左邊距。

disY=oEvent.clientY-oDiv.offsetTop;同上，爲了求得鼠標移動到下一個位置時div1的上邊距。

var l=oEvent.clientX-disX;var t=oEvent.clientY-disY;這兩個是求得的具體值。

下面這個條件判斷主要做用是，鼠標超出頁面時，保證div1在頁面內，document.documentElement.clientWidth頁面寬度，oDiv.offsetWidth是div1寬度，document.documentElement.clientHeight是頁面高度，oDiv.offsetHeight是div1的寬度。當l<0時，令l=0是左邊的控；當l>document.documentElement.clientWidth-oDiv.offsetWidth時，令l=document.documentElement.clientWidth-oDiv.offsetWidth是右邊的控制；當t<0時，令t=0s是上邊的控制；當t>document.documentElement.clientHeight-oDiv.offsetHeight時，令t=document.documentElement.clientHeight-oDiv.offsetHeight是下面的控制。

if(l<0)

{

l=0;

}

else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)

{

l=document.documentElement.clientWidth-oDiv.offsetWidth;

}

if(t<0)

{

t=0;

}

else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)

{

t=document.documentElement.clientHeight-oDiv.offsetHeight;

}

document. ()

{

document.onmousemove=null;

document.onmouseup=null;

};

這個函數是說當鼠標一離開頁面，就禁止掉移動事件。

return false;阻止系統默認行爲。

實例四：勻速運動

CSS樣式：

<style>

#div1 {width:100px; height:100px; position:absolute; background:red; left:0; top:50px;}

</style>

JavaScript代碼：

var timer=null;

function startMove(iTarget){

var oDiv=document.getElementById('div1');

clearInterval(timer);

timer=setInterval(function (){

var iSpeed=0;

if(oDiv.offsetLeft<iTarget) {

iSpeed=7;

}else{

iSpeed=-7;

}

if(Math.abs(oDiv.offsetLeft-iTarget)<7){ //是否到達終點

clearInterval(timer); //到達終點

oDiv.style.left=iTarget+'px';

}else{

oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; //到達以前

}

}, 30);

}

</script>

function startMove(iTarget){}其中iTarget是傳參，能夠在html結構onclick="startMove(300)"中能夠看到，這裏的是300

clearInterval(timer)；清空時間

setInterval（）{函數，30}；間隔型定時器，每隔30ms執行一次函數，還有一個是延時型定時器的使用：只執行一次，如：setTimeout(show, 1000);

if(oDiv.offsetLeft<iTarget) {

iSpeed=7;

}else{

iSpeed=-7;

}

這個是判斷div1和目標位置之間的關係，小於時在左邊，速度爲正值，這樣能夠向右運動到target；大於時在右邊，速度爲負值，這樣能夠向左運動到target.

Math.abs(oDiv.offsetLeft-iTarget)這個是取整數

if(Math.abs(oDiv.offsetLeft-iTarget)<7){ //是否到達終點

clearInterval(timer); //到達終點

oDiv.style.left=iTarget+'px';

}else{

oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; //到達以前

這個是判斷到沒到目標位置，到了就清空定時器，並使div1的左邊距等於目標位置；沒到就勻速運動。

html結構：

實例五：緩衝運動

CSS樣式：

<style>

#div1 {width:100px; height:100px; position:absolute; background:red; left:0px; top:50px;}

span {width:1px; height:300px; background:black; position:absolute; left:300px; top:0;}

</style>

span是標籤選擇器，它是限制行內元素的，注意CSS樣式後面沒有分號。

JavaScript代碼分析：

var timer=null;

function startMove(iTarget){

var oDiv=document.getElementById('div1');

clearInterval(timer);

timer=setInterval(function (){

var iSpeed=(iTarget-oDiv.offsetLeft)/8;

iSpeed=iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed); //速度大於0時，向上取整，速度爲1，到達終點；速度小於0時，向下取整，速度爲-1，到達終點

if(oDiv.offsetLeft==iTarget){ //是否到達終點

clearInterval(timer); //到達終點

}

else{

oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; //到達以前

}

var oTxt = document.getElementById("txt1");

oTxt.value=oDiv.offsetLeft+","+iSpeed;

}, 30);

}

</script>

iSpeed=iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed); 這是一個判斷結構，真執行冒號前，假執行冒號後。

var oTxt = document.getElementById("txt1");oTxt.value=oDiv.offsetLeft+","+iSpeed;這兩項會在輸入框裏顯示速度。

HTML結構：

<body>

</body>

實例六：摺疊子菜單

CSS樣式：

<style>

<!--

body{

background-color:#ffdee0;

}

#navigation {

width:200px;

font-family:Arial;

}

#navigation > ul {

list-style-type:none; /* 不顯示項目符號 */

margin:0px;

padding:0px;

}

#navigation > ul > li {

border-bottom:1px solid #ED9F9F; /* 添加下劃線 */

}

#navigation > ul > li > a{

display:block; /* 區塊顯示 */

padding:5px 5px 5px 0.5em;

text-decoration:none;

border-left:12px solid #711515; /* 左邊的粗紅邊 */

border-right:1px solid #711515; /* 右側陰影 */

}

#navigation > ul > li > a:link, #navigation > ul > li > a:visited{

background-color:#c11136;

color:#FFFFFF;

}

#navigation > ul > li > a:hover{ /* 鼠標通過時 */

background-color:#990020; /* 改變背景色 */

color:#ffff00; /* 改變文字顏色 */

}

/* 子菜單的CSS樣式 */

#navigation ul li ul{

list-style-type:none;

margin:0px;

padding:0px 0px 0px 0px;

}

#navigation ul li ul li{

border-top:1px solid #ED9F9F;

}

#navigation ul li ul li a{

display:block;

padding:3px 3px 3px 0.5em;

text-decoration:none;

border-left:28px solid #a71f1f;

border-right:1px solid #711515;

}

#navigation ul li ul li a:link, #navigation ul li ul li a:visited{

background-color:#e85070;

color:#FFFFFF;

}

#navigation ul li ul li a:hover{

background-color:#c2425d;

color:#ffff00;

}

#navigation ul li ul.myHide{ /* 隱藏子菜單 */

display:none;

}

#navigation ul li ul.myShow{ /* 顯示子菜單 */

display:block;

}

-->

</style>

JavaScript代碼分析:

function change(){

//找到子節點ul

var oSecondDiv = this.getElementsByTagName("ul")[0];

//alert(oSecondDiv);

//CSS交替更換來實現顯、隱

if(oSecondDiv.className == "myHide")

oSecondDiv.className = "myShow";

else

oSecondDiv.className = "myHide";

}

window.onload = function(){

var oUl = document.getElementById("listUL");

var aLi = oUl.childNodes; //子元素

var oA;

for(var i=0; i<aLi.length; i++){

//若是子元素爲li，且這個li有子菜單ul

//注意：標籤名必須用大寫"LI"

if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){

oA = aLi[i]; //找到超連接

oA.onclick = change; //動態添加點擊函數

}

</script>

var oSecondDiv = this.getElementsByTagName("ul")[0];getElementsByTagName根據標籤名獲取的，表示爲數組，[0]數組中第一個元素。

oSecondDiv.className = "myShow";className能夠指定ccs樣式。

oUl.childNodes;Ul的子元素就是Li。

HTML結構：

<li><a href="#">Lastest News</a></li>

</ul>

</li>

<li><a href="#">Sports</a>

<li><a href="#">Basketball</a></li>

<li><a href="#">Football</a></li>

<li><a href="#">Volleyball</a></li>

</ul>

</li>

<li><a href="#">Weather</a>

<li><a href="#">Today's Weather</a></li>

<li><a href="#">Forecast</a></li>

</ul>

</li>

<li><a href="#">Contact Me</a></li>

</ul>

</div>

實例七：簡易日曆

CSS樣式：

@charset "utf-8";

/* CSS Document */

* { padding: 0; margin: 0; }

li { list-style: none; }

body { background: #f6f9fc; font-family: arial; }

.calendar { width: 210px; margin: 0 auto; padding: 10px 10px 20px 20px; background: #eae9e9; }

.calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }

.calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }

.calendar li h2 { font-size: 20px; padding-top: 5px; }

.calendar li p { font-size: 14px; }

.calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }

.calendar .active h2 { }

.calendar .active p { font-weight: bold; }

.calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }

.calendar .text h2 {font-size: 14px; margin-bottom: 10px; }

.calendar .text p { font-size: 12px; line-height: 18px; }

JavaScript代碼分析：

var aInnerText=

[

"快過年了，你們能夠商量着去哪玩吧～",

"精通JavaScript開發課程 - 結課標準 - 有十條標準可以讓你們修練成JS高手……",

"妙味茶館(bbs.miaov.com)，正式開張，它看起來是論壇，實際上是個技術驛站，分紅了五個版塊：視頻教程、妙味生活秀、特效兜兒、技術交流、妙味聊吧",

"精通各類DOM類應用，熟練掌握面向對象編程思想（OOP）、熟悉JS面向對象開發方式 - 妙味課堂 - www.miaov.com",

"熟練掌握AJAX技術及相關應用（例如：新浪微博級應用） - 妙味課堂 - www.miaov.com",

"能夠獨立寫出相似jQuery的小型庫（支持各種選擇符、事件類、DOM、自定義動畫animate、AJAX……） - 妙味課堂 - www.miaov.com",

"精通JS運動特效技術，能完整實現各種網站全部動畫特效，如妙味課堂官網 - 妙味課堂 - www.miaov.com",

"掌握JS調試及優化技術、能兼容全部瀏覽器 - 妙味課堂 - www.miaov.com",

"精通JS事件對象及事件的工做機制，並能完成各種跨平臺應用模塊的開發 - 妙味課堂 - www.miaov.com",

"能獨立開發表現和性能都很優秀的RIA應用 - 妙味課堂 - www.miaov.com",

"瞭解後臺編程的相關知識，可以和後臺工程師配合完成大型交互應用 - 妙味課堂 - www.miaov.com",

"熟悉正則表達式的編寫、應用及高級表單驗證技術 - 妙味課堂 - www.miaov.com"

];

window. ()

{

var oDiv=document.getElementById('tab');

var aLiBtn=oDiv.getElementsByTagName('ul')[0].getElementsByTagName('li');

var i=0;

for(i=0;i<aLiBtn.length;i++)

{

aLiBtn[i].onmouseover=select;

}

};

function select()

{

var oDiv=document.getElementById('tab');

var aLiBtn=oDiv.getElementsByTagName('ul')[0].getElementsByTagName('li');

var oDivContent=oDiv.getElementsByTagName('div')[0];

var sInnterHtml='';

var i=0;

for(i=0;i<aLiBtn.length;i++)

{

aLiBtn[i].className='';

}

for(i=0;i<aLiBtn.length;i++)

{

if(aLiBtn[i] === this) //this的序號是i

{

aLiBtn[i].className='active';

//修改下部文字

sInnterHtml="<h2>" + (i+1) + "月活動</h2>";

sInnterHtml+="<p>" + aInnerText[i] + "</p>";

oDivContent.innerHTML=sInnterHtml;

}

HTML結構：

<ul>

</ul>

<p>快過年了，你們能夠商量着去哪玩吧～</p>

</div>

簡單日曆學習報告

日曆的三層結構：

一樣地，在編寫這個日曆時，我使用了三種結構，這是作網頁的通用方法。

第一層：結構層，指（X）HTML標籤（TAG），這個日曆放在那裏，用什麼TAG進行顯示。

第二層：表示層，由CSS負責，顯示什麼的樣式。

第三層：行爲層，這裏指的就是用JAVASCIPT建立的行爲，負責回答「內容應該如何對事情件作出反應「

簡言之：

（1）使用（X）HTML去搭建文檔的結構

（2）使用CSS設置文檔的顯現效果

（3）使用DOM腳本實現文檔的行爲

http://blog.chinaunix.net/uid-7215926-id-61751.html

第一層：

html網頁結構

div裏有一個無序列表，裏面有12個月，每月兩行，第一行數字，第二行英文。

下面還有一個div,裏面默認是第一個月活動內容。

第二層：

CSS代碼顯示效果

* 對全局

標籤名選擇器

li { list-style: none; }去掉li前面小黑點

body

類選擇器

.calendar

.calendar ul 和.calendar li中的width,padding-bottom,margin,border決定了每行只能排列3個月份，每月份都有一個邊框

.calendar .text 組合選擇器

第三層：

javascript代碼

首先定義了一個數組，數組裏有十二個元素，第一個元素正好是第一個月活動對應的。

系統加載時運行函數

var oDiv=document.getElementById('tab');定義目標div

var aLiBtn=oDiv.getElementsByTagName('ul')[0].getElementsByTagName('li');把每月當成一個塊，並把全部的月塊組成一個數組

for(i=0;i<aLiBtn.length;i++)

{

aLiBtn[i].onmouseover=select;

}

for循環使每月塊對應一個sleect函數，當鼠標移動到月塊上時執行函數select

下面定義select函數功能

var oDivContent=oDiv.getElementsByTagName('div')[0];這裏是至關於id爲tab的div裏面的第一個div，也就是顯示月份活動的那個div了。

第一個for循環主要對應上面說在月塊CSS樣式，這裏爲空，就是先清空全部的樣式；下面在for循環意思是每當鼠標移動到指定的月塊時，月塊的CSS樣式爲active樣式。

而後顯示內容，內容是相疊加在，還用到前面定義的內容數組元素，最後用.innerHTMl添加內容到網頁。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。