JavaScript 代码分析

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添加内容到网页。



你可能感兴趣的:(function,background,absolute,position,DIVCSS)