js一些案例的使用

時間 2019-12-17

原文原文鏈接

1 延遲提示框的使用

方式一：javascript

<!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>

方式二：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>

經常使用使用java

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>

1. Powercli的一些使用案例
2. 一些js例子
3. JVM的一些案例
4. promise的一些應用案例
5. js的案例
6. 經常使用的一些js方法
7. swiper使用案例一
8. 一些小案例_C#
9. 一些算法案例
10. Hadoop一些數據案例
更多相關文章...
• TortoiseSVN 使用教程 - SVN 教程
• Docker 容器使用 - Docker教程
• 常用的分佈式事務解決方案
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。