一些有用的javascript实例分析(三)-阿里云开发者社区

开发者社区> 杰克.陈> 正文

一些有用的javascript实例分析(三)

简介: 原文:一些有用的javascript实例分析(三) 1 10 输入两个数字,比较大小 2 window.onload = function () 3 { 4 var aInput = document.
+关注继续查看
原文:一些有用的javascript实例分析(三)

  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 }

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
javascript:使用document.getElementById读取数据为空分析
  今天写个网页,想在页面加载onLoad时,动态显示由后台其他程序传来的数据时,用document.getElementById获取控件对象总是为空。但是检查了这个id确实是存在的。在网上查阅一番后才知道了其中的原因。
892 0
《ANSYS Workbench有限元分析实例详解(静力学)》——导读
CAE是计算机辅助求解复杂工程和产品结构各项性能和优化设计等问题的一种近似数值分析方法,适用于工程的整个生命周期。ANSYS软件是最经典的CAE软件之一,在国内应用广泛。近些年ANSYS公司收购了多款顶级流体、电磁类软件,并重点发展ANSYS Workbench平台。
10578 0
《数据挖掘:实用案例分析》——1.4 数据挖掘现状及应用前景
本节书摘来自华章计算机《数据挖掘:实用案例分析》一书中的第1章,第1.4节,作者 张良均 陈俊德 刘名军 陈荣,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1488 0
MySQL分析实例解读
MySQL分析实例是由RDS MySQL 与AnalyticDB for MySQL联合打造,产品级深度融合的OLTP+OLAP解决方案,解决MySQL客户复杂分析查询卡顿问题。一键购买,权限打通,自动数据同步,业务库毫无感知和影响情况下数据自动实时同步到分析库。
3200 0
《JavaScript启示录》——1.2 JavaScript构造函数构建并返回对象实例
如果说“构造函数只是一个函数”,那么我会说“你是对的,除非使用new关键字来调用该函数。”(如new String('foo'))。如果使用new调用某函数,该函数则担任一个特殊的角色,JavaScript给予该函数特殊待遇,将该函数的this值设置为正在构建的新对象。
1355 0
PgSQL · 应用案例 · 经营、销售分析系统DB设计之共享充电宝
背景 共享充电宝、共享单车、共享雨伞,共享女朋友^|^,共享汽车,。。。 共享经济最近几年发展确实非常迅猛。 共享必定涉及被共享对象的管理、会员的管理等,实际上也属于一种物联网系统。 本文以共享充电宝的场景为例,分享一下共享充电宝的经营分析、销售管理系统的后台数据库的设计。(老板关心的是整体销售的业绩,以及各个渠道的透视等。销售经理关心的是他管辖片区的销售业绩,运维人员关心的是设备的状态。)
1405 0
爬虫分析之数据存储——基于MySQL,Scrapy
上一篇->爬虫练习之数据整理——基于Pandas 上上篇->爬虫练习之数据清洗——基于Pandas 配置MySql 关于MySQL在Ubuntu的Pycharm上的配置,可以参考这篇文章中的第三部分 Mac安装mysql及终端操作mysql与pych...
1221 0
使用AppFabric 承载WCF和WF服务-实例分析和说明
针对Pro Windows Server AppFabric ISBN-13 (pbk): 978-1-4302-2817-2图书中的例子进行修改和分析 这个例子的应用场景如下: 前端是Asp.
776 0
《数据挖掘:实用案例分析》——1.2 数据挖掘在企业商务智能应用中的定位
本节书摘来自华章计算机《数据挖掘:实用案例分析》一书中的第1章,第1.2节,作者 张良均 陈俊德 刘名军 陈荣,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1353 0
+关注
杰克.陈
一个安静的程序猿~
10427
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载