01.數組的操作方法
var arr = [1,2,3,4,'哈哈哈']
alert(arr.join('-')) // 輸出 1-2-3-4-哈哈哈
//數組push()
//在數組最後追加數據
alert(arr.push('呵呵呵')) //這裏返回數組的長度
// 正確輸出
// 添加數組注意： 都是在添加完元素之後，再打印數據
arr.push('哈哈哈')
alert(arr)
// pop() 刪除數組的最後一個元素， 返回值：你刪除的那條數據
alert(arr.pop())
// splice() 在數組中的某個位置增加或刪除成員
var aList = [1,2,3,4]
aList.splice(2,1,7,8,9,4) //
var arr = [1,2,3,4,'哈哈哈']
// 第一個參數： 從第幾位開始。第二個參數：刪除多少個。後面參數代表你要添加的內容
arr.splice(2,2,3,7,8,9) // 輸出 1,2,3,7,8,9,哈哈哈
// reverse()數組反轉
var arr = [1,2,3,4,'哈哈哈']
arr.reverse() //輸出 哈哈哈,4,3,2,1
// indexOf() 返回該數據在數組中，第一次出現的索引值, 如果後面有數據，那就不管了
alert(arr.indexOf(2))
02.多維數組
var = [1,2,3,4, ''哈哈哈]
var arrs = [[1,2][3,4]] //輸出 1,2,3,4
//多維數組輸出單個元素
alert(arrs[1][0])
03.for 循環
循環作用：重複執行某些程序。便利數據
// for(初始值;循環次數; 增量)
for(var i = 0;i<5; i++){
alert('hello')
// i = 0 0<5 執行加1
// i = 1 1<5 執行加1
// i = 2 2<5 執行加1
// i = 3 3<5 執行加1
// i = 4 4<5 執行加1
// i = 5 5<5 不執行
}
案例一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="list">
<!--<li>鋼鐵俠3</li>
<li>蜘蛛俠3</li>
<li>前任3</li>
<li>我不是程序員</li>
<li>葫蘆娃</li>-->
</ul>
</body>
<script type="text/javascript">
var alist1 = document.getElementById('list')
var movie =['鋼鐵俠3','蜘蛛俠3','前任3','我不是程序員','葫蘆娃']
for(var i = 0; i < movie.length; i++){
alist1.innerHTML += '<li>' + movie[i] + '</li>'
}
</script>
</html>
04.數組去重
數組去重，把重複數據刪掉
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var alist1= [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1]
var alist2 = []
for (var i = 0; i < alist1.length; i ++){
// 判斷： 如果我當前的這條數據的第一次出現所以只 ==i
// 就把這條數據添加進那個新的數組中
if (alist1.indexOf(alist1[i]) == i){
alist2.push(alist1[i])
}
}
alert(alist2)
</script>
</html>
javascript 用單引號，html用雙引號，避免用JavaScript拼接html時出現錯誤。
05-JavaScript對象
對象有花括號分隔。在括號內部，對象的屬性以名稱和值的形式（name:value）來定義。屬性由逗號分隔：
var person = {firname:'John', lastname:'Doe', id:5566};
06-入口函數
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// 入口函數。 作用: 等整個頁面加載完畢之後的事件
// 入口js要卸載body上面，要加上入口函數
// 如果代碼在body下面，不需要加入入口函數
window.onload = function(){
//js尋找頁面元素，從上面尋找的
var oBox = document.getElementById('box')
oBox.onclick = function(){
// this 代表當前事件源
this.style.color = 'red'
}
}
</script>
</head>
<body>
<div id="box">
文字文字
</div>
</body>
<script type="text/javascript">
for( var i =0; i < 3; i ++){
console.log(i)
}
</script>
</html>
07-變量作用域
var tv = '好點十' // 全局變量： 所有的函數都能用
function wang(){
// var tv = '你好'
tv = '壞電視'
alert(tv)
}
function my(){
alert(tv)
}
wang()
my()
08-定時器基礎
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="開啓單次定時器" id="btn1" />
<input type="button" value="開啓多次定時器" id="btn2" />
<input type="button" value="關閉單次定時器" id="btn3" />
<input type="button" value="關閉多次定時器" id="btn4" />
</body>
<!--定時器作用：多少毫秒之後，要執行什麼程序-->
<script type="text/javascript">
var oBtn1 = document.getElementById('btn1')
var oBtn2 = document.getElementById('btn2')
var oBtn3 = document.getElementById('btn3')
var oBtn4 = document.getElementById('btn4')
//關閉定時器要點：
// 1.在全局聲明一個空的變量
// 2.把此變量以修改的方式,賦值給定時器
// 3.後面關閉定時器,就能選中此定時器
var dan = null; //在全局聲明一個空的變量
var duo = null;
//開啓單次定時器 。只執行一次
oBtn1.onclick = function(){
//把全局變量以修改的方式，賦值給定時器
dan = setTimeout(function(){
//2000毫秒之後，執行什麼程序，就在這裏寫
alert('炸了')
},2000)
}
//開啓多次定時器。重複執行的，永遠不會停
oBtn2.onclick = function(){
duo = setInterval(function(){
alert('炸了')
},2000)
}
//關閉單次定時器
oBtn3.onclick = function(){
//這樣就能選中對應的定時器
clearTimeout(dan)
}
//關閉多次定時器
oBtn4.onclick = function(){
//這樣就能選中對應的定時器
clearInterval(duo)
}
</script>
</html>
09-跑步動畫
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background:#c7c7c7;
}
img{
width:250px;
position:absolute;
left:0;
top:200px;
}
</style>
</head>
<body>
<input type="button" value="走你" id="go" />
<input type="button" value="停下" id="stop" />
<img src="a.jpg" id="pic">
</body>
<script type="text/javascript">
var oGo = document.getElementById('go')
var oStop = document.getElementById('stop')
var oPic = document.getElementById('pic')
var num = 0
var run = null
oGo.onclick = function(){
clearInterval(run) //解決排隊機制問題。先關閉定時器，再開啓定時器，避免用戶重複點擊，造成的動畫排隊問題
run = setInterval(function(){
num+=4 //++ 代表每次加1 +=6 每次加6
oPic.style.left = num + 'px'
},80)//關於時間問題：不要低於80毫秒，低於會容易出問題
}
oStop.onclick = function(){
clearInterval(run)
}
</script>
</html>