五指前端

2012-0512

回到顶部按钮

回到顶部按钮在网页中比较常用到，下面是一个回到顶部按钮的示例。用了缓动效果。功能算比较实用的。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#btn1{ position:fixed; bottom:10px; right:5px;}
</style>
<script type="text/javascript">
window.onload=function()
{
	var oBtn=document.getElementById('btn1');
	var bSys=true;
	var timer=null;
	//检测用户是否拖动了滚动条
	window.onscroll=function()
	{
		if(!bSys)	//如果用户在回去时拖动了滚动条则删除定时器
		{
			clearInterval(timer);
		}
		bSys=false;
	}
	oBtn.onclick=function()
	{
		timer=setInterval(function(){
			var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
			var iSpeed=Math.floor(-scrollTop/8);
			if(scrollTop==0)
			{
				clearInterval(timer);
			}
			bSys=true;
			document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed;
		},30)
	}
}
</script>
</head>
 
<body style="height:2000px;">
<input type="button" value="回到顶部" id="btn1" />
<h1>回到顶部按钮</h1><br />
</body>
</html>

标签：javascript

2012-0510

js取模（求余数）隔行变色

添加评论[作者：小鹰分类：js&jQuery ]

用js取模（求余数）方法，做隔行变色。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js取模隔行变色</title>
<script type="text/javascript">
window.onload=function()
{
	var oUl=document.getElementById('ul1');
	var aLi=oUl.getElementsByTagName('li');
 
	for(var i=0; i< aLi .length; i++)
	{
		if(i%2==0)  //取模 求余数
		{
			aLi[i].style.background='red';
		}
	}
}
</script>
</script></head>
<body>
<ul id="ul1">
	<li>webtall</li>
    <li>webtall</li>
    <li>webtall</li>
    <li>webtall</li>
    <li>webtall</li>
</ul>
</body>
</html>

标签：javascript

2012-0510

js如何获取系统时间

添加评论[作者：小鹰分类：js&jQuery ]

js获取系统时间，用到的是Date对象的各种方法。首先需要new一个Date对象出来，之后就可以用Date的方法。下面是一个小示例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>五指前端</title>
<script type="text/javascript">
window.onload=function()
{
	var oDate=new Date();
	var text=oDate.getFullYear()+'年'+oDate.getMonth()+'月'+oDate.getDay()+'日'+oDate.getHours()+'时'+oDate.getMinutes()+'分'+oDate.getSeconds()+'秒';
	alert(text);
}
</script>
</head>
<body>
</body>
</html>

标签：javascript

2012-0510

js用currentStyle和getComputedStyle获取css样式（非行间）

添加评论[作者：小鹰分类：js&jQuery ]

用js的style属性可以获得html标签的样式，但是不能获取非行间样式。那么怎么用js获取css的非行间样式呢？在IE下可以用currentStyle，而在火狐下面我们需要用到getComputedStyle。下面是一个小示例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js用currentStyle和getComputedStyle获取css样式</title>
<style type="text/css">
#div1{width:100px; height:100px; background:red;}
</style>
<script type="text/javascript">
function getStyle(obj, attr)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[attr];
	}
	else
	{
		return getComputedStyle(obj,false)[attr];
	}
}
window.onload=function()
{
	var oDiv=document.getElementById('div1');
	alert(getStyle(oDiv,'width'))
}
</script>
</head>
 
<body>
<div id="div1"></div>
</body>
</html>

标签：javascript

2012-0509

js定时器setInterval、setTimeout的使用

添加评论[作者：小鹰分类：js&jQuery ]

js定时器的使用，
开启定时器setInterval（间隔型）、setTimeout（延时型）;
关闭定时器clearInterval、clearTimeout;
定时器使用小案例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>五指前端</title>
<style type="text/css">
#div1{width:200px; height:100px; background-color:#ccc;}
</style>
<script type="text/javascript">
function show()
{
	alert('定时器开启了');
}
window.onload=function()
{
	var oBtn1=document.getElementById('btn1');
	var oBtn2=document.getElementById('btn2');
	var timer=null;  //声明一个时间变量
 
	oBtn1.onclick=function()
	{
		timer=setInterval(show,2000); //开启定时器 间隔2秒执行show函数 同时赋给之前声明好的时间变量timer
	}
	oBtn2.onclick=function()
	{
		clearInterval(timer);   //关闭定时器timer
	}
}
</script>
</head>
 
<body>
<input type="button" id="btn1" value="开启定时器" /><input type="button" id="btn2" value="关闭定时器" />
</body>
</html>

标签：javascript

2012-0509

JS中innerHTML属性的使用

添加评论[作者：小鹰分类：js&jQuery ]

innerHTML属性用来插入或读取HTML元素的内容。innerHTML支持文本，同时支持html代码。
下面是一个innerHTML的简单运用示例

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1{width:200px; height:100px; background-color:#ccc;}
</style>
<script type="text/javascript">
window.onload=function()
{
	var oBtn=document.getElementById('btn1');
	var oText=document.getElementById('text1');
	var oDiv=document.getElementById('div1');
 
	oBtn.onclick=function()
	{
		oDiv.innerHTML+=oText.value;
		oText.value='';
	}
 
}
</script>
</head>
 
<body>
<input type="text" id="text1"  /><input type="button" id="btn1" value="设置" />
<div id="div1"></div>
</body>
</html>

标签：javascript

2012-0509

用js模拟鼠标点击事件

添加评论[作者：小鹰分类：js&jQuery ]

在工作中遇到一个需要用js模拟鼠标点击事件。主要用到了js中的onclick事件。其中ie跟ff有异同。需要做兼容才行。

<script type=”text/javascript”>
function autoclick(page){
  var ie=navigator.appName==”Microsoft Internet Explorer” ?true : false; 
    if(ie) 
      { 
             document.getElementById(page).click();  
         }//IE的处理 
      else{ 
         var a=document.createEvent(“MouseEvents”);//FF的处理 
      a.initEvent(“click”, true, true);  
       document.getElementById(page).dispatchEvent(a); 
     }
}
window.onload=function()
{
 autoclick(“page2″);//传参数
}
</script>