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.;
}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
