javascript-菜鳥—Javascript學習(1)

###一、基礎

  • 1.javascript 它是運行在網頁裏的,和普通的html代碼運行的順序
    是相同的
  • 2.在網頁的任何地方都可以加上腳本,腳本必須放在
<script>
</script>
  • 3.弱類型語言

  • 4.var 變量; 聲明變量

  • 5.數組:
    var 數組名=new Array();

  • 6.在腳本里取得任何東西的長度都是 .length

  • 7.函數
    function 函數名(){

}

###二、需知

  • 1、在腳本里要通過變量來控制網頁標籤
    document.getElementById(“id屬性的值”);
    後2種得到的是數組
    document.getElementsByTagName(“標籤名字”)
    document.getElementsByName(“name屬性的值”)

  • 2、通過代表標籤的變量去獲取或者改變標籤的內容或屬性
    變量.value 有value屬性的標籤
    變量.innerHTML 普通標籤的內容
    變量.setAttribute(“屬性名”,值);
    變量.style.樣式屬性=值

  • 3、綁定事件
    在需要事件的標籤上寫 事件名字=“腳本代碼”
    onclick
    onmouseover
    onmouseout
    onmousemove
    onmousedown
    onmouseup
    onkeyup
    onkeydown

  • 4、常用的函數
    alert(內容); 彈出對話框

###三、樣例
1.點擊按鈕消失出現
這裏寫圖片描述

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	ul{
		list-style:none;
		margin:0px;
		padding:0px;
		display:none;
	}
	li{
		width:100px;
		height:40px;
		line-height:40px;
		text-align:center;
		background-color:#ff0;
		color:#00f;
		margin-bottom:10px;
		
	}
	</style>
	<script type="text/javascript">
	function aaa(){
		var a=document.getElementById("t1");
		if(a.style.display=='none'){
			a.style.display="block";
		}else{
			a.style.display="none";
		}
	}
	</script>
</head>
<body>
	<button onclick="aaa()">選中</button>
	<ul id="t1">
		<li>菜單1</li>
		<li>菜單2</li>
		<li>菜單3</li>
		<li>菜單4</li>
	</ul>
</body>
</html>

2.馬兒賽跑
這裏寫圖片描述

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	.a1{
		width:1000px;
		height:500px;
		background-color:#0f0;
		position:absolute;/*絕對定位*/
		right:0px;
		top:0px;
	}
	.a2{
		width:100%;
		height:100px;
	}
	.a3{
		background-color:rgb(223,255,34);
	}
	.a4{
		position:absolute;
		left:0px;
	}
	</style>
	
</head>
<body onclick="aaa()">
	<div class="a1">
		<div class="a2"><img src="images/ma.gif"  class="a4" /></div>
		<div class="a2 a3"><img src="images/ma.gif"  class="a4" /></div>
		<div class="a2"><img src="images/ma.gif"  class="a4" /></div>
		<div class="a2 a3"><img src="images/ma.gif"  class="a4" /></div>
		<div class="a2"><img src="images/ma.gif"  class="a4" /></div>
	</div>
	<div id="t1" style="display:none;">
		<img src="images/e805563357a1c6bb55eaded135edaca6.gif" />
		<h1 id="t2"></h1>
	</div>
	<script type="text/javascript">
	var x=[0,0,0,0,0];
	function aaa(){
		var a=document.getElementsByTagName("img");//得到所有的圖片,是一個數組
		for(var i=0;i<5;i++){
			x[i]=x[i]+Math.random()*10;
			a[i].style.left=x[i]+"px";
			if(x[i]>=1000-128){
				window.clearInterval(th);
				var b=document.getElementById("t1");
				var c=document.getElementById("t2");
				t1.style.display="block";
				c.innerHTML="第"+(i+1)+"匹馬贏了";
			}
		}
		
	}
	var th=window.setInterval("aaa()",50);
	
	</script>
</body>
</html>

10匹馬

