javascript
JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】
學習地址:
JavaScript基礎、高級學習筆記匯總表【尚硅谷最新版JavaScript基礎全套教程完整版(140集實戰教學,JS從入門到精通)】
目? ?錄
Window 對象屬性
P125?125.尚硅谷_JS基礎_History?11:21
History 對象
P126?126.尚硅谷_JS基礎_Location?11:44
Location 對象
P127?127.尚硅谷_JS基礎_定時器簡介?17:23
Screen 對象
Window 對象
setInterval():定時調用
clearInterval():關閉一個定時器
P128?128.尚硅谷_JS基礎_切換圖片練習?20:53
P129?129.尚硅谷_JS基礎_修改div移動練習?10:21
P130?130.尚硅谷_JS基礎_延時調用?05:47
P131?131.尚硅谷_JS基礎_定時器的應用(一)?22:33
P132?132.尚硅谷_JS基礎_定時器的應用(二)?17:11
P133?133.尚硅谷_JS基礎_定時器的應用(三)?20:17
各自控制各自的定時器,互不干擾
obj.style[xxx]和obj.style.xxx
回調函數?callback()
P134?134.尚硅谷_JS基礎_完成輪播圖界面?34:49
P135?135.尚硅谷_JS基礎_完成點擊按鈕切換圖片?17:08
P124?124.尚硅谷_JS基礎_Navigator?41:16
BOM
- 瀏覽器對象模型。
- BOM可以使我們通過JS來操作瀏覽器。
- 在BOM中為我們提供了一組對象,用來完成對瀏覽器的操作。
- BOM對象
這些BOM對象(全局對象)在瀏覽器中都是作為window對象的屬性保存的,可以通過window對象來使用,也可以直接使用。
Window 對象屬性
? 瀏覽器對象
Navigator 對象屬性
Navigator
- 火狐的userAgent:Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
- Chrome的userAgent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
- IE8:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
- IE9:Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
- IE10:Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
- IE11:Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko。在IE11中已經將微軟和IE相關的標識都去除了,所以我們基本已經不能通過UserAgent來識別一個瀏覽器是否是IE了。
!!:!取反,兩個就是反反,但是會轉為布爾類型。
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><script type="text/javascript">alert(navigator.appName);var ua = navigator.userAgent;console.log(ua);if (/firefox/i.test(ua)) {alert("你是火狐!!!");} else if (/chrome/i.test(ua)) {alert("你是Chrome");} else if (/msie/i.test(ua)) {alert("你是IE瀏覽器~~~");} else if ("ActiveXObject" in window) {alert("你是IE11,槍斃了你~~~");}/** 如果通過UserAgent不能判斷,還可以通過一些瀏覽器中特有的對象,來判斷瀏覽器的信息* 比如:ActiveXObject*/// window.ActiveXObject:沒有,返回undefined;ActiveXObject沒有則會報錯if ("ActiveXObject" in window) {alert("你是IE,我已經抓住你了~~~");} else {alert("你不是IE~~~");}/*alert("ActiveXObject" in window);*/</script></head><body></body> </html>P125?125.尚硅谷_JS基礎_History?11:21
History 對象
P126?126.尚硅谷_JS基礎_Location?11:44
Location 對象
- Location:該對象中封裝了瀏覽器的地址欄的信息。
- assign():用來跳轉到其他的頁面,作用和直接修改location一樣。
- reload():用于重新加載當前頁面,作用和刷新按鈕一樣。
- replace():可以使用一個新的頁面替換當前頁面,調用完畢也會跳轉頁面。
P127?127.尚硅谷_JS基礎_定時器簡介?17:23
Screen 對象
Window 對象
setInterval():定時調用
clearInterval():關閉一個定時器
setInterval()
- 定時調用
- 可以將一個函數,每隔一段時間執行一次
- 參數:1.回調函數,該函數會每隔一段時間被調用一次;2.每次調用間隔的時間,單位是毫秒。
- 返回值:返回一個Number類型的數據,這個數字用來作為定時器的唯一標識。
clearInterval()
- 可以用來關閉一個定時器,方法中需要一個定時器的標識作為參數,這樣將關閉標識對應的定時器。
P128?128.尚硅谷_JS基礎_切換圖片練習?20:53
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function() {/** 使圖片可以自動切換*///獲取img標簽var img1 = document.getElementById("img1");//創建一個數組來保存圖片的路徑var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];//創建一個變量,用來保存當前圖片的索引var index = 0;//定義一個變量,用來保存定時器的標識var timer;//為btn01綁定一個單擊響應函數var btn01 = document.getElementById("btn01");btn01.onclick = function() {/** 目前,我們每點擊一次按鈕,就會開啟一個定時器,* 點擊多次就會開啟多個定時器,這就導致圖片的切換速度過快,* 并且我們只能關閉最后一次開啟的定時器*///在開啟定時器之前,需要將當前元素上的其他定時器關閉clearInterval(timer);/** 開啟一個定時器,來自動切換圖片*/timer = setInterval(function() {//使索引自增index++;//判斷索引是否超過最大索引/*if(index >= imgArr.length){//則將index設置為0index = 0;}*/index %= imgArr.length;//修改img1的src屬性img1.src = imgArr[index];}, 1000);};//為btn02綁定一個單擊響應函數var btn02 = document.getElementById("btn02");btn02.onclick = function() {//點擊按鈕以后,停止圖片的自動切換,關閉定時器/** clearInterval()可以接收任意參數,* 如果參數是一個有效的定時器的標識,則停止對應的定時器* 如果參數不是一個有效的標識,則什么也不做*/clearInterval(timer);};};</script></head><body><img id="img1" src="img/1.jpg" /><br /><br /><button id="btn01">開始</button><button id="btn02">停止</button></body> </html>P129?129.尚硅谷_JS基礎_修改div移動練習?10:21
使用“定時器”解決方塊移動卡頓問題。總思路:將方向、速度分開控制。鍵盤控制方向,速度由定時器控制。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;position: absolute;}</style><script type="text/javascript">//使div可以根據不同的方向鍵向不同的方向移動/** 按左鍵,div向左移* 按右鍵,div向右移* 。。。*/window.onload = function() {//定義一個變量,來表示移動的速度var speed = 10;//創建一個變量表示方向//通過修改dir來影響移動的方向var dir = 0;//開啟一個定時器,來控制div的移動setInterval(function() {/** 37 左* 38 上* 39 右* 40 下*/switch (dir) {case 37://alert("向左"); left值減小box1.style.left = box1.offsetLeft - speed + "px";break;case 39://alert("向右");box1.style.left = box1.offsetLeft + speed + "px";break;case 38://alert("向上");box1.style.top = box1.offsetTop - speed + "px";break;case 40://alert("向下");box1.style.top = box1.offsetTop + speed + "px";break;}}, 30);//為document綁定一個按鍵按下的事件document.onkeydown = function(event) {event = event || window.event;//當用戶按了ctrl以后,速度加快if (event.ctrlKey) {speed = 50;} else {speed = 10;}//使dir等于按鍵的值dir = event.keyCode;};//當按鍵松開時,div不再移動document.onkeyup = function() {//設置方向為0dir = 0;};};</script></head><body><div id="box1"></div></body> </html>P130?130.尚硅谷_JS基礎_延時調用?05:47
延時調用
- 延時調用一個函數不馬上執行,而是隔一段時間以后再執行,而且只會執行一次。
- 延時調用和定時調用的區別,定時調用會執行多次,而延時調用只會執行一次。
- 延時調用和定時調用實際上是可以互相代替的,在開發中可以根據自己需要去選擇。
P131?131.尚硅谷_JS基礎_定時器的應用(一)?22:33
parseInt():將字符串中的合法數字提取出來。
??
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}#box1 {width: 100px;height: 100px;background-color: red;position: absolute;left: 0;}#box2 {width: 0;height: 1000px;border-left: 1px black solid;position: absolute;left: 800px;top: 0;}</style><script type="text/javascript">window.onload = function() {//獲取box1var box1 = document.getElementById("box1");//獲取btn01var btn01 = document.getElementById("btn01");//定義一個變量,用來保存定時器的標識var timer;//點擊按鈕以后,使box1向右移動(left值增大)btn01.onclick = function() {//關閉上一個定時器clearInterval(timer);//開啟一個定時器,用來執行動畫效果timer = setInterval(function() {//獲取box1的原來的left值var oldValue = parseInt(getStyle(box1, "left"));//在舊值的基礎上增加var newValue = oldValue + 11;//判斷newValue是否大于800if (newValue > 800) {newValue = 800;}//將新值設置給box1box1.style.left = newValue + "px";// //當元素移動到800px時,使其停止執行動畫// if (newValue == 800) {// //達到目標,關閉定時器// clearInterval(timer);// }}, 30);};};/** 定義一個函數,用來獲取指定元素的當前的樣式* 參數:* obj 要獲取樣式的元素* name 要獲取的樣式名*/function getStyle(obj, name) {if (window.getComputedStyle) {//正常瀏覽器的方式,具有getComputedStyle()方法return getComputedStyle(obj, null)[name];} else {//IE8的方式,沒有getComputedStyle()方法return obj.currentStyle[name];}}</script></head><body><button id="btn01">點擊按鈕以后box1向右移動</button><br /><br /><div id="box1"></div><div id="box2"></div></body> </html>P132?132.尚硅谷_JS基礎_定時器的應用(二)?17:11
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}#box1 {width: 100px;height: 100px;background-color: red;position: absolute;left: 0;}#box2 {width: 0;height: 1000px;border-left: 1px black solid;position: absolute;left: 800px;top: 0;}</style><script type="text/javascript">window.onload = function() {//獲取box1var box1 = document.getElementById("box1");//獲取btn01var btn01 = document.getElementById("btn01");//獲取btn02var btn02 = document.getElementById("btn02");//點擊按鈕以后,使box1向右移動(left值增大)btn01.onclick = function() {move(box1, 800, 10);};//點擊按鈕以后,使box1向左移動(left值減小)btn02.onclick = function() {move(box1, 0, 10);};};var timer; // 定義一個變量,用來保存定時器的標識//嘗試創建一個可以執行簡單動畫的函數/** 參數:* obj:要執行動畫的對象* target:執行動畫的目標位置* speed:移動的速度(正數向右移動,負數向左移動)*/function move(obj, target, speed) {clearInterval(timer); // 關閉上一個定時器var current = parseInt(getStyle(obj, "left")); // 獲取元素目前的位置//判斷速度的正負值//如果從0 向 800移動,則speed為正//如果從800向0移動,則speed為負if (current > target) {//此時速度應為負值speed = -speed;}timer = setInterval(function() { // 開啟一個定時器,用來執行動畫效果//獲取box1的原來的left值var oldValue = parseInt(getStyle(obj, "left"));//在舊值的基礎上增加var newValue = oldValue + speed;//判斷newValue是否大于800//從800 向 0移動//向左移動時,需要判斷newValue是否小于target//向右移動時,需要判斷newValue是否大于targetif ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {newValue = target;}//將新值設置給box1obj.style.left = newValue + "px";//當元素移動到0px時,使其停止執行動畫if (newValue == target) {//達到目標,關閉定時器clearInterval(timer);}}, 30);}/** 定義一個函數,用來獲取指定元素的當前的樣式* 參數:* obj 要獲取樣式的元素* name 要獲取的樣式名*/function getStyle(obj, name) {if (window.getComputedStyle) {//正常瀏覽器的方式,具有getComputedStyle()方法return getComputedStyle(obj, null)[name];} else {//IE8的方式,沒有getComputedStyle()方法return obj.currentStyle[name];}}</script></head><body><button id="btn01">點擊按鈕以后box1向右移動</button><button id="btn02">點擊按鈕以后box1向左移動</button><br /><br /><div id="box1"></div><div id="box2"></div></body> </html>P133?133.尚硅谷_JS基礎_定時器的應用(三)?20:17
各自控制各自的定時器,互不干擾
obj.style[xxx]和obj.style.xxx
原文鏈接:https://www.jianshu.com/p/1e73b8e1b31d? ?常量用點,變量就用中括號。.有限制,[]可以操作特殊屬性名。
回調函數?callback()
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}#box1 {width: 100px;height: 100px;background-color: red;position: absolute;left: 0;}#box2 {width: 100px;height: 100px;background-color: yellow;position: absolute;left: 0;top: 200px;}#bigBox {width: 0;height: 1000px;border-left: 1px black solid;position: absolute;left: 800px;top: 0;}</style><!-- <script type="text/javascript" src="js/tools.js"></script> --><script type="text/javascript">//嘗試創建一個可以執行簡單動畫的函數/** 參數:* obj:要執行動畫的對象* attr:要執行動畫的樣式,比如:left top width height* target:執行動畫的目標位置* speed:移動的速度(正數向右移動,負數向左移動)* callback:回調函數,這個函數將會在動畫執行完畢以后執行*/function move(obj, attr, target, speed, callback) {clearInterval(obj.timer); // 關閉上一個定時器//獲取元素目前的位置var current = parseInt(getStyle(obj, attr));//判斷速度的正負值//如果從0 向 800移動,則speed為正//如果從800向0移動,則speed為負if (current > target) {//此時速度應為負值speed = -speed;}//開啟一個定時器,用來執行動畫效果//向執行動畫的對象中添加一個timer屬性,用來保存它自己的定時器的標識obj.timer = setInterval(function() {//獲取box1的原來的left值var oldValue = parseInt(getStyle(obj, attr));var newValue = oldValue + speed; // 在舊值的基礎上增加//判斷newValue是否大于800//從800 向 0移動//向左移動時,需要判斷newValue是否小于target//向右移動時,需要判斷newValue是否大于targetif ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {newValue = target;}//將新值設置給box1obj.style[attr] = newValue + "px";//當元素移動到0px時,使其停止執行動畫if (newValue == target) {//達到目標,關閉定時器clearInterval(obj.timer);//動畫執行完畢,調用回調函數callback && callback();}}, 30);}/** 定義一個函數,用來獲取指定元素的當前的樣式* 參數:* obj 要獲取樣式的元素* name 要獲取的樣式名*/function getStyle(obj, name) {if (window.getComputedStyle) {//正常瀏覽器的方式,具有getComputedStyle()方法return getComputedStyle(obj, null)[name];} else {//IE8的方式,沒有getComputedStyle()方法return obj.currentStyle[name];}}window.onload = function() {//獲取box1var box1 = document.getElementById("box1");//獲取btn01var btn01 = document.getElementById("btn01");//獲取btn02var btn02 = document.getElementById("btn02");//獲取btn03var btn03 = document.getElementById("btn03");//點擊按鈕以后,使box1向右移動(left值增大)btn01.onclick = function() {move(box1, "left", 800, 20);};//點擊按鈕以后,使box1向左移動(left值減小)btn02.onclick = function() {move(box1, "left", 0, 10);};btn03.onclick = function() {move(box2, "left", 800, 10);};//測試按鈕var btn04 = document.getElementById("btn04");btn04.onclick = function() {// move(box2 ,"width", 800 , 10);// move(box2 ,"top", 800 , 10);// move(box2 ,"height", 800 , 10);move(box2, "width", 800, 10, function() {move(box2, "height", 400, 10, function() {move(box2, "top", 0, 10, function() {move(box2, "width", 100, 10, function() {});});});});};};//定義一個變量,用來保存定時器的標識 // var timer;/** 目前我們的定時器的標識由全局變量timer保存,所有正在執行的定時器都在這個變量中保存*/</script></head><body><button id="btn01">點擊按鈕以后box1向右移動</button><button id="btn02">點擊按鈕以后box1向左移動</button><button id="btn03">點擊按鈕以后box2向右移動</button><button id="btn04">測試按鈕</button><br /><br /><div id="box1"></div><div id="box2"></div><div id="bigBox"></div></body> </html>P134?134.尚硅谷_JS基礎_完成輪播圖界面?34:49
overflow:hidden以后,橫向超出框的部分被裁剪以后就不占其他元素的位置了。
P135?135.尚硅谷_JS基礎_完成點擊按鈕切換圖片?17:08
可以直接在css樣式ul列表里面加個transition: all .5s(.5s為過度動畫時間,自己可以隨便改)。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}#outer { /* 設置outer的樣式 */width: 520px; /* 設置寬和高 */height: 333px;margin: 50px auto; /*居中*/background-color: greenyellow; /*設置背景顏色*/padding: 10px 0; /*設置padding*/position: relative; /*開啟相對定位*/overflow: hidden; /*裁剪溢出的內容*/}#imgList { /*設置imgList*/list-style: none; /*去除項目符號*//*設置ul的寬度*//*width: 2600px;*/position: absolute; /*開啟絕對定位*//* 每向左移動520px,就會顯示到下一張圖片 */left: 0px; /*設置偏移量*/}#imgList li { /*設置圖片中的li*/float: left; /*設置浮動*/margin: 0 10px; /*設置左右外邊距*/}#navDiv { /*設置導航按鈕*/position: absolute; /*開啟絕對定位*/bottom: 15px; /*設置位置*//*設置left值outer寬度 520navDiv寬度 25*5 = 125(520 - 125)/2 = 395/2 = 197.5* *//*left: 197px;*/}#navDiv a {float: left; /*設置超鏈接浮動*/width: 15px; /*設置超鏈接的寬和高*/height: 15px;background-color: red; /*設置背景顏色*/margin: 0 5px; /*設置左右外邊距*/opacity: 0.5; /*設置透明*/filter: alpha(opacity=50);/*兼容IE8透明*/}#navDiv a:hover { /*設置鼠標移入的效果*/background-color: black;}</style><!--引用工具--><!-- <script type="text/javascript" src="js/tools.js"></script> --><script type="text/javascript">//嘗試創建一個可以執行簡單動畫的函數/** 參數:* obj:要執行動畫的對象* attr:要執行動畫的樣式,比如:left top width height* target:執行動畫的目標位置* speed:移動的速度(正數向右移動,負數向左移動)* callback:回調函數,這個函數將會在動畫執行完畢以后執行*/function move(obj, attr, target, speed, callback) {clearInterval(obj.timer); // 關閉上一個定時器//獲取元素目前的位置var current = parseInt(getStyle(obj, attr));//判斷速度的正負值//如果從0 向 800移動,則speed為正//如果從800向0移動,則speed為負if (current > target) {//此時速度應為負值speed = -speed;}//開啟一個定時器,用來執行動畫效果//向執行動畫的對象中添加一個timer屬性,用來保存它自己的定時器的標識obj.timer = setInterval(function() {//獲取box1的原來的left值var oldValue = parseInt(getStyle(obj, attr));var newValue = oldValue + speed; // 在舊值的基礎上增加//判斷newValue是否大于800//從800 向 0移動//向左移動時,需要判斷newValue是否小于target//向右移動時,需要判斷newValue是否大于targetif ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {newValue = target;}//將新值設置給box1obj.style[attr] = newValue + "px";//當元素移動到0px時,使其停止執行動畫if (newValue == target) {//達到目標,關閉定時器clearInterval(obj.timer);//動畫執行完畢,調用回調函數callback && callback();}}, 30);}/** 定義一個函數,用來獲取指定元素的當前的樣式* 參數:* obj 要獲取樣式的元素* name 要獲取的樣式名*/function getStyle(obj, name) {if (window.getComputedStyle) {//正常瀏覽器的方式,具有getComputedStyle()方法return getComputedStyle(obj, null)[name];} else {//IE8的方式,沒有getComputedStyle()方法return obj.currentStyle[name];}}window.onload = function() {//獲取imgListvar imgList = document.getElementById("imgList");//獲取頁面中所有的img標簽var imgArr = document.getElementsByTagName("img");//設置imgList的寬度imgList.style.width = 520 * imgArr.length + "px";/*設置導航按鈕居中*///獲取navDivvar navDiv = document.getElementById("navDiv");//獲取outervar outer = document.getElementById("outer");//設置navDiv的left值navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";//默認顯示圖片的索引var index = 0;//獲取所有的avar allA = document.getElementsByTagName("a");//設置默認選中的效果allA[index].style.backgroundColor = "black";/*點擊超鏈接切換到指定的圖片點擊第一個超鏈接,顯示第一個圖片點擊第二個超鏈接,顯示第二個圖片* *///為所有的超鏈接都綁定單擊響應函數for (var i = 0; i < allA.length; i++) {//為每一個超鏈接都添加一個num屬性allA[i].num = i;//為超鏈接綁定單擊響應函數allA[i].onclick = function() {//獲取點擊超鏈接的索引,并將其設置為indexindex = this.num;//切換圖片/** 第一張 0 0* 第二張 1 -520* 第三張 2 -1040*///imgList.style.left = -520*index + "px";//設置選中的asetA();//使用move函數來切換圖片move(imgList, "left", -520 * index, 20, function() {});};}//創建一個方法用來設置選中的afunction setA() {//遍歷所有a,并將它們的背景顏色設置為紅色for (var i = 0; i < allA.length; i++) {allA[i].style.backgroundColor = "";}//將選中的a設置為黑色allA[index].style.backgroundColor = "black";};};</script></head><body><!-- 創建一個外部的div,來作為大的容器 --><div id="outer"><!-- 創建一個ul,用于放置圖片 --><ul id="imgList"><li><img src="img/1.jpg" /></li><li><img src="img/2.jpg" /></li><li><img src="img/3.jpg" /></li><li><img src="img/4.jpg" /></li><li><img src="img/5.jpg" /></li></ul><!--創建導航按鈕--><div id="navDiv"><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></div></div></body> </html>加油,沖沖沖~? ?相信自己,改善自己~
總結
以上是生活随笔為你收集整理的JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JavaScript基础14-day16
- 下一篇: JavaScript高级day01-AM