JavaScript 代码分析

最新推荐文章于 2024-05-03 02:25:48 发布

weixin_33814685

最新推荐文章于 2024-05-03 02:25:48 发布

阅读量321

点赞数

文章标签： javascript ViewUI

原文链接：http://blog.51cto.com/jerrymin/1434661

版权

JavaScript代码分析

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

CSS样式：

<style>

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

</style>

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

JavaScript代码：

//在页面范围内移动鼠标

document.οnmοusemοve=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.οnmοusemοve=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.οnkeydοwn=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.οnmοusemοve=null;

document.οnmοuseup=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.οnmοusemοve=null;

document.οnmοuseup=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结构οnclick="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].οnmοuseοver=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].οnmοuseοver=select;

}

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

下面定义select函数功能

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

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

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

转载于:https://blog.51cto.com/jerrymin/1434661

weixin_33814685

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 代码分析

JavaScript代码分析实例一：跟随鼠标移动的DIVCSS样式：<style>#div1 {width:100px; height:100px; background:red; position:absolute; }</style>#div1 id选择器，设置了长宽高，背景色，位置为绝对定位JavaScript代码：<script>...
复制链接

扫一扫