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

 10 输入两个数字,比较大小
window.onload = function ()
{
var aInput = document.getElementsByTagName("input");
var aSpan = document.getElementsByTagName("span")[0];
for(var i=0;i<aInput.length-1;i++){
aInput[i].onkeyup=function(){
//用空白取代非数字
this.value=this.value.replace(/^\d/,"");
}
aInput[2].onclick=function(){
//若都不输入数字提醒(保证代码的健壮性)
(aInput[0]==""||aInput[1]=="")?alert("please input number"):aSpan.innerHTML=Math.max(aInput[0].value,aInput[1].value)
}
}
11 简易网页时钟
window.onload = function ()
{
var oClock = document.getElementById("clock");
var aSpan = oClock.getElementsByTagName("span");
setInterval(getTimes,1000);
function getTimes(){
//获取当期时间
var date=new Date();
//时分秒组成一个数组
var aDate=[date.getHours(),date.getMinutes(),date.getSeconds()];
for(var i in aDate){aSpan[i].innerHTML=formate(aDate[i])}
}
function formate(a){
//正则匹配的反向引用,a是数字以默认的10进制输出
return a.toString().replace(/^(\d)$/,"0$1") }
12 setTimeout应用
window.onload = function ()
{
var oNav = get.byId("nav");
//获取一级导航栏
var aLi = get.byTagName("li", oNav);
//获取二级导航栏
var aSubNav = get.byClass("subnav", oNav);
var oSubNav = oEm = timer = null;
var i = 0;
//循环一级导航栏
for(i=1;i<aLi.length;i++){
aLi[i].onmouseover=function{
//先隐藏所有的子导航栏
for(i=0;i<aSubNav.length;i++){aSubNav[i].style.display="none";}
//获取该项下的子导航栏
oSubNav=get.byClass("subnav",this)[0];
//获取该项下的指示箭头
oEm=get.byTagName("em",this)[0];
//显示该项下的子导航栏
oSubNav.style.display="block";
//offsetWidth是指对象自身的宽度,整型,单位像素(含边线,如滚动条的占用的宽,值会随着内容的输入而不断改变)
//offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
//判断显示区域,this.offsetLeft是相对oNav来说的
oNav.offestWidth-this.offsetLeft>oSubNav.offestWidth?oSubNav.style.left=this.offest+"px":oSubNav.style.right=0;
//style.left,元素必须设置position才有效
oEm.style.left=this.offsetLeft-oSubNav.offsetLeft+50+"px";
clearTimeout(timer);
//阻止事件冒泡,只在li上有用,在nav没用
oSubNav.onmouseout=function(event){
(event||window.event).cancelBubble=true;
//清楚鼠标离开的定时器,做到无缝滑动
clearTimeout(timer);
}
}
aLi[i].onmouseout=function(){
//离开后0.3s去除子导航栏
timer=setTimeout(function(){oSubNav.style.display="none"},300)
}
}
}
13 自动播放效果-幻灯片
window.onload = function ()
{
var oBox = document.getElementById("box");
var aUl = document.getElementsByTagName("ul");
//获取图片列表
var aImg = aUl[0].getElementsByTagName("li");
//获取按钮列表
var aNum = aUl[1].getElementsByTagName("li");
var timer = play = null;
var i = index = 0;
//切换按钮
for(i=0;i<aNum.length;i++){
aNum[i].index=i;
aNum[i].onmouseover=function(){
show(this.index);
}
}
//鼠标滑过关闭定时器
oBox.onmouseover=function(){
clearInterval(play);
}
//鼠标离开启动自动播放
oBox.onmouseout=function(){
autoPlay();
}
//自动播放
function autoPlay(){
play=setInterval(function(){
//图片索引每两秒增加一次
index++;
//当大于图片数目时,归零。达到无缝滚动
index>=aImg.length&&(index=0)
show(index);
},2000)
}
autoPlay();
//图片切换,淡入淡出
function show(a){
index=a;
var alpha=0;
for(var i=0;i<aNum.length;i++){
//按钮样式
aNum[i].className="";}
aNum[index].className="current";
clearInterval(timer);
for(var i=0;i<aImg.length;i++){
//其他图片的透明度最高,即不显示
aImg[i].style.opacity = 0;//w3c
aImg[i].style.filter = "alpha(opacity=0)";//ie
}
timer=setInterval(function(){
alpha+=2//0.02秒加2
//若大于100,取100
alpha>100&&(alpha=100);
aImg[index].style.opacity = alpha / 100;
aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
//当达到100,清楚定时器
alpha == 100 && clearInterval(timer)
},20) }
}
 14 拖拽
var zIndex = 1;
window.onload = function ()
{
var oDrag1 = document.getElementById("drag1");
var oDrag2 = document.getElementById("drag2");
drag(oDrag1);
drag(oDrag2);
};
function drag(oDrag){
var disX=disY=0;
oDrag.onmusedown=function(event){
var event=event||window.event;
disX=event.clientX-this.offsetLeft;
disY=event.clientY-this.offestTop;
var oTemp=document.createElement("div");
oTemp["id"]="temp";
oTemp.style.left=this.currentStyle?this.currentStyle["left"]:getComputeStyle(this,null)["left"];
oTemp.style.top = this.currentStyle ? this.currentStyle["top"] : getComputedStyle(this, null)["top"];
oTemp.style.zIndex=zIndex++;
document.body.appendChild(oTemp);
document.onmouseover=function(event){
var event = event || window.event;
var il=event.clientY-disX;
var iT=event.clientY-disY;
var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;
var maxT = document.documentElement.clientHeight - oDrag.offsetHeight
iL <= 0 && (iL = 0);
iT <= 0 && (iT = 0);
iL >= maxL && (iL = maxL);
iT >= maxT && (iT = maxT);
oTemp.style.left=iL+"px";
oTemp.style.top=iT+"px";
return false;
};
document.onmouseup = function ()
{
document.onmousemove = null;
document.onmouseup = null;
oDrag.style.left = oTemp.style.left;
oDrag.style.top = oTemp.style.top;
oDrag.style.zIndex = oTemp.style.zIndex;
document.body.removeChild(oTemp);
oDrag.releaseCapture && oDrag.releaseCapture()
}; this.setCapture && this.setCapture();
return false
}
}

一些有用的javascript实例分析(三)的更多相关文章

  1. 一些有用的javascript实例分析(二)

    原文:一些有用的javascript实例分析(二) 5 求出数组中所有数字的和 window.onload = function () { var oBtn = document.getElement ...

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

    原文:一些有用的javascript实例分析(一) 本文以http://fgm.cc/learn/链接的实例索引为基础,可参见其实际效果.分析和整理了一些有用的javascript实例,相信对一些初学 ...

  3. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  4. Linux Kernel PANIC(三)--Soft Panic/Oops调试及实例分析【转】

    转自:https://blog.csdn.net/gatieme/article/details/73715860 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原 ...

  5. Linux I2C设备驱动编写(三)-实例分析AM3359

    TI-AM3359 I2C适配器实例分析 I2C Spec简述 特性: 兼容飞利浦I2C 2.1版本规格 支持标准模式(100K bits/s)和快速模式(400K bits/s) 多路接收.发送模式 ...

  6. 【转】Linux I2C设备驱动编写(三)-实例分析AM3359

    原文网址:http://www.cnblogs.com/biglucky/p/4059586.html TI-AM3359 I2C适配器实例分析 I2C Spec简述 特性: 兼容飞利浦I2C 2.1 ...

  7. [转载]JavaScript内存分析

    https://github.com/CN-Chrome-DevTools/CN-Chrome-DevTools/blob/master/md/Performance-Profiling/javasc ...

  8. javaScript高程第三版读书笔记

    看完<dom编程艺术>现在准备读进阶版的js高程了,由于篇幅较长,所以利用刚看完<dom编程艺术>学到的知识写了段JavaScript代码,来折叠各章的内容.并且应用到了< ...

  9. JavaScript中的三种弹出对话框

    学习过js的小伙伴会发现,我们在一些实例中用到了alert()方法.prompt()方法.prompt()方法,他们都是在屏幕上弹出一个对话框,并且在上面显示括号内的内容,使用这种方法使得页面的交互性 ...

随机推荐

  1. Oracle如何插入在特殊字符: &amp; 和 &#39; (各种解决方案)

    分类: Oracle Oracle中怎样插入特殊字符:& 和 ' (多种解决方式) 今天在导入一批数据到Oracle时,碰到了一个问题:Toad提示要给一个自己定义变量AMP赋值,一開始我非常 ...

  2. [ACM] HDU 3395 Special Fish (最大重量二分图匹配,KM算法)

    Special Fish Problem Description There is a kind of special fish in the East Lake where is closed to ...

  3. sails中文文档地址

    http://sailsdoc.swift.ren/ Sails.js是一个Web框架,可以于轻松构建自定义,企业级Node.js Apps.它在设计上类似于像Ruby on Rails的MVC架构的 ...

  4. iOS 8 新特性

    这篇文章会介绍iOS8开发相关的主要特性. App 插件 通过支持插件,iOS8让我们可以系统指定的区域进行扩展,也就是为用户的特定需求提供自定义的方法.例如:可以通过App插件帮助用户分享他们的内容 ...

  5. 【转】Directx11 SDK文档

    原文地址:http://blog.csdn.net/cmt100/article/details/6343274 总结 这是一个初步的教程.我们将通过必要的步骤来创建一个Win32 Applicati ...

  6. 如何使用SQLite数据库 匹配一个字符串的子串?

    select * from table_name where 字符串 like '%'||列名||'%'

  7. NYOJ 14 场地安排

    /* 中国标题的含义: 中国的翻译: 标题效果:寻求预定场地的最大数量,只有一个活动可以安排时间 解决问题的思路:然后使用结构数.之后再构建一个排序,排序结束时间活动.然后基于开始时间为大于一个事件的 ...

  8. FlowLayoutPanel 内的控件怎么调换顺序?

    lowLayoutPanel1.Controls.SetChildIndex("flowLayoutPanel中的控件",顺序索引)

  9. linux下串口调试工具/串口终端推荐: picocom

    对于picocom, kermit, minicom, picocom 最简单易用,也全然符合我的使用需求. 安装(mint / ubuntu): $ sudo apt-get install pic ...

  10. Swift学习 --- 2.3和字符串

    1.创建一个空字符串,并通过推理的字符串是空的 <span style="font-size:18px;"> var str = "" var st ...