1 10 输入两个数字，比较大小
2 window.onload = function ()
3 {
4 var aInput = document.getElementsByTagName("input");
5 var aSpan = document.getElementsByTagName("span")[0];
6 for(var i=0;i<aInput.length-1;i++){
7 aInput[i].onkeyup=function(){
8 //用空白取代非数字
9 this.value=this.value.replace(/^\d/,"");
10 }
11 aInput[2].onclick=function(){
12 //若都不输入数字提醒（保证代码的健壮性）
13 (aInput[0]==""||aInput[1]=="")?alert("please input number"):aSpan.innerHTML=Math.max(aInput[0].value,aInput[1].value)
14 }
15 }
16 11 简易网页时钟
17 window.onload = function ()
18 {
19 var oClock = document.getElementById("clock");
20 var aSpan = oClock.getElementsByTagName("span");
21 setInterval(getTimes,1000);
22 function getTimes(){
23 //获取当期时间
24 var date=new Date();
25 //时分秒组成一个数组
26 var aDate=[date.getHours(),date.getMinutes(),date.getSeconds()];
27 for(var i in aDate){aSpan[i].innerHTML=formate(aDate[i])}
28 }
29 function formate(a){
30 //正则匹配的反向引用，a是数字以默认的10进制输出
31 return a.toString().replace(/^(\d)$/,"0$1")
32
33 }
34 12 setTimeout应用
35 window.onload = function ()
36 {
37 var oNav = get.byId("nav");
38 //获取一级导航栏
39 var aLi = get.byTagName("li", oNav);
40 //获取二级导航栏
41 var aSubNav = get.byClass("subnav", oNav);
42 var oSubNav = oEm = timer = null;
43 var i = 0;
44 //循环一级导航栏
45 for(i=1;i<aLi.length;i++){
46 aLi[i].onmouseover=function{
47 //先隐藏所有的子导航栏
48 for(i=0;i<aSubNav.length;i++){aSubNav[i].style.display="none";}
49 //获取该项下的子导航栏
50 oSubNav=get.byClass("subnav",this)[0];
51 //获取该项下的指示箭头
52 oEm=get.byTagName("em",this)[0];
53 //显示该项下的子导航栏
54 oSubNav.style.display="block";
55 //offsetWidth是指对象自身的宽度，整型，单位像素（含边线，如滚动条的占用的宽，值会随着内容的输入而不断改变）
56 //offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
57 //判断显示区域,this.offsetLeft是相对oNav来说的
58 oNav.offestWidth-this.offsetLeft>oSubNav.offestWidth?oSubNav.style.left=this.offest+"px":oSubNav.style.right=0;
59 //style.left，元素必须设置position才有效
60 oEm.style.left=this.offsetLeft-oSubNav.offsetLeft+50+"px";
61 clearTimeout(timer);
62 //阻止事件冒泡，只在li上有用，在nav没用
63 oSubNav.onmouseout=function(event){
64 (event||window.event).cancelBubble=true;
65 //清楚鼠标离开的定时器，做到无缝滑动
66 clearTimeout(timer);
67 }
68 }
69 aLi[i].onmouseout=function(){
70 //离开后0.3s去除子导航栏
71 timer=setTimeout(function(){oSubNav.style.display="none"},300)
72 }
73 }
74 }
75 13 自动播放效果-幻灯片
76 window.onload = function ()
77 {
78 var oBox = document.getElementById("box");
79 var aUl = document.getElementsByTagName("ul");
80 //获取图片列表
81 var aImg = aUl[0].getElementsByTagName("li");
82 //获取按钮列表
83 var aNum = aUl[1].getElementsByTagName("li");
84 var timer = play = null;
85 var i = index = 0;
86 //切换按钮
87 for(i=0;i<aNum.length;i++){
88 aNum[i].index=i;
89 aNum[i].onmouseover=function(){
90 show(this.index);
91 }
92 }
93 //鼠标滑过关闭定时器
94 oBox.onmouseover=function(){
95 clearInterval(play);
96 }
97 //鼠标离开启动自动播放
98 oBox.onmouseout=function(){
99 autoPlay();
100 }
101 //自动播放
102 function autoPlay(){
103 play=setInterval(function(){
104 //图片索引每两秒增加一次
105 index++;
106 //当大于图片数目时，归零。达到无缝滚动
107 index>=aImg.length&&(index=0)
108 show(index);
109 },2000)
110 }
111 autoPlay();
112 //图片切换，淡入淡出
113 function show(a){
114 index=a;
115 var alpha=0;
116 for(var i=0;i<aNum.length;i++){
117 //按钮样式
118 aNum[i].className="";}
119 aNum[index].className="current";
120 clearInterval(timer);
121 for(var i=0;i<aImg.length;i++){
122 //其他图片的透明度最高，即不显示
123 aImg[i].style.opacity = 0;//w3c
124 aImg[i].style.filter = "alpha(opacity=0)";//ie
125 }
126 timer=setInterval(function(){
127 alpha+=2//0.02秒加2
128 //若大于100，取100
129 alpha>100&&(alpha=100);
130 aImg[index].style.opacity = alpha / 100;
131 aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
132 //当达到100，清楚定时器
133 alpha == 100 && clearInterval(timer)
134 },20)
135
136 }
137 }
1 14 拖拽
2 var zIndex = 1;
3 window.onload = function ()
4 {
5 var oDrag1 = document.getElementById("drag1");
6 var oDrag2 = document.getElementById("drag2");
7 drag(oDrag1);
8 drag(oDrag2);
9 };
10 function drag(oDrag){
11 var disX=disY=0;
12 oDrag.onmusedown=function(event){
13 var event=event||window.event;
14 disX=event.clientX-this.offsetLeft;
15 disY=event.clientY-this.offestTop;
16 var oTemp=document.createElement("div");
17 oTemp["id"]="temp";
18 oTemp.style.left=this.currentStyle?this.currentStyle["left"]:getComputeStyle(this,null)["left"];
19 oTemp.style.top = this.currentStyle ? this.currentStyle["top"] : getComputedStyle(this, null)["top"];
20 oTemp.style.zIndex=zIndex++;
21 document.body.appendChild(oTemp);
22 document.onmouseover=function(event){
23 var event = event || window.event;
24 var il=event.clientY-disX;
25 var iT=event.clientY-disY;
26 var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;
27 var maxT = document.documentElement.clientHeight - oDrag.offsetHeight
28 iL <= 0 && (iL = 0);
29 iT <= 0 && (iT = 0);
30 iL >= maxL && (iL = maxL);
31 iT >= maxT && (iT = maxT);
32 oTemp.style.left=iL+"px";
33 oTemp.style.top=iT+"px";
34 return false;
35 };
36 document.onmouseup = function ()
37 {
38 document.onmousemove = null;
39 document.onmouseup = null;
40 oDrag.style.left = oTemp.style.left;
41 oDrag.style.top = oTemp.style.top;
42 oDrag.style.zIndex = oTemp.style.zIndex;
43 document.body.removeChild(oTemp);
44 oDrag.releaseCapture && oDrag.releaseCapture()
45 };
46
47 this.setCapture && this.setCapture();
48 return false
49 }
50 }
时间： 2024-09-13 14:38:46