1. 节点 网页是有很多的节点组成的 。
元素节点 指的是 : 标签 li span
文本节点 属性节点
父子兄弟 父 parentNode nextSibling
孩子 childNodes nodeType == 1 来判断是否是 元素节点
<ul>
<li>
》》》》
最喜欢用的 children 只得到 元素节点
1.获取节点属性 getAttribute(“title”)
2.设置节点属性 setAttribute (“class”,”one”)
3.删除节点属性 removeAttribute(“title”);
4. 日期函数 Date();
声明: var date = new Date();
使用: 得到现在的年分 date.getFullYear();
月份: date.getMonth();
日子; date.getDate();
星期: date.getDay();
5. 定时器
定时器 不需要人工操作 按照一定的时间进行某种动作。
setInterval(“函数”,间隔时间 ) 每隔 n秒去执行一次函数
2. 时钟案例
分两步进行的。
第一步: 要得到现在的 时 分 秒
但是这里面有一个小玄机。
比如现在是 9点整 时针指向 9 是没错的
但是如果现在是 9点半 时针应该指向的是 9到10 之间 才对
所以,我们不但要得到现在的小时,还要得到 已经过去了多少分
ms = date.getMilliseconds(); // 现在的毫秒数
s = date.getSeconds() + ms / 1000; // 得到秒 1.3 s
m = date.getMinutes() + s / 60; // 得到的是分数 45.6分钟
h = date.getHours() % 12 + m / 60 ;
旋转角度原理
秒针 一秒 走多少度呢 ?
一圈 360 ° 一共有 60 秒 每秒 6 °
分针 一圈 360 一圈走 60次 每次 6° 每分钟 6°
时针 一圈 360 一共 12 个 表盘没有24小时 每个小时走 30°
完整代码: <script> var hour = document.getElementById("hour"); var minute = document.getElementById("minute"); var second = document.getElementById("second"); // 开始定时器 var s = 0,m = 0, h = 0, ms = 0; setInterval(function() { // 内容就可以了 var date = new Date(); // 得到最新的时间 ms = date.getMilliseconds(); // 现在的毫秒数 s = date.getSeconds() + ms / 1000; // 得到秒 1.3 s m = date.getMinutes() + s / 60; // 得到的是分数 45.6分钟 h = date.getHours() % 12 + m / 60 ; // console.log(h); // 旋转角度 // 一圈 360 ° 一共有 60 秒 每秒 6 ° 现在是 s秒 second.style.WebkitTransform = "rotate("+ s*6 +"deg)"; // 变化 旋转 deg 度 minute.style.WebkitTransform = "rotate("+ m*6 +"deg)"; hour.style.WebkitTransform = "rotate("+ h*30 +"deg)"; second.style.MozTransform = "rotate("+ s*6 +"deg)"; // 变化 旋转 deg 度 minute.style.MozTransform = "rotate("+ m*6 +"deg)"; hour.style.MozTransform = "rotate("+ h*30 +"deg)"; },30); </script>