數(shù)組
<script type="text/javascript">
//面向?qū)ο蟮姆绞絼?chuàng)建
var aRr01 = new Array(1,2,3,'abc');
//直接創(chuàng)建
var aRr02 = [1,2,3,'def'];//推薦使用，性能更高
//獲取數(shù)組的成員數(shù)量（長度）
// alert(aRr02.length);//彈出4
// alert(aRr02[3]);//彈出cdf
var aRr03 = [[1,2,3],['a','b','c','d'],[true,false]];
// alert(aRr03.length);//彈出3
// alert(aRr03[1].length);//彈出3
alert(aRr03[1][2]);//彈出c
</script>
數(shù)組常用方法
<script type="text/javascript">
var aRr = [1,2,3,4];
//用-連接數(shù)組元素并轉(zhuǎn)為字符串
//var sTr = aRr.join("-");//用-連接數(shù)組元素并轉(zhuǎn)為字符串，彈出1-2-3-4
// var sTr = aRr.join('');//用空串連接
// alert(sTr);//彈出1234
//向數(shù)組最后追加元素
// aRr.push(5);
// alert(aRr);//1,2,3,4,5
//刪除末尾元素
// aRr.pop();
// alert(aRr);//1,2,3
//向最前面插入元素0
// aRr.unshift(0);
// alert(aRr);//0,1,2,3,4
//刪除第一個（索引為0的）元素
// aRr.shift();
// alert(aRr);//2,3,4
//反轉(zhuǎn)
// aRr.reverse();
// alert(aRr);//4,3,2,1
//查找字母'b'第一次出現(xiàn)的索引
var aRr2 = ['a','b','c','d','a','b','c','d'];
var num = aRr2.indexOf('b');
// alert(num);//1
//從第2索引元素開始，刪除1個元素
// aRr2.splice(2,1);//刪除c
// alert(aRr2);//a,b,d,a,b,c,d
//從第2索引元素開始，刪除1個元素，再插入e
// aRr2.splice(2,1,'e');//把c替換成e
// alert(aRr2);//a,b,e,d,a,b,c,d
//刪除后面的abcd，改為fghi
aRr2.splice(4,4,'f','g','h','i');
alert(aRr2);//a,b,c,d,f,g,h,i
</script>
通過標簽獲取元素
<script type="text/javascript">
window.onload = function(){
// //獲取頁面上所有的li
// var aLi = document.getElementsByTagName('li');
//獲取id為list01的ul
var oList = document.getElementById('list01');
//再獲取這個ul下的所有l(wèi)i
var aLi = oList.getElementsByTagName('li');
alert(aLi.length);//8
// aLi.pop();//錯誤用法，aLi是一個類似數(shù)組的選擇集，沒有數(shù)組通用的一些方法
aLi[0].style.backgroundColor = 'gold';
aLi[1].style.backgroundColor = 'gold';
}
</script>
</head>
<body>
<ul id="list01">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul id="list02">
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</body>
循環(huán)語句
<script type="text/javascript">
/*
循環(huán)語句：
通過循環(huán)語句可以反復(fù)的執(zhí)行一段代碼多次
while循環(huán)
- 語法：
while(條件表達式){
語句...
}
- while語句在執(zhí)行時，
先對條件表達式進行求值判斷，
如果值為true，則執(zhí)行循環(huán)體，
循環(huán)體執(zhí)行完畢以后，繼續(xù)對表達式進行判斷
如果為true，則繼續(xù)執(zhí)行循環(huán)體，以此類推
如果值為false，則終止循環(huán)
do...while循環(huán)
- 語法：
do{
語句...
}while(條件表達式)
- 執(zhí)行流程：
do...while語句在執(zhí)行時，會先執(zhí)行循環(huán)體，
循環(huán)體執(zhí)行完畢以后，在對while后的條件表達式進行判斷，
如果結(jié)果為true，則繼續(xù)執(zhí)行循環(huán)體，執(zhí)行完畢繼續(xù)判斷以此類推
如果結(jié)果為false，則終止循環(huán)
實際上這兩個語句功能類似，不同的是while是先判斷后執(zhí)行，
而do...while會先執(zhí)行后判斷，
do...while可以保證循環(huán)體至少執(zhí)行一次，
而while不能
for語句，也是一個循環(huán)語句，也稱為for循環(huán)
在for循環(huán)中，為我們提供了專門的位置用來放三個表達式：
1.初始化表達式
2.條件表達式
3.更新表達式
for循環(huán)的語法：
for(①初始化表達式;②條件表達式;④更新表達式){
③語句...
}
for循環(huán)的執(zhí)行流程：
①執(zhí)行初始化表達式，初始化變量（初始化表達式只會執(zhí)行一次）
②執(zhí)行條件表達式，判斷是否執(zhí)行循環(huán)。
如果為true，則執(zhí)行循環(huán)③
如果為false，終止循環(huán)
④執(zhí)行更新表達式，更新表達式執(zhí)行完畢繼續(xù)重復(fù)②
任意一種循環(huán)都可以互相嵌套
*/
window.onload = function(){
var oList = document.getElementById('list01');
var aLi = oList.getElementsByTagName('li');
/*for (var i = 0; i < aLi.length; i++) {
if(i % 2 == 0){
aLi[i].style.background = 'gold';
}
}*/
/*for(var j in aLi){
aLi[j].style.background = 'red';
}*/
//創(chuàng)建一個循環(huán)，往往需要三個步驟
//1.創(chuàng)初始化一個變量
var j = 0;
//2.在循環(huán)中設(shè)置一個條件表達式
/*while(j < aLi.length){
aLi[j].style.background = 'gold';
//3.定義一個更新表達式，每次更新初始化變量
j++;
}*/
do{
aLi[j].style.background = 'gold';
j++;
}while(j < 0)
/*
以下是死循環(huán)的寫法
像這種將條件表達式寫死為true的循環(huán)，叫做死循環(huán)
該循環(huán)不會停止，除非瀏覽器關(guān)閉，死循環(huán)在開發(fā)中慎用
可以使用break，來終止循環(huán)
*/
/*while(true){
if(j>10){
break;//退出整個循環(huán)
}
j++;
}
//for循環(huán)的死循環(huán)寫法
for(;;){
}*/
/*
break關(guān)鍵字可以用來退出switch或循環(huán)語句
不能在if語句中使用break和continue
break關(guān)鍵字，會立即終止離他最近的那個循環(huán)語句
continue關(guān)鍵字可以用來跳過當次循環(huán)
同樣continue也是默認只會對離他最近的循環(huán)循環(huán)起作用
*/
/*
可以為循環(huán)語句創(chuàng)建一個label，來標識當前的循環(huán)
label:循環(huán)語句
使用break語句時，可以在break后跟著一個label，
這樣break將會結(jié)束指定的循環(huán)，而不是最近的
*/
outer:
for(var i=0 ; i<5 ; i++){
console.log("@外層循環(huán)"+i);
for(var j=0 ; j<5; j++){
console.log("內(nèi)層循環(huán):"+j);
break outer;
}
}
}
</script>
</head>
<body>
<ul id="list01">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
數(shù)組去重
<script type="text/javascript">
var aRr = [1,3,4,1,6,9,1,2,5,3,1,6,5,4,4];
var aRr2 = [];
for(var i=0; i<aRr.length; i++){
//判斷元素第一次出現(xiàn)的位置，恰好是當前索引時，就將元素放入新數(shù)組
if(aRr.indexOf(aRr[i]) == i){
aRr2.push(aRr[i]);
}
}
alert(aRr2);//1,3,4,6,9,2,5
</script>
字符串處理的方法
<script type="text/javascript">
/*字符串切斷轉(zhuǎn)成數(shù)組*/
var sTr = '2018-06-20';
var aRr = sTr.split('-');
// alert(aRr);//2018,06,20
// console.log(aRr);
var aRr2 = sTr.split('');
// console.log(aRr2);
/*實際上就是修改了<title>標簽的內(nèi)容*/
// document.title = aRr2;
var sTr2 = '#div1';
var sTr3 = '.div1';
/*獲取指定索引的字符*/
var sTr4 = sTr2.charAt(0);
if(sTr4 == '#'){
// alert('id選擇器');
}
/*查看子串第一次出現(xiàn)的位置*/
var sTr5 = 'Microsoft Yahei';
var num = sTr5.indexOf('Yahei');
// alert(num);//10
var num2 = sTr5.indexOf('xihei');
// alert(num2);//沒有找到就彈出-1
/*substring截取子串*/
//從10開始，截到15（包括開始位置，不包括結(jié)束位置）
// var sTr6 = sTr5.substring(10,15);//Yahei
//從10開始截取到末尾
var sTr6 = sTr5.substring(10);//Yahei
// alert(sTr6);
/*全部轉(zhuǎn)為大寫字母*/
// alert(sTr6.toUpperCase());//YAHEI
/*全部轉(zhuǎn)為小寫字母*/
alert(sTr6.toLowerCase());//yahei
</script>
字符串反轉(zhuǎn)
<script type="text/javascript">
var sTr = "123abc456";
//1、split字符串轉(zhuǎn)成數(shù)組
//2、reverse數(shù)組反轉(zhuǎn)
//3、join數(shù)組轉(zhuǎn)成字符串
var sTr2 = sTr.split('').reverse().join('');
alert(sTr2);//12efdsa88897fdsa321
</script>
計算器
<script type="text/javascript">
window.onload = function(){
var oInput01 = document.getElementById('input01');
var oInput02 = document.getElementById('input02');
var oSelect = document.getElementById('select');
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var val01 = oInput01.value;
var val02 = oInput02.value;
//不做此判斷會彈出“NaN”
if(val01=="" || val02==""){
alert('輸入框不能為空！');
return;
}
if(isNaN(val01) || isNaN(val02)){
alert('請輸入數(shù)字！');
return;
}
switch(oSelect.value){
case '0':
alert((parseFloat(val01)*100 + parseFloat(val02)*100)/100);
break;
case '1':
alert((parseFloat(val01)*100 - parseFloat(val02)*100)/100);
break;
case '2':
alert((parseFloat(val01)*100) * (parseFloat(val02)*100)/10000);
break;
case '3':
alert((parseFloat(val01)*100) / (parseFloat(val02)*100));
break;
}
}
}
</script>
</head>
<body>
<h1>計算器</h1>
<input type="text" name="" id="input01" />
<select id="select">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
<input type="text" name="" id="input02" />
<input type="button" name="" value="計算" id="btn" />
</body>
定時器彈框
| <style type="text/css"> |
| | .pop{ |
| | width: 400px; |
| | height: 300px; |
| | background-color: #fff; |
| | border: 1px solid #000; |
| | /*固定定位*/ |
| | position: fixed; |
| | /*左上角位于頁面中心*/ |
| | left: 50%; |
| | top: 50%; |
| | /*讓div向左偏移半個寬度、向上偏移半個高度，使div位于頁面中
心*/ |
| | margin-left: -200px; |
| | margin-top: -150px; |
| | /*彈窗在最上面*/ |
| | z-index: 9999; |
| | } |
| | /*遮罩樣式*/ |
| | .mask{ |
| | position: fixed; |
| | width: 100%; |
| | height: 100%; |
| | background-color: #000; |
| | left: 0; |
| | top: 0; |
| | /*設(shè)置透明度30%*/ |
| | opacity: 0.3; |
| | filter: alpha(opacity=30);/*兼容IE6、7、8*/ |
| | /*遮罩在彈窗的下面，在網(wǎng)頁所有內(nèi)容的上面*/ |
| | z-index: 9990; |
| | } |
| | .pop_con{ |
| | display: none;/*默認不顯示，用定時器顯示*/ |
| | } |
| | </style> |
| | <script type="text/javascript"> |
| | /* |
| | setTimeout 只執(zhí)行一次的定時器 |
| | clearTimeout 關(guān)閉只執(zhí)行一次的定時器 |
| | setInterval 反復(fù)執(zhí)行的定時器 |
| | clearInterval 關(guān)閉反復(fù)執(zhí)行的定時器 |
| | */ |
| |
|
| | window.onload = function(){ |
| | var oPop = document.getElementById('pop'); |
| | var oShut = document.getElementById('shutOff'); |
| |
|
| | /*setTimeout(showPop, 3000);//開啟定時器，3秒后調(diào)用函數(shù)
showPop()彈框 |
| |
|
| | function showPop(){ |
| | oPop.style.display = 'block';//顯示彈框和遮罩 |
| | }*/ |
| | //開啟定時器的簡寫方式：調(diào)用匿名函數(shù) |
| | setTimeout(function(){ |
| | oPop.style.display = 'block'; |
| | }, 3000); |
| |
|
| | oShut.onclick = function(){ |
| | oPop.style.display = 'none';//關(guān)閉彈框和遮罩 |
| | } |
| | } |
| | </script> |
| | </head> |
| | <body> |
| | <h1>首頁標題</h1> |
| | <p>頁面內(nèi)容</p> |
| | <a href="[http://www.baidu.com](http://www.baidu.com)">百度網(wǎng)
</a> |
| |
|
| |
|
| | <div class="pop_con" id="pop"> |
| | <div class="pop"> |
| | <h3>提示信息！</h3> |
| | <a href="[#](#)" id="shutOff">關(guān)閉</a> |
| | </div> |
| | <div class="mask"></div> |
| | </div> |
| | </body> |
