案例–发送验证码5s
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<button>点击发送验证码1</button>
<button>点击发送验证码2</button>
</body>
<script type="text/javascript">
var btns = document.querySelectorAll('button');
for (var i = 0; i < btns.length; i++) {
btns[i].index = i;
btns[i].onclick = function() {
var c = 5;
this.timer = setInterval(function() {
c--;
this.disabled = true;
this.innerText = '还剩' + c + '秒';
if (c == 0) {
this.disabled = false;
this.innerText = '点击发送验证码1';
clearInterval(this.timer);
}
}.bind(this), 1000)
}
}
</script>
</html>
案例–apply求数组最大值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var arr=[2,3,6,8,10];
var maxNum=Math.max.apply(Math,arr);
console.log(maxNum);
</script>
</html>
判断数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
console.log(typeof 1);
console.log(Object.prototype.toString.call(123));
var n=2;
console.log(n.constructor);
</script>
</html>
构造函数的继承
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
function Father (name,age) {
this.name=name;
this.age=age;
this.say=function () {
console.log('我在说话');
}
}
function Son (name,age,sex) {
Father.call(this,name,age);
this.sex=sex;
this.sleep=function () {
console.log('我在睡觉');
}
}
var son=new Son('小谷',10,'女');
son.say();
son.sleep();
</script>
</html>

新的继承方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
function Father (name,age) {
this.name=name;
this.age=age;
this.say=function () {
console.log('我在说话');
}
}
function Son (name,age,sex) {
Father.call(this,name,age);
this.sex=sex;
this.sleep=function () {
console.log('我在睡觉');
}
}
Son.prototype=new Father();
Son.prototype.constructor=Son;
Son.prototype.study=function () {
console.log('我会学习');
}
var son=new Son('小谷',10,'女');
son.say();
son.sleep();
son.study();
console.log(son);
</script>
</html>
第三种继承方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
function Father (name,age) {
this.name=name;
this.age=age;
this.say=function () {
console.log('我在说话');
}
}
function Son (name,age,sex) {
Father.call(this,name,age);
this.sex=sex;
this.sleep=function () {
console.log('我在睡觉');
}
}
Son.prototype=Object.create(Father.prototype,{
constructor:{
value:Son
},
fly:{
value:function () {
console.log('我会飞');
}
}
})
var son=new Son('小谷',10,'女');
console.log(son);
</script>
</html>
实现类式继承
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var P={
name:'小谷',
sex:'男'
}
var xiaoxiao=Object.create(P,{
age:{
configurable:true,
writable:true,
Enumerable:true,
value:function(){
console.log('睡觉');
}
}
});
console.log(xiaoxiao);
</script>
</html>
数组的遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var arr=[1,2,3,4,5,6,8];
arr.forEach(function (v,i,arr) {
console.log(v,i,arr);
})
var arr1=arr.map(function (v,i) {
return v+'0';
})
console.log(arr1);
var arr2=arr.filter(function (v,i) {
return v>2;
})
console.log(arr2);
var arr3=arr.some(function (v,i) {
return v>2;
})
console.log(arr3);
var arr4=arr.every(function (v,i) {
return v>8;
})
console.log(arr4);
var arr5=arr.find(function (v,i) {
return v>2;
})
console.log(arr5);
var arr6=arr.reduce(function (total,v,i) {
return total+v;
})
console.log(arr6);
</script>
</html>