ECMA5

最新推荐文章于 2024-01-18 17:24:07 发布

原创最新推荐文章于 2024-01-18 17:24:07 发布 · 302 阅读

CC 4.0 BY-SA版权

ECMA标准
ECMA5：
1.严格模式：
从字面意思理解，在这种严格模式下，浏览器对JS的要求更加严格
使用方法：“use strict”;
这句话写在哪个作用域下，这个作用域的代码都要遵从严格模式
注;不要轻易在全局范围开头增加use strict，建议在作用域内使用
eg：
fuction m1() {
max = 10;//如果在给变量赋值时，没有使用var声明变量，则当成全局变量处理
}
而在es5中
fuction m1() {
“use strict”
max = 10;
}
m1();//会报错，因为max没有声明
2.数组的额外的方法
indexOf():使用的方式和字符串的方式一致

forEach()：遍历数组
数组.forEach(function(item,index,array))
item：当前遍历到的元素
index：当前遍历到的下标
array:当前数组

map：映射
遍历->操作->返回

reduce：归并

filter():过滤

some：某些，判断return后面的表达式，在当前数组中是否成立，如果成立，返回true，否则返回false

every：和some一样，但是要求每一项都符合才返回true，有一项不符合返回flase
3.Math对象
常用的属性：Math.PI
常用函数：
Math.round()：四舍五入
Math.random：生成0-1之间的随机数
Math.max：返回较大的数
Math.min：返回较小的数
Math.abs：返回绝对值
Math.ceil：向上取整
Math.floor：向下取整
Math.pow(x,y)：求x的y次方

Math对象的勾股函数:
Math.sin()/cos()/tan()
参数都是弧度
1弧度=Math.PI/180

4.JS对象
创建对象：1. var p = new 构造方法名();

              2.   var  p  =  new  Object();     //这是new的js的内部对象

              3.   var  p  =  {     //dui对象初始化方式

                             name : "Jack",

                             speak : function(){  alert("会吃");  }         

                    }

给对象动态的添加属性和方法：

                p.name="Jack";

                p.func=function speak(){  alert("说话");   }

给对象删除属性和方法：
delect p.name;
delect p.func;

5.日期对象：Date
创建： var d = new Date();
参数：如果不传参，默认是系统的时间
我们使用的时间都是格林尼治时间
生成日期对象的参数
参数的类型：
Date(“2015/08/22”)
Date(“2015-08-22”)
参数可以是毫秒数
Date(1000)
1970年1月1日0时0分0秒为参照物

日期对象函数：
日期对象的格式化方法：日期对象.方法

var date= new Date();
set系列的函数是设置值，get系列的函数是获取值，常用方法：date.getFullYear() 年(返回一个四位数字) date.getMonth() 月(返回0-11) date.getDate() 日(返回1-31)

date.getHours() 时 date.getMinutes() 分 date.getSeconds() 秒
getDay():获取一周的某一天，从0开始，0-7,0代表星期天

//setDate()和getDate(),封装一个函数，可以根据输入的数值n（天数）显示n天后的时间
function nunmOfDate(n) {//n天后
var d = new Date();//获取当前天数
var date = d.getDate();//取出天数
d.setDate(date + n);//加上天数
return d;
}
alert(nunmOfDate(2));

6.定时器
setInterval()
格式： setInterval(函数（匿名函数），毫秒数);
功能：每隔所传参数的毫秒数，就调用一次所传参数的函数
}
setInterval(fuction(){
我们想要执行的代码
},毫秒数)
返回值：当前页面上对于这个定时器的唯一标识，定时器的ID，在clearInterval()方法中会用到

clearInterval() 取消定时器
参数：定时器的ID

7.innerHTML
innerHTML 标签间的所有内容
如果在innerHTML中包含标签，标签会被识别，呈现对应的效果
window.onload = function() {
var oBtn = document.getElementById(“btn”);
var oDiv = document.getElementById(“div1”);
oBtn.onclick = function() {
//获取标签的内容
// alert(oDiv.innerHTML);
//设置div标签的内容
oDiv.innerHTML = “h1替换文本h1”
}
}

<div id="div1"><em>斜体</em></div>
<input type="button" id="btn" value="按钮"/>

8.秒表的实现

    //可以将查找标签节点的操作进行简化
    function $(id) {
        return document.getElementById(id);
    }
    window.onload = function() {
        //点击开始计数
        var count = 0;//开始计数后累加的总秒数
        var timer = null;
        $("start").onclick = function() {
         timer = setInterval(function() {
             count++;
             //需要改变页面上时分秒的值
             $("id_s").innerHTML = showNum(count % 60);
             $("id_m").innerHTML = showNum(parseInt(count /60) % 60);
             $("id_h").innerHTML = showNum(parseInt(count / 3600));
         },100);
        }
        //暂停
        $("pause").onclick = function () {
            //取消定时器
            clearInterval(timer);
        }
        //停止  停止计数，数据清零（数据清零，页面展示数据清零）
        $("stop").onclick = function () {
            //取消定时器
            clearInterval(timer);
            //数据清零  总秒数清零
            count = 0;
            //页面展示数据清零
            $("id_s").innerHTML = "00";
             $("id_m").innerHTML = "00";
             $("id_h").innerHTML = "00";
    }
    }

    //处理单个数字
    function showNum(num) {
        if(num<10) {
            return "0" + num;
        }else{
            return num;
        }
    }
</script>

<div id="div1">
    <div id="count">
        <span id="id_h">00</span>:
        <span id="id_m">00</span>:
        <span id="id_s">00</span>
    </div>
    <input id="start" type="button" value="开始">
    <input id="pause" type="button" value="暂停">
    <input id="stop" type="button" value="停止">
</div>