01-获取孩子节点
childNodes 获取的包括文本
-
nodeType 为1是标签 为2是属性 为3是文本
var box = document.getElementById('box'); var btns = box.childNodes; // console.log(btns); var arrNode = []; for (var i = 0; i<btns.length; i++){ if (btns[i].nodeType == 1){ // 标签元素 arrNode.push(btns[i]); } } console.log(arrNode); children 直接可以获取到元素节点
02-获取兄弟节点
- nextElementSibling 在IE9以上用这个
- nextSibling IE9一下用这个
- 兼容写法 var next3 = btn.nextElementSibling || btn.nextSibling;
03-获取父亲节点
// 获取父亲节点
console.log(btn.parentNode);
03-通过类名获取标签的封装
getElementsByClassName() 在IE9以下无效
-
兼容写法
// 兼容写法 function getEleClassName(dom,className) { if (dom.getElementsByClassName){ // 此方法可以识别 return dom.getElementsByClassName(className); }else { // 方法不能识别 *通配符选择器,可以获取dom下面的所有标签 var eles = dom.getElementsByTagName('*'); // 存放标签 var tempArr = []; for(var i = 0; i<eles.length; i++){ if (eles[i].className == className){ tempArr.push(eles[i]); } } return tempArr; } }
04-节点的使用&九宫格动态创建
// 1.获取标签
var btns = document.getElementById('box').getElementsByTagName('button');
var bottom = document.getElementById('bottom');
// 2.添加节点
// 用来存放节点
var array = [];
// 总列数
var count = 3;
// 当前行号
var row = 0;
// 当前列号
var col = 0;
// 间距
var margin = 10;
// 添加节点
btns[0].onclick = function () {
// 2.1 创建节点
var div = document.createElement('div');
bottom.appendChild(div);
div.className = 'curr';
// 添加到数组
array.push(div);
// 遍历
for (var i = 0; i < array.length; i++) {
row = parseInt(i / count);
col = i % count;
array[i].style.left = col * (100 + margin) + 'px';
array[i].style.top = row * (100 + margin) + 'px';
}
};
// 删除节点
btns[1].onclick = function () {
// 删除节点
bottom.removeChild(array.pop());
}
05-发微博
// 1.获取标签
var box = document.getElementById('box');
var textA = box.children[0];
var btn = box.children[1];
var oul = box.children[2];
// 2.添加点击事件
btn.onclick = function () {
var content = textA.value;
if (content == ''){
// 判断有没有内容,如果没有内容直接返回
alert('请输入内容');
return;
}
// 1.创建li
var oli = document.createElement('li');
var oa = document.createElement('a');
oa.innerHTML = '删除';
oli.innerHTML = textA.value;
oli.appendChild(oa);
// 清空内容
textA.value = '';
oul.insertBefore(oli,oul.children[0]);
// if(oul.children.length > 0){
// }else {
// // 第一次添加到头部
// oul.appendChild(oli);
// }
// 给a标签绑定事件
oa.onclick = function () {
oul.removeChild(this.parentNode);
}
}
06-日期对象的认识
- getFullYear() 从 Date 对象以四位数字返回年份。
- getMonth() 从 Date 对象返回月份 (0 ~ 11)。
- getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
- getHours() 返回 Date 对象的小时 (0 ~ 23)。
- getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
- getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
- getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
- getTime() 返回 1970 年 1 月 1 日至今的毫秒数。 时间戳
- valueOf() 返回 Date 对象的原始值。 时间戳
1969年8月,贝尔实验室的程序员肯汤普逊利用B编译语言，创造了C语言.
最初计算机操作系统是32位，而时间也是用32位表示。也就是说32位能表示的最长时间是68年，而实际上到2038年01月19日03时14分07秒，便会到达最大时间，过了这个时间点，所有32位操作系统时间便会变为10000000 00000000 00000000 00000000，也就是1901年12月13日20时45分52秒，这样便会出现时间回归的现象，很多软件便会运行异常了。
到这里，我想问题的答案已经出来了:因为用32位来表示时间的最大间隔是68年，而最早出现的UNIX操作系统考虑到计算机产生的年代和应用的时限综合取了1970年1月1日作为UNIX TIME的纪元时间(开始时间)，至于时间回归的现象相信随着64为操作系统的产生逐渐得到解决，因为用64位操作系统可以表示到292,277,026,596年12月4日15时30分08秒，相信我们的N代子孙，哪怕地球毁灭那天都不用愁不够用了，因为这个时间已经是千亿年以后了。
07-自定义时间
-
如果括号里面没有写日期,就是代表默认获取当前的时间,如果写了就是自定义的时间
// 1.自定义时间 // 如果括号里面没有写日期,就是代表默认获取当前的时间,如果写了就是自定义的时间 var date = new Date('2018/2/23 10:10:10'); console.log(date.getFullYear()); console.log(date.getMonth()); console.log(date.getDate()); var mins = date.getTime(); // 计算事件差 var nowDate = new Date(); // 获取当前的毫秒数 var nowMins = nowDate.getTime(); console.log(mins); console.log(nowMins); console.log(mins - nowMins);
08-钟表案例
// 1.获取标签
var h = document.getElementById('hour');
var m = document.getElementById('minute');
var s = document.getElementById('second');
// 2.获取当前的时分秒
setInterval(function () {
var date = new Date();
// 获取毫秒
// var minSecond = date.getMilliseconds();
// 秒针
var second = date.getSeconds();
// 分针
var minute = date.getMinutes();
// 时针
var hour = date.getHours()%12 + minute/60;
// 2.2旋转
// 秒针
s.style.transform = 'rotate('+ second*6 +'deg)';
m.style.transform = 'rotate('+ minute*6 +'deg)';
h.style.transform = 'rotate('+ hour*30 +'deg)';
},100)
01.设置字符翻转以及移动到不同行上显示不同的颜色
!important 提升优先级
02.九宫格算法的分析
03.九宫格算法的分析以及实现
// 遍历
// 总列数
var count = 3;
// 当前列号
var col = 0;
// 当前行号
var row = 0;
// 间距
var margin = 10;
for(var i = 0; i<list.length; i++){
// 计算当前的行号
col = i % count;
// 计算当前的列号
row = parseInt(i / count);
list[i].style.left = col * (100 + margin) + 'px';
list[i].style.top = row * (100 + margin) + 'px';
list[i].style.position = 'absolute';
}
04.tab切换的实现
-
通过这个案例主要讲解标签的属性可以自定义
// 1.获取标签 var btns = document.getElementById('top').getElementsByTagName('button'); var divs = document.getElementById('bottom').getElementsByTagName('div'); // 2.添加事件 for(var i = 0; i < btns.length; i++){ // 标签的属性可以自定义, 可以自己增加一个属性,在需要的时候取出来使用 btns[i].index = i; btns[i].onclick = function () { // 2.1排他思想 for(var i = 0; i < btns.length; i++){ btns[i].className = ''; } this.className = 'curr'; // 2.2 切换div // 设置所有的盒子为 none for (var i = 0; i < divs.length; i++){ divs[i].style.display = 'none'; } // 设置当前点击对应的盒子为 block divs[this.index].style.display = 'block'; } }
05.数组的常用方法
1.concat() 连接两个或更多的数组，并返回结果。
2.push() 向数组的末尾添加一个或更多元素，并返回新的长度。
3.pop() 删除并返回数组的最后一个元素
4.unshift()向数组的开头添加一个或更多元素，并返回新的长度。
5.shift() 删除并返回数组的第一个元素
6.slice() 第一个参数代表从数组的那个索引开始截取, 第二个参数代表截取到那个索引停止 会返回一个截取后新的数组,而原始数组不会发生改变
-
7.splice() 删除元素，并向数组添加新元素。
第一个参数 index 代表要从数组的那个位置开始删除
第二个参数 howmany 代表要删除元素的个数
-
item1, ..., itemX 可选。向数组添加的新项目。 在删除的位置添加新的选项可以添加多个
console.log(arr.splice(1, 2,'隔壁老王')); console.log(arr);
-
8.join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
-
用来切割数组,将其转换为字符串, 默认用逗号隔开 原数组不变
console.log(arr.join('*')); 张三*李四*王五*3*刘二麻子
-
-
9.sort() 对数组的元素进行排序 会改变元数组
a>b 为升序 a<b 为降序 var arr1= [0, 3, 2, 5,7]; arr1.sort(function (a,b) { return a>b; }); console.log(arr1);
06.字符串的常用方法
1.字符串截取保留2为小数
2.indexOf() 检索字符串。返回指定的索引 从前面查找
3.lastIndexOf() 从后向前搜索字符串。
4.charAt() 返回在指定位置的字符。
5.charCodeAt()返回在指定的位置的字符的 Unicode 编码。
-
6.slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
如果传入一个参数会从这个位置截取到最后 7.split() 把字符串分割为字符串数组。
8.toLowerCase() 把字符串转换为小写。
9.toUpperCase() 把字符串转换为大写。
07.判断文件的格式是否正确
// 1.获取标签
var oinput = document.getElementById('oinput');
// 2.添加事件
oinput.onchange = function () {
// alert(oinput.value);
// 2.1截取
var text = oinput.value;
var index = text.lastIndexOf('.');
// 转换为小写
var lastName = text.slice(index+1).toLowerCase();
if(lastName == 'png' || lastName == 'jpg'){
alert('格式正确');
}else {
alert('格式不正确,请上传格式为png或者jpg的图片');
}
}
08.定时器
1.多次定时器
-
定时器注意点: 如果定时器不用的话一定要清空,否则会造成内存泄漏
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
-
setInterval() 方法会不停地调用函数，直到 clearInterva() 被调用或窗口被关闭
/* * setInterval() * 多次定时器 可以间隔固定的时间执行某段代码 * 第一个参数 要执行的代码块, 函数名 * 第二个参数 间隔时间 单位ms 毫秒 * */ var timer = null; timer = setInterval(fn,1000); function fn() { alert('我是多次定时器'); } // 清空多次定时器 clearInterval(timer);
-
- 一次定时器
-
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
/*一次定时器 延迟多少秒执行 setTimeout(fn,1000); 第一个参数 要执行的代码块, 函数名 第二个参数 间隔时间 单位ms 毫秒 * */ var timer = null; timer = setTimeout(fn,1000); function fn() { alert('我是一次定时器'); } // 清空一次定时器 clearTimeout(timer);
09.定时器匀速动画
// 1.获取标签
var btn = document.getElementById('btn');
var box = document.getElementById('box');
// 2.添加事件
btn.onclick = function () {
linear(box,0,4,800);
};
// 抽取函数
/**
* 匀速动画
* @param begin 初始值
* @param speed 速度
* @param target 目标值
*/
function linear(dom,begin,speed,target) {
// 1.清空上次定时器
clearInterval(dom.timer);
// 2.开启定时器
dom.timer = setInterval(function () {
begin += speed;
// 判断终止条件
if (begin >= target) {
clearInterval(dom.timer);
begin = target;
}
dom.style.left = begin + 'px';
}, 10);
}
10.定时器缓动动画
// 1.获取标签
var btn = document.getElementById('btn');
var box = document.getElementById('box');
// 定时器
var timer = null;
// 目标值
var target = 800;
// 初始值
var begin = 0;
// 速度
var speed = 0;
// 2.添加事件
btn.onclick = function () {
// 2.1 清除定时器
clearInterval(timer);
timer = setInterval(function () {
speed = (target - begin) / 10;
begin += speed;
// 四舍五入函数 round()
if (Math.round(begin) >= target) {
clearInterval(timer);
// alert('定时器清空');
begin = target;
}
console.log(begin);
box.style.left = begin + 'px';
}, 50)
}
4256-106.jpg
01.点名册案例
// 1.获取标签
var btns = document.getElementById('box').getElementsByTagName('button');
var oh1 = document.getElementById('oh1');
// 2.添加事件
// 开始
var timer = null;
var arr = ['张三','李四','王五','刘二麻子','二狗','小明','隔壁老王'];
btns[0].onclick = function () {
// 清空定时器
clearInterval(timer);
timer = setInterval(function () {
// 1.生成随机数 生成 0-1的随机数,但是不能取到1
var randomNum = parseInt(Math.random() * arr.length);
// 2.从数组中取出值
oh1.innerHTML = arr[randomNum];
},10);
};
// 停止
btns[1].onclick = function () {
clearInterval(timer);
}
02.长图展示
// 1.获取标签
var spans = document.getElementById('box').getElementsByTagName('span');
var pic = document.getElementById('pic');
// 2.添加事件
var timer = null;
var begin = 0;
var speed = 4;
spans[0].onmouseover = function () {
clearInterval(timer);
timer = setInterval(function () {
begin -= speed;
if (begin <= -505){
clearInterval(timer);
begin = -505;
}
pic.style.top = begin + 'px';
},10)
};
spans[1].onmouseover = function () {
clearInterval(timer);
timer = setInterval(function () {
begin += speed;
if (begin >= 0){
clearInterval(timer);
begin = 0;
}
pic.style.top = begin + 'px';
},10)
}
03.展示阴影
<div id="box">
<span id="cover"></span>
</div>
// 1.获取标签
var box = document.getElementById('box');
var cover = document.getElementById('cover');
// 2.添加点击事件
var timer = null;
var begin = 150;
box.onmouseover = function () {
clearInterval(timer);
timer = setInterval(function () {
begin -= 3;
if (begin <= 0){
clearInterval(timer);
begin = 0;
}
cover.style.top = begin + 'px';
},10);
}
04.js定时器原理
- 一次定时器 在指定时间内, 将任务放入事件队列,等待js引擎空闲后被执行.
- setInterval(fn, 100)容易产生误区：并不是上一次fn执行完了之后再过100ms才开始执行下一次fn。 事实上，setInterval并不管上一次fn的执行结果，而是每隔100ms就将fn放入主线程队列，而两次fn之间具体间隔多久就不一定了。
- 定时器的用处, 如果有很多节点渲染,可以将多个节点放入定时器中来执行,这样就不会阻塞线程,提高用户体验
05.一次定时器执行多次操作以及递归的认识
var box = document.getElementById('box');
var timer = setTimeout(jump,1000);
var count = 5;
function jump() {
// 每次进来先清空上一个定时器
clearTimeout(timer);
count--;
box.innerHTML = '要在' + count + '秒后跳转';
if (count <= 0){
window.location.href = 'http://www.baidu.com';
}else {
// timer = setTimeout(jump,1000);
timer = setTimeout(arguments.callee,1000);
// 递归:自己搞自己, 自己调用自己
// arguments.callee 在函数内部指的是函数本身
}
}
06.简单轮播图的认识
// 1.获取标签
var oul = document.getElementById('oul');
// 2.图片轮播
// 初始值
var begin = 0;
setInterval(function () {
begin -= 4;
if (begin <= -1200){
begin = 0;
}
oul.style.left = begin + 'px';
},20)
07.左右轮播图
// 1.获取标签
var spans = document.getElementById('box').getElementsByTagName('span');
var oul = document.getElementById('oul');
// 2.添加点击事件
// 点击右侧
var timer = null;
// 偏移量
var begin = 0;
// 索引
var loop = 0;
// 速度
var speed = 4;
// 记录标志
var flag = true;
spans[1].onclick = function () {
if (flag == false) return;
flag = false;
// 页码自增1
loop++;
if (loop > 5){
// 重置页码为1
loop = 1;
// 重置偏移量
begin = 0;
}
timer = setInterval(function () {
begin -= speed;
if (begin <= loop * -640){
clearInterval(timer);
begin = -640 * loop;
flag = true;
}
oul.style.left = begin + 'px';
},10)
};
// 左边
spans[0].onclick = function () {
if (flag == false) return;
flag = false;
loop--;
if (loop < 0){
loop = 4;
begin = 5 * -640;
}
timer = setInterval(function () {
begin += speed;
if (begin >= loop * -640){
clearInterval(timer);
begin = -640 *loop;
flag = true;
}
oul.style.left = begin + 'px';
},10);
}
08.发送验证码
// 1.获取标签
var btn = document.getElementById('btn');
// 2.添加事件
var timer = null;
// 剩余的秒数
var count = 5;
btn.onclick = function () {
// 2.1 禁止按钮点击
this.disabled = true;
// this 在定时器中指向窗口,因为开启定时期的时候本身就是window.setInterval()
// 备份指针
var that = this;
// 2.2 倒计时
timer = window.setInterval(function () {
count--;
if(count < 0){
clearInterval(timer);
count = 5;
that.disabled = false;
that.innerHTML = '重新发送验证码';
}else {
that.innerHTML = '剩余' + count + '秒';
}
},1000)
}
09.节点操作
// 1.创建节点
var h1 = document.createElement('h1');
h1.innerHTML = '我是标题';
// 2.添加节点
// appendChild 在节点后面添加
// document.body.appendChild(h1);
var box = document.getElementById('box');
// insertBefore 第一个参数是要插入的节点, 第二个参数是要插入到那个节点前面 如果为null则插入到最后面
document.body.insertBefore(h1,box);
// 创建节点
var div = document.createElement('div');
div.style.width = '200px';
div.style.height = '200px';
div.style.background = 'red';
document.body.appendChild(div);
// 3.删除节点 要删除的节点
document.body.removeChild(box);
// 4.克隆节点
// cloneNode 如果为true就会复制节点里面的所有孩子节点,包括样式
// 如果为false 就只是赋值自己
var ele = box.cloneNode(false);
console.log(ele);
ele.style.marginTop = '10px';
// 添加节点
document.body.appendChild(ele);
// 替换节点
var box = document.getElementById('box');
var h1 = document.createElement('h1');
h1.innerHTML = '我是标题';
document.body.replaceChild(h1,box);
198750-106.jpg
