几个简单的JS小东西

前端技巧集锦

最新推荐文章于 2021-07-13 19:29:20 发布

最新推荐文章于 2021-07-13 19:29:20 发布 · 262 阅读

文章标签：

#javascript #ViewUI

前端专栏收录该内容

5 篇文章

订阅专栏

一、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>