0.操作节点
复习上一节的节点操作，append添加子节点，而且子节点在最后一个位置，cloneNode()，克隆节点，括号里面可以加参数，如果是true则是深克隆（克隆当前节点及其子节点），如果是false则是浅克隆，只可能当前选中的节点；parentNode父节点，给我的父节点增加子节点其实相当于给我增加了一个兄弟节。window.onload是入口函数,代表页面加载完毕之后执行（一个页面只能有一个window.onload，因为即使有多个，后面的也会覆盖前面的，导致前面的不生效）。需要注意的是添加元素时我们有时候使用append(),有时候使用appendChild()，他们两个是有点区别的，前者是jq里的写法，后者是js里的写法。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<head>
<meta charset="UTF-8">
<title>01节点操作</title>
<script>
window.onload = function(){
var demo = document.getElementById("demo");
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
//创建标签
var newLi = document.createElement("li");
newLi.innerHTML = "测试创建节点"
demo.appendChild(newLi);
demo.parentNode.appendChild(demo.cloneNode(true));
}
}
</script>
</head>
<body>
<button>点击</button>
<ul id="demo">
</ul>
</body>
1.操作属性
节点的属性操作中我们常用的是获取属性，设置属性，删除属性，分别使用以下方法：
- getAttribute(“属性名”) 根据属性名获取属性值
- setAttribute(“属性名”,”属性值”) 给节点的某个属性设置属性值
- removeAttribute(“属性名”) 删除节点的某个属性
1
2
3
4
5
6
7
8
9<body>
<div id="demo" class="test" title="测试">测试</div>
</body>
<script>
var demo = document.getElementById("demo");
console.log(demo.getAttribute("class"));//获取属性
demo.setAttribute("class","show"); //设置节点
demo.removeAttribute("title"); //删除节点
</script>
写的还有另外一个动态生成小圆点的示例，不再这里贴代码了，感兴趣的可以到文末代码地址中看。
需要指出一点的是，我们好多时候写前端，都是先把基本的样式写好，某些需要动态生成，或通过后台取数据的再抽取出来，放在js里面，不要一上来就把想着全写出来，可能会有点吃力。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75<head>
<meta charset="UTF-8">
<title>04发微博</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
.box{
width: 600px;
margin: 100px auto;
border:1px solid #ccc;
padding: 20px;
height: auto;
}
textarea{
width: 450px;
resize: none; /*固定使其不可拖拉*/
}
.box li{
line-height: 30px;
border-bottom: 1px dashed #ccc;
padding-left: 80px;
width: 450px;
}
.box ul a{
float: right;
}
</style>
<script>
window.onload = function(){
var btn = document.getElementsByTagName("button")[0];
var txt = document.getElementsByTagName("textarea")[0];
//创建ul并追加
var ulEle = document.createElement("ul");
btn.parentNode.appendChild(ulEle);
btn.onclick = function(){
if(txt.value==""){
alert("内容不能为空");
return; //停止代码执行
}
//创建li
var liEle = document.createElement("li");
liEle.innerHTML = txt.value+"<a href ='javascript:;'>删除</a>";
txt.value=""; //清空
//判断有无li，把新添加的li放在最前面
var lis = ulEle.children;
if(lis.length==0){
ulEle.appendChild(liEle)
}else{
ulEle.insertBefore(liEle,lis[0]);
}
//点击删除按钮时进行删除
var as = document.getElementsByTagName("ul")[0].getElementsByTagName("a");
for(var i=0;i<as.length;i++){
as[i].onclick = function(){
ulEle.removeChild(this.parentNode); //从ul中移除当前的li
}
}
}
}
</script>
</head>
<body>
<div class="box">
微博发布：<textarea id="" name="" cols="40" rows="10" ></textarea><button>发布</button>
<!--<ul>-->
<!--<li>合法你考虑到发交话费拉克丝发挥到了开始<a href="javascript:;">删除</a></li>-->
<!--</ul>-->
</div>
</body>
resize: none可以设置textarea不可拖拉，textarea这里是双标签，有开始标签和结束标签，不能写成单标签，而且上面这个我就是先把样式写好，再把ul注释掉从js中动态生成的。
2.日期函数
Date是js中的内置对象，使用它可以创建日期，获取当前的时间。
var date = new Date(); 可以创建一个日期对象。1
2
3
4
5
6
7
8var 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()跟其它值一样。
2.1日期函数常用方法
日期函数中常用的方法如下：
| 方法 | 作用 |
|---|---|
| getFullYear() | 获取年（所有浏览器均支持） |
| getYear() | 获取年（从ECMAscriptv3开始停止使用了） 所以慎用！ |
| getMonth() | 获取月0-11 |
| getDate() | 获取日1-31 |
| getDay() | 获取星期0-6（跟上面获取日的要分清） |
| getHours() | 获取小时 （获取时分秒单词需要用复数） |
| getMinutes() | 获取分钟 |
| getSeconds() | 获取秒 |
| getMilliseconds() | 获取毫秒 |
| getTime() | 获取从1970年至今的累计毫秒数 |
1 | <script> |
下面这一个是根据日历函数生成一个日历，其中定义一个数组来装星期的思路不错。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45<head>
<meta charset="UTF-8">
<title>06日历</title>
<style>
.box{
width: 150px;
height: 180px;
margin: 100px auto;
background-color: #336699;
text-align: center;
}
.box p{
line-height: 60px;
color: #FFFFFF;
font-size: 12px;
}
.box span{
display: block;
width: 75px;
height: 75px;
background-color:#9ACD32 ;
margin: 0 auto;
line-height: 75px;
font-size: 50px;
color: #000000;
}
</style>
<script>
window.onload = function(){
var box = document.getElementById("box");
var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var childrens = box.children;
var date = new Date();
childrens[0].innerHTML = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+
arr[date.getDay()];
childrens[1].innerHTML = date.getDate();
}
</script>
</head>
<body>
<div class="box" id="box">
<p>432431</p>
<span>3</span>
</div>
</body>
2.2自定义时间
有时我们自己需要自己指定时间，那么在创建时间时传一个时间参数即可1
2var date = new Date("2016/09/11");
console.log(date.getFullYear());
所以new Date()里面如果有参数，生成指定日期，如果没有参数，生成当前日期。
3.定时器
通过设定定时器可以让某个函数或动作持续的执行下去，定时器通过setInterval()函数来设定。
window.setInterval(“函数名”,”时间间隔”)；每隔指定的时间间隔去执行函数。
下面这几种写法都是可以的：
- window.setInterval(fun,1000); 其中fun是已经定义好的函数名
- window.setInterval(function(){//函数体},1000);
下面这两种会报错 - window.setInterval(fun(),1000);
- window.setInterval(“fun()”,1000);网上有说这种方式也可以的，但是我试了试不行（不知道是不是姿势不对）
1
2
3
4
5
6
7
8
9
10
11<script>
window.onload = function (){
var demo = document.getElementById("demo");
var num=1;
function myInterval(){
num++;
demo.innerHTML = num;
}
window.setInterval(myInterval,1000);
}
</script>
下面的例子是一个活动的倒计时，定时器每秒执行一次，根据截至时间和当前时间算出中间相隔的毫秒数(getTime()获取1970年到指定时间的毫秒数)，再利用毫秒数计算运算转换。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37 <style>
span{
display: block;
font-size: 30px;
color: red;
text-align: center;
}
</style>
<script>
window.onload = function(){
var endTime = new Date("2017-08-31 24:00:00");
var spanEle = document.getElementsByTagName("span")[0];
setInterval(clock,1000); //开启定时器，每秒执行一次
function clock(){
var startTime = new Date();
var minSecond = endTime.getTime()-startTime.getTime(); //得到距离截止时间还有多少毫秒
var second = parseInt(minSecond/1000); //得到秒数
var d = parseInt(second/24/3600); //得到天数
var h = parseInt(second/3600%24); //得到小时
var m = parseInt(second/60%60); //得到分钟
var s = parseInt(second%60); //得到秒数
d<10?d="0"+d:d;
h<10?h="0"+h:h;
m<10?m="0"+m:m;
s<10?s="0"+s:s;
spanEle.innerHTML = "距离活动结束还有"+d+"天"+h+"小时"+m+"分钟"+s+"秒";
}
}
</script>
</head>
<body>
<div>
<span>
5634298
</span>
</div>
</body>
