第一節 this對象
this:事件源，對象本身
給對象綁定事件:
格式：對象.οnclick=函數名;注意：函數名後面不加括號
在綁定事件中，this是可以直接用的.this.parentNode就是獲得this的父節點
刪除標籤
注意:當想要刪除標籤的時候，必須找到這個對象的上級標籤（父節點）
第二節 星星案例(一)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>網頁標題</title>
<meta name="keywords" content="關鍵字列表" />
<meta name="description" content="網頁描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
#span1{
border:1px solid red;
width:100px;
display:inline-block;
height:20px;
overflow:hidden;
}
#span2{
display:inline-block;
width:0px;
height:20px;
}
</style>
<script type="text/javascript">
var count=0;//代表星星的個數
var dingshiqi;//定時器名字
var shijian=0;//時間
var gametime;//記錄遊戲時間定時器
//設置body的顏色
window.οnlοad=init;
function init(){
//document.body.bgColor="black";
}
//var dingshiqi=window.setInterval("star()",500);
//創建星星的函數
function star(){
//創建星星
var obj=document.createElement("img");
obj.src="images/xingxing.gif";
//設置星星的寬度
var w=Math.floor(Math.random()*(90-30+1))+30;
obj.width=w;
//設置隨即位置
//var x=e.clientX;//鼠標的x座標
//var y=e.clientY;//鼠標的y座標
var x=Math.floor(Math.random()*1300)+30;
var y=Math.floor(Math.random()*500)+30;
obj.style.position="absolute";
obj.style.top=y+"px";
obj.style.left=x+"px";
//把obj加到body中
document.body.appendChild(obj);
//給對象綁定事件
obj.οnclick=removestar;
//記錄星星個數
count++;
//調用函數告訴玩家有多少個星星
countxingxing();
//改變進度條
document.getElementById("span2").style.width=count*5+"px";
document.getElementById("span2").style.backgroundColor="red";
}
//刪除星星的函數
function removestar(){
this.parentNode.removeChild(this);
count--;
countxingxing();
}
//點擊開始遊戲的函數
function startxingxing(){
dingshiqi=window.setInterval("star()",500);
gametime=window.setInterval("youxishijian()",1000);
}
//暫停遊戲
function zanting(){
alert("暫停遊戲");
}
//星星個數
function countxingxing(){
var shu=document.getElementById("count");
if(count>20){
alert("遊戲結束");
window.clearInterval(dingshiqi);
window.clearInterval(gametime);
}
shu.innerHTML=count+"個星星";
}
//記錄遊戲時間
function youxishijian(){
var obj=document.getElementById("jishi");
shijian++;
obj.innerHTML="遊戲進行"+shijian+"秒";
}
</script>
</head>
<body>
<span id="count">0個星星</span>
<input type="button" value="點擊開始遊戲" οnclick="startxingxing()">
<input type="button" value="點擊暫停遊戲" οnclick="zanting()">
<span id="jishi">遊戲進行0秒</span>
<span id="span1"><span id="span2"></span></span>
</body>
</html> 第三節 星星案例(二)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>網頁標題</title>
<meta name="keywords" content="關鍵字列表" />
<meta name="description" content="網頁描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
#span1{
border:1px solid red;
width:100px;
display:inline-block;
height:20px;
overflow:hidden;
}
#span2{
display:inline-block;
width:0px;
height:20px;
}
</style>
<script type="text/javascript">
var count=0;//代表星星的個數
var dingshiqi;//定時器名字
var shijian=0;//時間
var gametime;//記錄遊戲時間定時器
//設置body的顏色
window.οnlοad=init;
function init(){
//document.body.bgColor="black";
}
//var dingshiqi=window.setInterval("star()",500);
//創建星星的函數
function star(){
//創建星星
var obj=document.createElement("img");
obj.src="images/xingxing.gif";
//設置星星的寬度
var w=Math.floor(Math.random()*(90-30+1))+30;
obj.width=w;
//設置隨即位置
//var x=e.clientX;//鼠標的x座標
//var y=e.clientY;//鼠標的y座標
var x=Math.floor(Math.random()*1300)+30;
var y=Math.floor(Math.random()*500)+30;
obj.style.position="absolute";
obj.style.top=y+"px";
obj.style.left=x+"px";
//把obj加到body中
document.body.appendChild(obj);
//給對象綁定事件
obj.οnclick=removestar;
//記錄星星個數
count++;
//調用函數告訴玩家有多少個星星
countxingxing();
//改變進度條
document.getElementById("span2").style.width=count*5+"px";
document.getElementById("span2").style.backgroundColor="red";
}
//刪除星星的函數
function removestar(){
this.parentNode.removeChild(this);
count--;
countxingxing();
}
//點擊開始遊戲的函數
function startxingxing(){
dingshiqi=window.setInterval("star()",500);
gametime=window.setInterval("youxishijian()",1000);
}
//暫停遊戲
function zanting(){
alert("暫停遊戲");
}
//星星個數
function countxingxing(){
var shu=document.getElementById("count");
if(count>20){
alert("遊戲結束");
window.clearInterval(dingshiqi);
window.clearInterval(gametime);
}
shu.innerHTML=count+"個星星";
}
//記錄遊戲時間
function youxishijian(){
var obj=document.getElementById("jishi");
shijian++;
obj.innerHTML="遊戲進行"+shijian+"秒";
}
</script>
</head>
<body>
<span id="count">0個星星</span>
<input type="button" value="點擊開始遊戲" οnclick="startxingxing()">
<input type="button" value="點擊暫停遊戲" οnclick="zanting()">
<span id="jishi">遊戲進行0秒</span>
<span id="span1"><span id="span2"></span></span>
</body>
</html>
第四節 圖片切換
Alert(“內容信息”);//彈出框
Prompt(“”);//讓用戶輸入內容,可以有個默認值
Prompt(“用戶輸入信息”,”默認值”);
var food=window.prompt("你吃了什麼");
alert(food);
var num=prompt((“你的考試成績是多少”，100);
if(num>=90){
document.write(“優秀”);
}else if(num>=80){
Document.write(“良好”);
}
comfirm();//獲得一個boolean值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>網頁標題</title>
<meta name="keywords" content="關鍵字列表" />
<meta name="description" content="網頁描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
div{
width:600px;
border:1px solid red;
overflow:hidden;
}
#img1{
float:left;
}
#ul1{
float:right;
margin:0px;
padding:0px;
margin:0px 30px 0 0;
}
#ul1 li{
list-style:none;
border:1px solid gray;
padding:0px;
width:30px;
height:20px;
margin:6px;
line-height:20px;
text-align:center;
}
</style>
<script type="text/javascript">
var n=1;//圖片標記數
var dingshiqi;//讓圖片動的定時器
window.οnlοad=init;
function init(){
dingshiqi=window.setInterval("tupian()",1000);
beijing=document.getElementById("li1");
beijing.style.backgroundColor="orange";
}
//換圖片函數
function tupian(){
var obj=document.getElementById("img1");
n++;
if(n>=7){
n=1;
}
obj.src="images/dd_scroll_"+n+".jpg";
for(var i=1;i<=6;i++){
var li1=document.getElementById("li"+i);
li1.style.backgroundColor="";
}
beijing=document.getElementById("li"+n);
beijing.style.backgroundColor="orange";
}
//鼠標放上停止圖片的函數
function stoptupian(){
window.clearInterval(dingshiqi);
}
//鼠標離開圖片繼續動的函數
function dongtupian(){
dingshiqi=window.setInterval("tupian()",1000);
}
//鼠標放到li上停止圖片查看指定的圖片
function tingtupian(i,lin){
//獲得id爲img1這個標籤
var obj=document.getElementById("img1");
//改變對象的src屬性換圖片
n=i;
obj.src="images/dd_scroll_"+n+".jpg";
//清除定時器
window.clearInterval(dingshiqi);
huanbeijing(lin);
}
//讓定時器繼續換圖片
function jixu(){
dingshiqi=window.setInterval("tupian()",1000);
}
function huanbeijing(lin){
for(var m=1;m<=6;m++){
var li1=document.getElementById("li"+m);
li1.style.backgroundColor="";
}
lin.style.backgroundColor="orange";
}
</script>
</head>
<body>
<div>
<img id="img1" src="images/dd_scroll_1.jpg" οnmοuseοut="dongtupian()" οnmοuseοver="stoptupian()">
<ul id="ul1">
<li id="li1" οnmοuseοver="tingtupian(1,this)" οnmοuseοut="jixu()">1</li>
<li id="li2" οnmοuseοver="tingtupian(2,this)" οnmοuseοut="jixu()">2</li>
<li id="li3" οnmοuseοver="tingtupian(3,this)" οnmοuseοut="jixu()">3</li>
<li id="li4" οnmοuseοver="tingtupian(4,this)" οnmοuseοut="jixu()">4</li>
<li id="li5" οnmοuseοver="tingtupian(5,this)" οnmοuseοut="jixu()">5</li>
<li id="li6" οnmοuseοver="tingtupian(6,this)" οnmοuseοut="jixu()">6</li>
</ul>
</div>
</body>
</html>
第五節 總結
day1：變量，數據類型，運算符
1） 變量，變量名不能以系統內部關鍵字，不能以數字開頭，只能包括數字字母下劃線
2） Number，string，boolean，null，undefined，複合數據類型
3） 運算符
a) 賦值運算符“=“
b) 算數運算符“+，-，*，/，%，++,--“
c) 邏輯運算符”&&,||,!”;
d) 比較運算符“>,<,==,!=,>=,<=,===,!==“
e) 位運算符”&，<<”
Day2：語句，循環
1） if(條件判斷){//語句塊}
2） if,else:必定有一個執行
3） if,else if,else if,多選一
4） if,else if,else if,else必定有一個執行
5） switch,case,break,default
6） 變量初始化while（條件）{循環體,變量改變}
7） 變量初始化Do{//循環體，變量改變},while(條件)
8） For(循環變量初始化，循環條件判斷，循環變量的改變){//循環體}
Day3:函數function，數組arr
1) function的定義格式function 函數名(形式參數1，形式參數2……){//函數體,return}
2) function的調用格式1,var 變量名=函數名(實際參數1，實際參數2……);2,函數名();
3) return如果沒有返回值，就結束函數，如果有返回值就把值返回給調用函數的位置
4) 函數名(),不能和系統關鍵字相同，讓函數名有意義
5) 可以再函數定義之前調用，函數也可以出現任意位置
6) 函數有局部變量和全局變量的區別，考慮局部變量
7) Arr=[很多的數據],new Array();
8) 取值和賦值的時候，有對應的下標，通過對應的下標取值或者賦值
Day4：二維數組，對象
1) 二維數組，arr=[[],[],[]],多個數組放到一起
2) arr[i][j],通過兩個下標，取值和賦值
3) 求和思想，定義一個變量，把找到的沒個數據放到變量裏面,累計求和
4) 計數思想，定義一個變量，如果有滿足條件的數據，就++
5) 交換思想：var temp;temp=arr[i],arr[i]=arr[j],arr[j]=temp;找個變量保存值，把變量依次賦值
6) Date對象
a) 四種創建方法，
i. Var d1=new Date();
ii. Var d2=new Date(“2015/11/18 17;12:36”);
iii. Var d3=new Date(2015,11,18,17,12,39);//月份是從0到11的數字保存的
iv. Var d4=new Date(好大的個值);這個是值是從1970年1月1日開始記錄的毫秒值
b） 取得對應值的方法
getTime取得毫秒之
1）getFullYear獲得年份
2）getMonth獲得月份
C）設置對應的值的方法
1）setFullYear設置年份
2）setMonth設置月份
7）arr對象
1）concat連接數組
2）join連接每項返回字符串
3）reverse翻轉數組項
8）string對象
1）indexof獲得制定字符的第一個位置
2）lastindexOf獲得最有一次出現的位置
3）substr截取字符串，從前一個值取後一個值個
4）substring截取字符串，可以去到前面的值，但是不會取到後面的值
5）split分割字符串返回數組
9）Math對象
1）Math.pow（n，m）取得n的m次方
2）Math.random()取得隨機數，能獲得0但是不能獲得1
求任意兩位數的隨機數：Math.floor(Math.randon()*(大數-小數+1))+小數;
3)Math.floor向下取整
4)Math,ceil()向上取整
5）Math.round(n)四捨五入
Day5:對象，事件，定時器
1) 對象，JS具體到某個標籤，以JS來看所有標籤都是對象
2) 獲得對象：var obj=document.getElementById(“id名”);
3) 獲得對象：Var obj=document.getElementsByTagName(“標籤名”);
4) 獲得body：document.body
5) createElement，創建標籤
6) removeChild，刪除節點（標籤），刪除節點的時候必須找到上級
7) appendChild，追加節點，找到要往哪個標籤中添加
8) 事件
i. 鼠標事件
1. onmouseover鼠標放上
2. onmouseout鼠標離開
3. onclick點擊
4. ondbclick雙擊
5. onmousedown鼠標按下
6. onmouseup鼠標擡起
7. onmousemove鼠標移動
ii. 鍵盤事件
1. onkeypress按鍵一次
2. onkeydown鍵盤按下
3. onleyup鍵盤擡起
iii. 表單事件
1. onsubmit提交事件
2. onreset重置
3. onblur失去焦點
4. onfocus得到焦點
5. onchange當改變的時候觸發的事件（select）
iv. 窗口事件：頁面加載完成之後調用的事件
1. window.οnlοad=init;
2. <body οnlοad=”init()”></body>
v. Event
1. event.target事件源
2. event.clientX;鼠標的x座標
3. event.clientY;鼠標的y座標
vi. this事件源，代表事件本身的對象
4） 定時器：
a) 反覆性定時器：var定時器名=window.setInterval(“函數或者代碼“，時間)
b) 一次性定時器：var定時器名=window.setTimeout(“函數或者代碼”，時間);
5） 清除定時器：
a) Window.clearInterval(定時器名);
b) Window.clearTimeout(定時器名);
Day6：alert，prompt，confirm
1） alert彈出框，有警告作用
2） prompt(“用戶輸入內容“,”默認值”)
3） confirm(“選擇行的問題”);//true,false
4） innerHTML:獲得對應對象中的所有的HTML內容
5） JS和CSS屬性改變的寫法
a) CSS=>Margin(JS=>margin)
b) CSS=>border-color(JS=>borderColor)【php基礎班】第13天 this、星星案例、圖片切換、總結
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章