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.onload=function (){
}窗口一加载就执行的函数
var disX=0;var disY=0;定义两个变量，并赋值0
oDiv.onmousedown=function (ev){
document.onmousemove=function (ev){
}
document.onmouseup=function (){
};
}
这个结构是当鼠标落下在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.onmouseup=function ()
{
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面向对象开发方式 - 妙味课堂 - ",
"熟练掌握AJAX技术及相关应用（例如：新浪微博级应用） - 妙味课堂 - ",
"可以独立写出类似jQuery的小型库（支持各类选择符、事件类、DOM、自定义动画animate、AJAX……） - 妙味课堂 - ",
"精通JS运动特效技术，能完整实现各类网站所有动画特效，如 妙味课堂 官网 - 妙味课堂 - ",
"掌握JS调试及优化技术、能兼容所有浏览器 - 妙味课堂 - ",
"精通JS事件对象及事件的工作机制，并能完成各类跨平台应用模块的开发 - 妙味课堂 - ",
"能独立开发表现和性能都很优秀的RIA应用 - 妙味课堂 - ",
"了解后台编程的相关知识，能够和后台工程师配合完成大型交互应用 - 妙味课堂 - ",
"熟悉正则表达式的编写、应用及高级表单验证技术 - 妙味课堂 - "
];
window.onload=function ()
{
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
简单日历学习报告
日历的三层结构：
同样地，在编写这个日历时，我使用了三种结构，这是做网页的通用方法。
第一层：结构层，指（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添加内容到网页。
