几个简单的JS小东西
一、CSS样式提取
<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<style>
#div1 {width:200px; height:200px; background:red;}
</style>
<title>css样式提取</title>
<script>
window.onload=function()
{
var oDiv=document.getElementById('div1');
/* //IE
alert(oDiv.currentStyle.width);
//FF Chrome
alert(getComputedStyle(oDiv, null).width);
*/
if(oDiv.currentStyle)
{
//IE 非空的
alert(oDiv.currentStyle.width);
}
else
{
//FF
alert(getComputedStyle(oDiv, null).width);
}
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
网页截图：
二、开启与关闭定时器
<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<title>csort排序</title>
<script>
window.onload=function()
{
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var timer=null;
oBtn1.onclick=function()
{
timer=setInterval(function(){
alert('a');
},1000);
}
oBtn2.onclick=function()
{
clearInterval(timer);
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="开启"/>
<input id="btn2" type="button" value="关闭"/>
</body>
</html>
三、数字时钟
<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<title>数字时钟</title>
<script>
function toD(n)
{
if(n<10)
{
return '0'+n;
}
else
{
return ''+n;
}
}
window.onload=function()
{
var aImg=document.getElementsByTagName('img');
function tick(){
var oDate=new Date();
var str=toD(oDate.getHours())+toD(oDate.getMinutes())+toD(oDate.getSeconds());
for(i=0;i<aImg.length;i++)
{
aImg[i].src='img/'+str[i]+'.png';
}
}
setInterval(tick,1000);
tick();
}
</script>
</head>
<body style="background:black; color:white; fontsize:100px;">
<img src="img/0.png"/>
<img src="img/0.png"/>
:
<img src="img/0.png"/>
<img src="img/0.png"/>
:
<img src="img/0.png"/>
<img src="img/0.png"/>
</body>
</html>
截图：
四、延时提示框
<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<title>延时提示框</title>
<style>
div {float:left; margin: 10px;}
#div1 {width:40px; height:40px; background: red; }
#div2 {width:200px; height:150px; background: blue; display: none;}
</style>
<script>
window.onload=function()
{
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var timer=null;
oDiv1.onmouseover=oDiv2.onmouseover=function()
{
clearTimeout(timer);
oDiv2.style.display='block';
}
oDiv1.onmouseout=oDiv2.onmouseout=function()
{
timer=setTimeout(function(){
oDiv2.style.display='none';
},500);
}
/*
oDiv2.onmouseover=function()
{
clearTimeout(timer);
}
oDiv2.onmouseout=function()
{
timer=setTimeout(function(){
oDiv2.style.display='none';
},500);
}
*/
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
五、无缝滚动
点击向左走、向右走按钮可以切换方向，鼠标移入时停止，移出时继续移动
<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<title>无缝滚动</title>
<style>
* {margin:0; padding:0;}
#div1 {width:800px; height:200px; margin:100px auto; position: relative; overflow: hidden; }
img {width:200px; height:200px;}
#div1 ul {position: absolute; left:0; top:0;}
#div1 ul li {float:left; list-style:none; width:200px; height:200px; }
</style>
<script>
window.onload=function()
{
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var timer=null;
var speed=2;
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
function move()
{
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left='0';
}
if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+speed+'px';
}
timer=setInterval(move,30)
oDiv.onmouseover=function()
{
clearInterval(timer);
}
oDiv.onmouseout=function()
{
timer=setInterval(move,30);
}
document.getElementsByTagName('a')[0].onclick=function()
{
speed=-2;
}
document.getElementsByTagName('a')[1].onclick=function()
{
speed=2;
}
}
</script>
</head>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
<ul>
<li><img src="img3/1.jpg"/></li>
<li><img src="img3/2.jpg"/></li>
<li><img src="img3/3.jpg"/></li>
<li><img src="img3/4.jpg"/></li>
</ul>
</div>
</body>
</html>