前端基本功--js实战5 11.05
一、
1.获取节点属性
getAttribute(属性) 获取属性
alert(demo.getAttribute("title"));
2.设置节点属性
SetAttribute(“属性”,”值”) 把属性改成什么值
div.setAttribute(“class”,”demo”);
3.删除某属性
removeAttribute(“属性”);
demo.removeAttribute(“title”)
A.appendChild(B); B 一定是 A 孩子，同时b放到了a的里面，装到里面去了最后面。b放到a里面 。
A.insertBefore（B，C） B C 都是A的孩子 把b放到a里面 ，但是是c的前面。
二、动态生成小圆点
window.onload = function () {
var scroll = document.getElementById('scroll');
var yuan = document.createElement("div");
scroll.appendChild(yuan);//在scroll后添加节点yuan
yuan.setAttribute("class","yuan"); //更改类名
var ul = document.getElementById('ul');
var lis = ul.children; //ul的所有孩子
for (var i = 0 ; i < lis.length ; i++) {
var newspan = document.createElement("span"); //新建span元素
newspan.innerHTML = i+1; //更改文字内容
yuan.appendChild(newspan); //在yuan下面创建孩子
}
}
三、
一个发布微博的小实例，通过添加节点删除节点而实现，锻炼 添加删除节点的操作思路。
<script type="text/javascript">
window.onload = function () {
var btn = document.getElementsByTagName('button')[0];
var txt = document.getElementsByTagName('textarea')[0];
var ul = document.createElement("ul");
btn.parentNode.appendChild(ul);
btn.onclick = function(){
if (txt.value == "") {
alert("不要发空微博！");
return false;
}
var newli = document.createElement("li"); //在这里思路出错 以为需要for遍历
newli.innerHTML = txt.value + "<a href = 'javascript:;'>删除</a>";
ul.appendChild(newli);
txt.value = "" ;
//实现新发布的微博在最前面
var lis = ul.children;
if (lis.length == 0){
ul.appendChild(newli);
}//如果发布了第一条，直接添加在ul下
else {
ul.insertBefore(newli,lis[0]);
}//其余的每一条都放在lis的第一个
//实现删除操作
var as = document.getElementsByTagName("a");// 获取所有a标签
for (i = 0 ; i < as.length; i++){
as[i].onclick = function(){
ul.removeChild(this.parentNode);
//点击a删除的是li标签的内容，也就是他的父级元素，在ul下删除a的父级元素li
}
}
}
四、内置对象： 内置对象就是指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用的或是最基本而必要的功能。
五、日期函数
1.Date() 可以设置本地日期，年月日时分秒。
var date = new Date(); // 声明
console.log(date.getTime()); // 提倡使用的
console.log(date.valueOf());
console.log(Date.now());// 直接使用
console.log(+new Date());
得到毫秒数。
2.常用
getDate() 获取日 1-31
getDay () 获取星期 0-6
getMonth () 获取月 0-11
getFullYear () 获取完整年份（浏览器都支持）
getHours () 获取小时 0-23
getMinutes () 获取分钟 0-59
getSeconds () 获取秒 0-59
getMilliseconds () 获取当前的毫秒
getTime () 返回累计毫秒数(从1970/1/1午夜)
- 当前日期小例子
<script type="text/javascript">
window.onload = function () {
var box = document.getElementById('box');
var child = box.children;
var date = new Date();//声明日期函数
var arr = ["星期日" ,"星期一" ,"星期二" ,"星期三" ,"星期四" ,"星期五" ,"星期六" ,]
child[0].innerHTML = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+" " + arr[date.getDay()];//星期几是小写的，所以存在数组里。
child[1].innerHTML = date.getDate();
}
</script>
window.setInterval(“执行的函数”,间隔时间)
setInterval(fun, 1000); 1000 ms 毫秒 每隔1秒钟，就去执行一次 fun 这个函数.
setInterval(“fun()”,1000) 可以用
setInterval( function(){} , 1000 )
setInterval(fun(),1000) 错误的
5.倒计时
用将来时间减去现在的时间！
用将来的毫秒数 - 现在的毫秒数 不断转换就可以了
<script>
window.onload = function(){
var demo = document.getElementById('demo');
var endTime = new Date("2017/11/11 00:00");//忘记加引号
setInterval(clock,1000);
function clock(){
var nowTime = new Date(); //写到里面，为了每次都获取最新时间
var second= parseInt((endTime.getTime() - nowTime.getTime())/1000);
// 剩下的秒数
var d = parseInt(second/3600/24); //难算
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; //易错！！
demo.innerHTML = "距离双十一还有："+d+"天"+h+"小时"+m+"分钟"+s+"秒";
}
}
</script>
总结：先定义结束时间，再调用定时器，定时函数中获取当前时间，计算剩下的时间，再计算时分秒等。
