###一、基礎
- 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>