目錄
1）在js中使用數組：
2）JS常用事件：
實戰一：小圖換大圖（滑鼠移入小圖，上面顯示該小圖的大圖）
實戰二：一次性使用兩種搜尋引擎進行搜尋：
BOM浏覽器對象模型：
1）window對象：
實戰三：簡易的表
window對象:指的是整個浏覽器對象
(1)直接擷取元素的方式：
（2）擷取父節點、子節點、兄弟節點：
實戰項目：制作一個金币點選+++：
1）在js中使用數組：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function text(){
var arr=new Array();
arr[0]=12;
arr[2]="two";
alert(arr.length);//3
alert(arr[1]);//undifine
}
function text1(){
var arr=new Array(3);
console.log(arr.length);//長度為3
var arr1=new Array(10,20,30,40);//長度為4的數組這是存儲元素
console.log(arr1.length);
}
function text2(){
var arr=new Array("A",5,2);
arr=arr.concat("ok");//數組添加
console.log(arr);
// arr.fill("abc");//填充數組，所有的數都變為abc
// console.log(arr);
var index2=arr.indexOf(2);//查找元素2所在的索引
console.log(index2);
var str=arr.join("-");//轉為string類型，用-分割，如果括号裡不寫用,分割
console.log(str);
console.log(arr.sort());//排序
console.log(arr.pop());//删除最後一個數,成功傳回删除的數
console.log(arr)//檢視删除成功與否
}
function text3(){
var arr=[1,2,3,4,"a","b"];
var divEle=document.getElementById("div1");
// for(var i=0;i<arr.length;i++){//數組的第一種周遊
// divEle.innerHTML+=arr[i];
// }
for(var i in arr){//第二種周遊
divEle.innerHTML+=arr[i];
}
}
function text4(){
//isNaN()判斷 是不是 不是 數字， （不是數字？）不是為true 是數字為false
var a=123;//false;
a="123abc";//parseInt 轉為123
a="abc123";//Nan
var b=parseInt(a);
console.log(b);
console.log(isNaN(a));
}
function text5(){
var a="alert('abc');";//普通的字元串
eval(a);//eval函數可以把字元串當js語言執行
}
</script>
</head>
<body>
<input type="button" value="btn" onclick="text()"/>
<input type="button" value="btn2"onclick="text1()" />
<input type="button" value="concat" onclick="text2()" />
<input type="button" value="bt3" onclick="text3()" />
<input type="button" value="bt4" onclick="text4()" />
<input type="button" value="bte" onclick="text5()" />
<div id="div1"></div>
</body>
</html>
2）JS常用事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function text(){
document.getElementById("tx").value="不能改變";
}
function text1(){
document.getElementById("div1").innerHTML="放上去就會改變";
}
function text2(){
document.getElementById("div1").innerHTML="滑鼠移走就會發生改變";
}
function text3(){
document.getElementById("div2").innerHTML="鍵盤按下";
}
function text4(){
doucument.getElementById("div2").innerHTML="鍵盤談起";
}
</script>
</head>
<body>
<!--onchange改變的時候調用函數-->
<input type="text" id="tx"value="不能改變" onchange="text()" />
<!--onmouseover滑鼠放上去會改變 onmouseout滑鼠移走會發送改變-->
<input type="button" value="放上去div會發生改變" onmouseover="text1()"onmouseout="text2()" />
<div id="div1"></div>
<!--當鍵盤按下是調用函數-->
<input type="text" value="" onkeydown="text3()" />
<div id="div2"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function text(){
alert("輕按兩下哦");
}
function ppd(){
var val=document.getElementById("txname").value;//擷取文本框的value
var divEle=document.getElementById("div1");
if(val==""){
divEle.innerHTML="姓名不能為空!";
}else{
divEle.innerHTML="ok";
}
}
</script>
</head>
<body>
<!--輕按兩下事件-->
<input type="button" value="按鈕" ondblclick="text()" />
<form action="#" method="post">
<!--聚焦函數，當焦點不在該位置，便調用該函數-->
<input type="text" id="txname"name="txname" value="" onblur="ppd()" />
<div id="div1"></div>
</form>
</body>
</html>
實戰一：小圖換大圖（滑鼠移入小圖，上面顯示該小圖的大圖）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function change(obj,url){
document.getElementById("bigimg").src=url;
obj.style.outline="1px solid red";
}
function back(obj){
document.getElementById("bigimg").src="/jsxx/img/show1_big.jpg";
obj.style.outline="none";
}
</script>
</head>
<body>
<table>
<tr >
<td colspan="5"><img src="/jsxx/img/show1_big.jpg" id="bigimg" /></td>
</tr>
<tr>
<td><img src="/jsxx/img/show1.jpg" onmouseover="change(this,'/jsxx/img/show1_big.jpg')" onmouseout="back(this)"/></td>
<td><img src="/jsxx/img/show2.jpg" onmouseover="change(this,'/jsxx/img/show2_big.jpg')" onmouseout="back(this)"/></td>
<td><img src="/jsxx/img/show3.jpg" onmouseover="change(this,'/jsxx/img/show3_big.jpg')" onmouseout="back(this)"/></td>
<td><img src="/jsxx/img/show4.jpg" onmouseover="change(this,'/jsxx/img/show4_big.jpg')" onmouseout="back(this)"/></td>
<td><img src="/jsxx/img/show5.jpg" onmouseover="change(this,'/jsxx/img/show5_big.jpg')" onmouseout="back(this)"/></td>
</tr>
</table>
</body>
</html>
實戰二：一次性使用兩種搜尋引擎進行搜尋：
特此聲明:這裡使用了百度浏覽器的搜尋引擎和 360的搜尋引擎進行搜尋（僅供使用學習）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
iframe{
width:48%;height:600px;
}
</style>
<script>
function text(){
var tx=document.getElementById("search").value;//内容
document.getElementById("hid").value=tx;//給第一個form的hidden
document.getElementById("hid1").value=tx;//第二個form的hidden
document.baidufrm.submit();
document.qihufrm.submit();
}
</script>
</head>
<body>
<input type="text" id="search" value="" />
<input type="button"id="btn" value="搜尋" onclick="text()" />
<form action="http://baidu.com/s"method="get" target="baidu"name="baidufrm">
<input type="hidden"id="hid"name="wd" value="" />
</form>
<form action="http://www.so.com/s"method="get"target="qihu"name="qihufrm">
<input type="hidden" id="hid1"name="q" value="" />
</form>
<iframe src="" name="baidu" frame></iframe>
<iframe src="" name="qihu" frame></iframe>
</body>
</html>
BOM浏覽器對象模型：
1）window對象：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function text(){
alert(window.innerHeight+"|"+window.innerWidth);
}
function text2(){
window.prompt("你說啥?");//彈出來一個可以輸入的框，可以确定和取消
}
function text3(){
window.open("text.html");//打開一個頁面
}
function text4(){
window.setInterval(function(){
alert("1秒鐘我就彈出來一次煩死你");
},1000)
}
function text5(){
window.setTimeout(function(){
alert("1秒中之後我隻彈出來一次");
},1000)
}
</script>
</head>
<body>
<input type="button" value="bt1" onclick="text()" />
<input type="button"value="bt2"onclick="text2()" />
<input type="button" value="bt3"onclick="text3()" />
<input type="button" value="bt4"onclick="text4()" />
<input type="button" value="bt5"onclick="text5()" />
</body>
</html>
實戰三：簡易的表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function text6(){
window.setInterval(function(){
var d=new Date();
var year=d.getFullYear();
var mon=d.getMonth()+1;
var dar=d.getDate();
var hour=d.getHours();
var min=d.getMinutes();
var s=d.getSeconds();
var t=year+"年"+mon+"月"+dar+"日"+hour+"時"+min+"分"+s+"秒";
document.getElementById("div1").innerHTML=t;
},1000);
}
</script>
</head>
<body onload="text6()">
<div id="div1"></div>
</body>
</html>
window對象:指的是整個浏覽器對象
(1)window.location 對象用于獲得目前頁面的位址 (URL)，并把浏覽器重定向到新的頁面
(2)window.screen 對象包含有關使用者螢幕的資訊
(3)window.navigator 對象包含有關通路者浏覽器的資訊。
(4)window.history 對象包含浏覽器的曆史
(5)window.document對象，整個文檔
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test1(){
console.log(location.href);
console.log("端口:"+window.location.port);
console.log("主機名稱:"+location.hostname);
console.log("協定:"+location.protocol);
location.href="http://www.baidu.com" target="_blank" rel="external nofollow" ;//很重要
}
function test2(){
console.log("可用的高"+screen.availHeight);
console.log("可用的寬"+screen.availWidth);
console.log("整個螢幕的寬和高:"+screen.height+"------- "+screen.width)
}
function test3(){
console.log("浏覽器代号:"+navigator.appCodeName);
console.log("浏覽器名稱："+navigator.appName);
console.log("使用者代理:"+navigator.userAgent );
}
function test4(){
}
function test5(){
//history.forward();
history.go(1);
}
function test6(){
//正而八經的寫法
var divEle=window.document.getElementById("div1");
divEle.innerHTML="哈喇";
}
</script>
</head>
<body>
<input type="button" id="" value="location對象" onclick="test1()" />
<input type="button" id="" value="screen對象" onclick="test2()" />
<input type="button" id="" value="navigator對象" onclick="test3()" />
<input type="button" id="" value="history對象" onclick="test4()"/>
<input type="button" id="" value="前進" onclick="test5()" />
<input type="button" id="" value="document" onclick="test6()" />
<p><a href="index.html" target="_blank" rel="external nofollow" >首頁</a></p>
<div id="div1">
</div>
</body>
</html>
(1)直接擷取元素的方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function text(){
var btEle=document.getElementById("bt1");//獲得唯一id元素
//通過Name擷取元素 這個元素是一個數組
var checkEle=document.getElementsByName("choose");
console.log(checkEle.length);
//标簽名稱獲得元素 這個元素時一個數組
var tagEle=document.getElementsByTagName("input");
console.log(tagEle.length);
//通過标簽class獲得元素
var classEle=document.getElementsByClassName("clazz");
console.log(classEle[0]);
}
</script>
</head>
<body>
<div id="div1" class="clazz">
<input type="button" id="bt1"name="bt1" onclick="text()" />
<input type="checkbox" id="choose" name="choose" value="play" />玩
<input type="checkbox" id="choose1" name="choose" value="drink"/>喝
</div>
</body>
</html>
（2）擷取父節點、子節點、兄弟節點：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test1(){
var spanEle=document.getElementById("span1");
//通過子節點獲得父節點的元素
var fuEle=spanEle.parentNode;
var fuEle1=spanEle.parentElement;
alert(fuEle1);
//通過父節點獲得子節點
var fuElement=document.getElementById("div1");
var len=fuElement.childNodes.length;//div的所有東西 包括空格 一段一段
alert(len);//15
//兄弟節點
alert(spanEle.nextSibling);
alert(spanEle.previousSibling);
alert(spanEle.firstSibling);
}
</script>
</head>
<body>
<input type="button" id="" value="間接擷取" onclick="test1()"/>
<div id="div1">
<p>p段落</p>
<span> span2</span><br />
<span id="span1"> span1</span><br />
<span> span3</span><br />
<span> span4</span><br />
</div>
</body>
</html>
實戰項目：制作一個金币點選+++：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
width:100px;height:200px;
position:absolute;
left:200px;
top:200px;
}
</style>
<script>
function text(){
var imgEle=document.createElement("img");
imgEle.src="../img/gold.gif";
var divEle=document.getElementById("div1");
divEle.appendChild(imgEle);
imgEle.style.opacity=1;
var iid=window.setInterval(function(){
imgEle.style.opacity-=0.1;
imgEle.style.top=(imgEle.offsetTop-2)+"px";
if(imgEle.style.opacity==0.1){
window.clearInterval(iid);
divEle.removeChild(imgEle);
}
},150);
}
</script>
</head>
<body>
<input type="button" value="點選金币+1" onclick="text()" />
<div id="div1"></div>
</body>
</html>