JavaScript代码分析


实例一：跟随鼠标移动的DIV


CSS样式：

#div1 id选择器，设置了长宽高，背景色，位置为绝对定位


JavaScript代码：

代码分析：

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样式：


JavaScript代码：

代码分析：

这里大部分知识点上面都有，新增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样式：


JavaScript代码：

代码分析：

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样式：


JavaScript代码：


function startMove(iTarget){}其中iTarget是传参，可以在html结构onclick="startMove(300)"中可以看到，这里的是300

clearInterval(timer)；清空时间

setInterval（）{函数，30}；间隔型定时器，每隔30ms执行一次函数，还有一个是延时型定时器的使用：只执行一次，如：setTimeout(show, 1000);


if(oDiv.offsetLeft {

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样式：

span是标签选择器，它是限制行内元素的，注意CSS样式后面没有分号。




JavaScript代码分析：

iSpeed=iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed); 这是一个判断结构，真执行冒号前，假执行冒号后。

var oTxt = document.getElementById("txt1");oTxt.value=oDiv.offsetLeft+","+iSpeed;这两项会在输入框里显示速度。


HTML结构：



实例六：折叠子菜单


CSS样式：


JavaScript代码分析:

var oSecondDiv = this.getElementsByTagName("ul")[0];getElementsByTagName根据标签名获取的，表示为数组，[0]数组中第一个元素。

oSecondDiv.className = "myShow";className可以指定ccs样式。

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


HTML结构：



实例七：简易日历


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[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[i].className='';

}

for(i=0;i

{

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

{

aLiBtn[i].className='active';

//修改下部文字

sInnterHtml="

" + (i+1) + "月活动

";

sInnterHtml+="

" + aInnerText[i] + "

";

oDivContent.innerHTML=sInnterHtml;

}

}

}


HTML结构：


   

           

  • 1

    JAN

    •        

  • 2

    FER

    •        

  • 3

    MAR

    •        

  • 4

    APR

    •        

  • 5

    MAY

    •        

  • 6

    JUN

    •        

  • 7

    JUL

    •        

  • 8

    AUG

    •        

  • 9

    SEP

    •        

  • 10

    OCT

    •        

  • 11

    NOV

    •        

  • 12

    DEC

    •    

    

   

       

1月活动

       

快过年了，大家可以商量着去哪玩吧～

   




简单日历学习报告

日历的三层结构：

同样地，在编写这个日历时，我使用了三种结构，这是做网页的通用方法。

第一层：结构层，指（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[i].onmouseover=select;

}

for循环使每个月块对应一个sleect函数，当鼠标移动到月块上时执行函数select



下面定义select函数功能



var oDivContent=oDiv.getElementsByTagName('div')[0];这里是相当于id为tab的div里面的第一个div，也就是显示月份活动的那个div了。


第一个for循环主要对应上面说在月块CSS样式，这里为空，就是先清空所有的样式；下面在for循环意思是每当鼠标移动到指定的月块时，月块的CSS样式为active样式。


然后显示内容，内容是相叠加在，还用到前面定义的内容数组元素，最后用.innerHTMl添加内容到网页。