1宙搬、數(shù)組去重
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)的位置，恰好是當(dāng)前索引時拓哺，就將元素放入新數(shù)組
if(aRr.indexOf(aRr[i]) == i){
aRr2.push(aRr[i]);
}
}
alert(aRr2);//1,3,4,6,9,2,5
2勇垛、字符串的處理方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串處理的方法</title>
<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>標(biāo)簽的內(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>
</head>
<body>
</body>
</html>
3闲孤、字符串反轉(zhuǎn)
- 并用
var sTr = "123asdf79888asdfe21";
//1、split字符串轉(zhuǎn)成數(shù)組
//2烤礁、reverse數(shù)組反轉(zhuǎn)
//3讼积、join數(shù)組轉(zhuǎn)成字符串
var sTr2 = sTr.split('').reverse().join('');
alert(sTr2);//12efdsa88897fdsa321
4肥照、計算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算器</title>
<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>
</html>
5舆绎、定時器彈框
setTimeout 只執(zhí)行一次的定時器
clearTimeout 關(guān)閉只執(zhí)行一次的定時器
setInterval 反復(fù)執(zhí)行的定時器
clearInterval 關(guān)閉反復(fù)執(zhí)行的定時器
6、定時器的基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定時器的基本用法</title>
<style type="text/css">
</style>
<script type="text/javascript">
//單次定時器
var timer = setTimeout(function(){
alert('hello!');
}, 3000);
//清除單次定時器
clearTimeout(timer);
//反復(fù)循環(huán)定時器
var timer2 = setInterval(function(){
alert('hi~~~');
}, 2000);
//清除反復(fù)循環(huán)定時器
clearInterval(timer2);
</script>
</head>
<body>
</body>
</html>
7们颜、定時器動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定時器動畫</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: gold;
position: fixed;
left: 20px;
top: 20px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box');
var left = 20;
//反復(fù)循環(huán)定時器吕朵，每30毫秒修改一次盒子的left值
var timer = setInterval(function(){
left += 2;
oBox.style.left = left + 'px';
//當(dāng)left值大于700時停止動畫（清除定時器）
if(left > 700){
clearInterval(timer);
}
},30);
}
</script>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>
8、時鐘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>時鐘</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box');
function timeGo(){
var now = new Date();
// alert(now);//彈出美式時間：Wed Jun 20 2018 15:27:13 GMT+0800 (中國標(biāo)準(zhǔn)時間)
var year = now.getFullYear();//2018年
var month = now.getMonth() + 1;//6月彈出5//范圍0-11
var date = now.getDate();//20號
var week = now.getDay();//3//星期幾窥突，西半球時間努溃，范圍0-6，星期日為一周的第一天阻问，為0
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
// alert(hour + ":" + minute + ":" + second);//15:33:9
oBox.innerHTML = '當(dāng)前時間是：' + year + '年' + toDouble(month) + '月' + toDouble(date) + '日 ' + toWeek(week) + ' ' + toDouble(hour) + ":" + toDouble(minute) + ":" + toDouble(second);
}
timeGo();
setInterval(timeGo, 1000);
}
//此函數(shù)將星期的數(shù)字轉(zhuǎn)為漢字表示
function toWeek(num){
switch(num){
case 0:
return '星期天';
break;
case 1:
return '星期一';
break;
case 2:
return '星期二';
break;
case 3:
return '星期三';
break;
case 4:
return '星期四';
break;
case 5:
return '星期五';
break;
case 6:
return '星期六';
break;
}
}
//此函數(shù)將不足兩位的數(shù)字前面補0
function toDouble(num){
if(num < 10){
return '0' + num;
}else{
return num;
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
9梧税、倒計時
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒計時</title>
<script type="text/javascript">
window.onload = function(){
//活動第二天要將頁面下線，直接跳轉(zhuǎn)到其它頁面则拷，不會走后面的代碼了
// window.location.;
var oDiv = document.getElementById('div1');
function timeLeft(){
//實際開發(fā)中此時間從服務(wù)器獲取贡蓖，避免客戶端調(diào)整時間
var now = new Date();
var future = new Date(2018,8,23,24,00,00);
// alert(future - now);//彈出與當(dāng)前時間相差的毫秒數(shù)：12469935436
var milli = parseInt((future - now)/1000);
//活動當(dāng)天頁面下線，避免倒計時到點后繼續(xù)計負時
// if(milli <= 0){
// //頁面跳轉(zhuǎn)煌茬，不執(zhí)行下面的代碼了
// window.location.;
// }
var day = parseInt(milli / 86400);
var hour = parseInt(milli % 86400 / 3600);
var minute = parseInt(((milli % 86400) % 3600) / 60);
var second = milli % 60;
oDiv.innerHTML = '距離2018年8月23日00時00分00秒還有' + day + '天' + toDouble(hour) + '時' + toDouble(minute) + '分' + toDouble(second) + '秒';
}
timeLeft();
setInterval(timeLeft, 1000);
}
function toDouble(num){
if(num < 10){
return '0' + num;
}else{
return num;
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
10斥铺、變量的作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>變量的作用域</title>
<script type="text/javascript">
/*
全局變量：函數(shù)外部定義的變量，函數(shù)內(nèi)部和外部都可以訪問坛善，它的值可以共享
局部變量：函數(shù)內(nèi)部定義的變量晾蜘，函數(shù)內(nèi)部可以訪問，外部無法訪問眠屎。函數(shù)內(nèi)部訪問變量時剔交，先在內(nèi)部查找是否有此變量，如果有改衩，就使用內(nèi)部變量岖常，如果沒有，就去外部查找
函數(shù)內(nèi)部如果不用'var'關(guān)鍵字定義變量葫督，變量可能會變成全局變量竭鞍，如果用嚴格模式解析會報錯
*/
var a = 12;
function aa(){
// var a = 5;
var b = 7;
// alert(a);
}
// alert(a);
// alert(b);//報錯
aa();
</script>
</head>
<body>
</body>
</html>
11、封閉函數(shù)
/*原來的寫法
function myAlert(){
var str = '歡迎訪問我的主頁';
alert(str);
}
myAlert();*/
var str = function(){
alert('test');
}
//封閉函數(shù)的一般寫法
//封閉函數(shù)定義：(function(){……})()
/*
;;(function(){
var str = '歡迎訪問我的主頁';
alert(str);
})();//最后的()表示馬上執(zhí)行
*/
//封閉函數(shù)其他的寫法：在匿名函數(shù)前加“橄镜！”或者“~”偎快，之后加“()”
~function(){
var str = '歡迎訪問我的主頁';
alert(str);
}();
12、用變量來定義函數(shù)
/*
原來的寫法：可以提前
myAlert();
function myAlert(){
alert('hello!');
}*/
//函數(shù)用變量方式定義：先定義再使用
// myalert();//提前會報錯
var myAlert = function(){
alert('hello!');
}
myAlert();//放在下面可以執(zhí)行
13洽胶、閉包
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>閉包</title>
<script type="text/javascript">
/*
閉包的本質(zhì)就是函數(shù)嵌套晒夹，就是在函數(shù)里面定義函數(shù)，
內(nèi)部函數(shù)可以引用外部函數(shù)的參數(shù)和變量
參數(shù)和變量不會被垃圾回收機制給回收
閉包的用途：可以存循環(huán)的索引值、做私有變量計數(shù)器
*/
/*
//閉包的一般寫法
function aa(b){
var a = 12;
function bb(){
alert(a);
alert(b);
}
return bb;
}
var cc = aa(24);*/
//閉包的封閉函數(shù)寫法
var cc = (function(b){
var a = 12;
function bb(){
alert(a);
alert(b);
}
return bb;
})(24);
cc();
/*
//只能調(diào)用一次的閉包
(function(b){
var a = 12;
function bb(){
alert(a);
alert(b);
}
return bb;
})(24)();
*/
</script>
</head>
<body>
</body>
</html>
14丐怯、閉包村循環(huán)的索引值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>閉包存循環(huán)的索引值</title>
<style type="text/css">
li{
height: 30px;
background-color: gold;
margin-bottom: 10px;
}
</style>
<script type="text/javascript">
//閉包的用途：存循環(huán)的索引值
window.onload = function(){
var aLi = document.getElementsByTagName('li');
// alert(aLi.length);//8
for(var i=0; i<aLi.length; i++){
/*
aLi[i].onclick = function(){
alert(i);//每個li都彈出8喷好，因為點擊時循環(huán)已完畢，i最后為8
}
*/
(function(k){//這里的k是形參
aLi[k].onclick = function(){
alert(k);//彈出每個li的索引值
}
})(i);//這里的i是實參
}
}
</script>
</head>
<body>
<ul>
<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>
</body>
</html>
15响逢、閉包做私有變量計數(shù)器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>閉包做私有變量計數(shù)器</title>
<script type="text/javascript">
//閉包的用途：私有變量計數(shù)器
var count = (function(){
var a = 0;
function bb(){
a++;
return a;
}
return bb;
})();
//每調(diào)用一次count绒窑，a就自增一次
alert(count());//1
alert(count());//2
var c = count();
alert(c);//3
</script>
</head>
<body>
</body>
</html>
16棕孙、閉包做選項卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>閉包做私有變量計數(shù)器</title>
<script type="text/javascript">
//閉包的用途：私有變量計數(shù)器
var count = (function(){
var a = 0;
function bb(){
a++;
return a;
}
return bb;
})();
//每調(diào)用一次count舔亭，a就自增一次
alert(count());//1
alert(count());//2
var c = count();
alert(c);//3
</script>
</head>
<body>
</body>
</html>
