前端基本功—js第五天

0.操作节点

复习上一节的节点操作，append添加子节点，而且子节点在最后一个位置，cloneNode()，克隆节点，括号里面可以加参数，如果是true则是深克隆（克隆当前节点及其子节点），如果是false则是浅克隆，只可能当前选中的节点；parentNode父节点，给我的父节点增加子节点其实相当于给我增加了一个兄弟节。window.onload是入口函数,代表页面加载完毕之后执行（一个页面只能有一个window.onload，因为即使有多个，后面的也会覆盖前面的，导致前面的不生效）。需要注意的是添加元素时我们有时候使用append(),有时候使用appendChild()，他们两个是有点区别的，前者是jq里的写法，后者是js里的写法。


    
    01节点操作

1.操作属性

节点的属性操作中我们常用的是获取属性，设置属性，删除属性，分别使用以下方法：

getAttribute("属性名") 根据属性名获取属性值
setAttribute("属性名","属性值") 给节点的某个属性设置属性值
removeAttribute("属性名") 删除节点的某个属性


测试

写的还有另外一个动态生成小圆点的示例，不再这里贴代码了，感兴趣的可以到文末代码地址中看。
需要指出一点的是，我们好多时候写前端，都是先把基本的样式写好，某些需要动态生成，或通过后台取数据的再抽取出来，放在js里面，不要一上来就把想着全写出来，可能会有点吃力。


    
    04发微博
    
    



    微博发布：

resize: none可以设置textarea不可拖拉，textarea这里是双标签，有开始标签和结束标签，不能写成单标签，而且上面这个我就是先把样式写好，再把ul注释掉从js中动态生成的。

2.日期函数

Date是js中的内置对象，使用它可以创建日期，获取当前的时间。
var date = new Date(); 可以创建一个日期对象。

    var date = new Date();
    console.log(date);   //Wed Aug 30 2017 13:26:51 GMT+0800 (中国标准时间)
    console.log(date.getTime());  //1504070843457   从1970年至现在的毫秒数
    console.log(date.valueOf());  //1504070843457   跟上面的一样，但是没有上面的常用
    //直接使用的
    console.log(Date.now());  //1504070966613
    console.log(+new Date());  //1504070966613
    console.log(typeof (+"123456"));  //number

js中，在某个值前使用"+"可以将这个变量转换成Number类型，如果转换失败，将得到NaN。所以上面的+new Date()跟其它值一样。

3.1日期函数常用方法

日期函数中常用的方法如下：

方法	作用
getFullYear()	获取年（所有浏览器均支持）
getYear()	获取年（从ECMAscriptv3开始停止使用了）所以慎用！
getMonth()	获取月0-11
getDate()	获取日1-31
getDay()	获取星期0-6（跟上面获取日的要分清）
getHours()	获取小时（获取时分秒单词需要用复数）
getMinutes()	获取分钟
getSeconds()	获取秒
getMilliseconds()	获取毫秒
getTime()	获取从1970年至今的累计毫秒数

下面这一个是根据日历函数生成一个日历，其中定义一个数组来装星期的思路不错。

3.2自定义时间

有时我们自己需要自己指定时间，那么在创建时间时传一个时间参数即可

    var date = new Date("2016/09/11");
    console.log(date.getFullYear());

所以new Date()里面如果有参数，生成指定日期，如果没有参数，生成当前日期。

4.定时器

通过设定定时器可以让某个函数或动作持续的执行下去，定时器通过setInterval()函数来设定。
window.setInterval("函数名","时间间隔")；每隔指定的时间间隔去执行函数。
下面这几种写法都是可以的：

window.setInterval(fun,1000); 其中fun是已经定义好的函数名
window.setInterval(function(){//函数体},1000);
下面这两种会报错
window.setInterval(fun(),1000);
window.setInterval("fun()",1000);网上有说这种方式也可以的，但是我试了试不行（不知道是不是姿势不对）

下面的例子是一个活动的倒计时，定时器每秒执行一次，根据截至时间和当前时间算出中间相隔的毫秒数(getTime()获取1970年到指定时间的毫秒数)，再利用毫秒数计算运算转换。

代码地址：https://git.oschina.net/catchu/web-study