js一些案例的使用-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

1 延迟提示框的使用

方式一：

<!DOCTYPE html>
<html>
<head>

	<title>延迟提示框的使用1</title>
	<style>
		#div1{
			background:red;
			width:200px;
			height:30px;

		}
		#div2{
			background:#ccc;
			width:150px;
			height:20px;
			margin:10px;
			display:none;
		}
	</style>
		
	<script>
		window.onload=function(){
			var div1=document.getElementById("div1");
			var div2=document.getElementById("div2");
			var timeout=null;

			div1.onmouseover=function(){
				div2.style.display='block';
				clearTimeout(timeout);
			}

			div1.onmouseout=function(){
				timeout=setTimeout(function(){
					div2.style.display='none';
				},500);//延迟500毫秒 关闭弹框
			}
			
			div2.onmouseover=function(){
				div2.style.display='block';
				clearTimeout(timeout);
			}

			div2.onmouseout=function(){
				timeout=setTimeout(function(){
					div2.style.display='none';
				},500);//延迟500毫秒关闭
				
			}
		}
	</script>
</head>

<body>
	<div id="div1"></div>
	<div id="div2"></div>
</body>
</html>

方式二：

<!DOCTYPE html>
<html>
<head>

	<title>延迟提示框的使用1</title>
	<style>
		#div1{
			background:red;
			width:200px;
			height:30px;

		}
		#div2{
			background:#ccc;
			width:150px;
			height:20px;
			margin:10px;
			display:none;
		}
	</style>
		
	<script>
		window.onload=function(){
			var div1=document.getElementById("div1");
			var div2=document.getElementById("div2");
			var timeout=null;

			function show(){
				div2.style.display='block';
				clearTimeout(timeout);
			}
			function hide(){
				timeout=setTimeout(function(){
					div2.style.display='none';
				},500);//延迟500毫秒 关闭弹框
			}

			div1.onmouseover=show;
			div1.onmouseout=hide;			
			div2.onmouseover=show;
			div2.onmouseout=hide;
		}
	</script>
</head>

<body>
	<div id="div1"></div>
	<div id="div2"></div>
</body>
</html>

2 定时器的使用

<!DOCTYPE html>
<html>
<head>
	<title>定时器的使用</title>
	<script>
		function save(){
			alert("aaaa");
		}
		//定时器函数
		window.onload = function(){
			var btn1=document.getElementById("btn1");
			var btn2=document.getElementById("btn2");
			var timeout=null; //记录当前定时器名称
			btn1.onclick=function(){
				timeout=setInterval(save,5000);
			}
			btn2.onclick=function(){
				clearTimeout(timeout);
			}
		}
	</script>
</head>

<body>
	<button id="btn1">开启定时器</button>
	<button id="btn2">关闭定时器</button>
</body>
</html>

3 移动

<!DOCTYPE html>
<html>
<head>

	<title>向右移动</title>
	<style>
		#div1{
			background:red;
			width:100px;
			height:100px;
			position:absolute;
			left:0px;
			margin-top:10px;
		}
	</style>	
	<script type="text/javascript">
		window.onload=function(){
			var btn1 = document.getElementById("btn1");
			var div1 = document.getElementById("div1");
			var btn2 = document.getElementById("btn2");

			var iSpeed=3;//设置速度
			var timer=null//记录当前循环对象

			btn1.onclick=function(){
				//alert(div1.offsetLeft); //当前div据右边多少像素 没有px单位 就是数值
				
				//设置循环函数
				timer=setInterval(function(){
					var div_left=div1.offsetLeft+iSpeed+"px";//当前像素值
					div1.style.left=div_left;
				},50);
			}

			btn2.onclick=function(){
				clearTimeout(timer);
			}
		}
	</script>
</head>

<body>
	<button id="btn1">向右移动</button> 
	<button id="btn2">暂停移动</button>
	<div id="div1"></div>
</body>
</html>

常用使用

        offsetLeft  //左边距
	offsetTop   //上边距
	offsetWidth //宽度
	offsetHeight //高度

4 无缝滚动

<!DOCTYPE html>
<html>
<head>

	<title>无缝移动</title>
	<style>
		#div1{
			background:red;
			width:100px;
			height:100px;
			position:absolute;
			left:0px;
			margin-top:10px;
			overflow:hidden;
		}
		#udiv ul{
			left:0px;
			position:absolute;
			overflow:hidden;
		}
		/*必须绝对定位*/
		img{
			width:200px;
			height:200px;
			float:left;
		}
	</style>	
	<script type="text/javascript">
	
		window.onload=function(){
			var udiv=document.getElementById("udiv");
			var oUl=udiv.getElementsByTagName('ul')[0];
			var oLi=oUl.getElementsByTagName('li');

			var aleft=document.getElementById("aleft");
			var aright=document.getElementById("aright");

			var ispeed=-3;
			var timer=null //记录循环名称

			oUl.innerHTML+=oUl.innerHTML;//让他的html变为2倍
			oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';//设置总宽度为li的长度

			timer=setInterval(function(){
				oUl.style.left=oUl.offsetLeft+ispeed+'px';
				//alert(oUl.offsetLeft);
				if(oUl.offsetLeft<-oUl.offsetWidth/2){
					oUl.style.left='0px';
				}
				else if(oUl.offsetLeft>0){
					oUl.style.left=-oUl.offsetWidth/2 +'px';
				}
			},30);
			
			//向左边移动
			aleft.onclick=function(){
				ispeed=-3;
			}

			//向右边移动
			aright.onclick=function(){
				ispeed=3;
			}

			//鼠标移入暂停
			oUl.onmouseover=function(){
				clearTimeout(timer);
			}

			//鼠标移出移动
			oUl.onmouseout=function(){
				timer=setInterval(function(){
					oUl.style.left=oUl.offsetLeft+ispeed+'px';
					//alert(oUl.offsetLeft);
					if(oUl.offsetLeft<-oUl.offsetWidth/2){
						oUl.style.left='0px';
					}
					else if(oUl.offsetLeft>0){
						oUl.style.left=-oUl.offsetWidth/2 +'px';
					}
				},30);
			}
		}
	</script>
</head>

<body>
	<a href="javascript:void(0)" id="aleft" >向左</a>
	<a href="javascript:void(0)" id="aright">向右</a>
	<div style="float:left;overflow:hidden" id="udiv">
		<ul>
			<li><img src="img/1.jpg"/></li>
			<li><img src="img/2.jpg"/></li>
			<li><img src="img/3.jpg"/></li>
			<li><img src="img/4.jpg"/></li>
			<li><img src="img/5.jpg"/></li>
		</ul>
	</div>
	
</body>
</html>

转载于:https://my.oschina.net/u/3677987/blog/1624230