<!DOCTYPE HTML>
<html lang="en-US">
	<head>
		<meta charset="utf-8">
		<title>多馬競賽</title>
		<style type="text/css">
			.a{
				width:1000px;
				height:600px;
				background-color:rgb(18,129,10);
			    position:absolute;
                margin:0px;
				padding:0px;
				right:0px;
				top:0px;
			}
			.a1{
				width:100%;
				height:60px;
			}
			.a2{
				background-color:rgb(71,190,85);
			}
		    .ma{
				position:absolute;
				left:0px;
				height:60px;
			}
		</style>
		
	</head>
	<body>
		<div class="a">
			<div class="a1"><img src="images/ma.gif" class="ma"/></div>
			<div class="a1 a2"><img src="images/ma.gif" class="ma"/></div>
			<div class="a1"><img src="images/ma.gif" class="ma"/></div>
			<div class="a1 a2"><img src="images/ma.gif" class="ma"/></div>
			<div class="a1"><img src="images/ma.gif" class="ma"/></div>
			<div class="a1 a2"><img src="images/ma.gif" class="ma"/></div>
			<div class="a1"><img src="images/ma.gif" class="ma"/></div>
			<div class="a1 a2"><img src="images/ma.gif" class="ma"/></div>
			<div class="a1"><img src="images/ma.gif" class="ma"/></div>
			<div class="a1 a2"><img src="images/ma.gif" class="ma"/></div>	
		</div>
		<div id="t1" style="display:none;">
			<img src="images/e805563357a1c6bb55eaded135edaca6.gif"/>
			<h1 id="t2"></h1>
		</div>
		<script type="text/javascript">
			var x=[0,0,0,0,0,0,0,0,0,0];
			function aaa(){
				var a=document.getElementsByTagName("img");//get 所有圖片
				for(var i=0;i<10;i++)
				{
					x[i]=x[i]+Math.random()*10;
					a[i].style.left=x[i]+"px";
					if(x[i]>=1000-96){
						window.clearInterval(th);
						var b=document.getElementById("t1");
						var c=document.getElementById("t2");
						t1.style.display="block";
						c.innerHTML="第"+(i+1)+"匹馬勝出!"
					}
				}
			}
			var th=window.setInterval("aaa()",50);
		</script>
	</body>
</html>

3.小球亂撞
這裏寫圖片描述

<!DOCTYPE HTML>
<html>
	<head>
		<style type="text/css">
		
		     .body{
				background-color:rgb(207,252,224);
				width:1000px;
				height:600px;
				border:3px solid rgb(24,24,24);
			 }
			 .circle{
					width:50px;;
					height:50px;
					background-color:rgb(100,23,155);
					border-radius:25px;
					left:0px;
					top:0px;
					position:absolute;
					box-shadow:5px 5px 5px rgb(107,95,95);
			 }
			 .btn{
				width:100px;
				height:50px;
				background-color:rgb(50,100,100);
				box-shadow:5px 5px 5px rgb(107,95,95)
			 }
		</style>
		
	</head>
	<body>

		<div class="body">
			<div class="circle" name="t1"></div>
			<div class="circle" name="t1" style="background-color:red;"></div>
			<div class="circle" name="t1" style="background-color:green;"></div>
			<div class="circle" name="t1" style="background-color:gray;"></div>
			<div class="circle" name="t1" style="background-color:#0ff;"></div>
			<div class="circle" name="t1" style="background-color:#e0a;"></div>
			<div class="circle" name="t1" style="background-color:#d5e;"></div>
			<div class="circle" name="t1" style="background-color:#a3a;"></div>
			<div class="circle" name="t1" style="background-color:#d5b;"></div>
			<div class="circle" name="t1" style="background-color:#ccc;"></div>
		</div>
			    <button onclick="startgun()" class="btn">開始滾動</button>
		<script type="text/javascript">
			var x=[0,0,0,0,0,0,0,0,0,0];
			var xstep=[15,15,5,15,15,15,15,65,5,5];
			var y=[0,0,0,0,0,0,0,0,0,0];
			var ystep=[15,15,5,15,5,15,5,15,5,5];
			var a=document.getElementsByName("t1");
			for(var i=0;i<10;i++){
			    x[i]=Math.random()*200;
				y[i]=Math.random()*600;
				a[i].style.left=xstep[i]+"px";
				a[i].style.top=ystep[i]+"px";
			}
			function aaa(){
			    //var a=document.getElementsByName("t1");
				for(var i=0;i<10;i++){
					x[i]=x[i]+xstep[i];
					a[i].style.left=x[i]+"px";
					y[i]=y[i]+ystep[i];
					a[i].style.top=y[i]+"px";
				}
				for(var j=0;j<10;j++){
					if(x[j]>=950)
					{   
						xstep[j]=-10;
						
					}
					if(x[j]<=0){
						xstep[j]=10;
					}
					
					if(y[j]>=550)
					{   
						ystep[j]=-10;
					}
					if(y[j]<=0)
					{
						ystep[j]=10;
					}
				}
			}
			function startgun(){
			var th=window.setInterval("aaa()",50);
			}
		</script>
	</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章