JavaScript代碼分析
實例一：跟隨鼠標移動的DIV
CSS樣式：
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; }
</style>
#div1 id選擇器，設置了長寬高，背景色，位置爲絕對定位
JavaScript代碼：
<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代碼：
<script>
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代碼：
<script>
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代碼：
<script type="text/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結構：
<input type="button" value="開始運動" />
實例五：緩衝運動
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代碼分析：
<script type="text/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>
<input type="button" value="開始運動" />
<div id="div1"></div>
<span></span>
<input id="txt1" type="text"/>
</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代碼分析:
<script language="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結構：
<div id="navigation">
<ul id="listUL">
<li><a href="#">Home</a></li>
<li><a href="#">News</a>
<ul class="myHide">
<li><a href="#">Lastest News</a></li>
<li><a href="#">All News</a></li>
</ul>
</li>
<li><a href="#">Sports</a>
<ul class="myHide">
<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>
<ul class="myHide">
<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結構：
<div id="tab" class="calendar">
<ul>
<li class="active"><h2>1</h2><p>JAN</p></li>
<li><h2>2</h2><p>FER</p></li>
<li><h2>3</h2><p>MAR</p></li>
<li><h2>4</h2><p>APR</p></li>
<li><h2>5</h2><p>MAY</p></li>
<li><h2>6</h2><p>JUN</p></li>
<li><h2>7</h2><p>JUL</p></li>
<li><h2>8</h2><p>AUG</p></li>
<li><h2>9</h2><p>SEP</p></li>
<li><h2>10</h2><p>OCT</p></li>
<li><h2>11</h2><p>NOV</p></li>
<li><h2>12</h2><p>DEC</p></li>
</ul>
<div class="text">
<h2>1月活動</h2>
<p>快過年了，大家可以商量着去哪玩吧～</p>
</div>
</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
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添加內容到網頁。