主頁 > 前端設計 > Javascript筆記大全03

Javascript筆記大全03

2021-08-17 07:58:12 前端設計

BOM

簡介

BOM（Browser Object Model）即瀏覽器物件模型，它提供了獨立于內容而與瀏覽器視窗進行互動的物件，其核心物件使window

區別

DOM

  1. 檔案物件模型
  2. DOM就是把【檔案】當做是一個【物件】來看待
  3. DOM的頂級物件是document
  4. DOM主要學習的是操作頁面元素
  5. DOM是W3C標準規范

BOM

  1. 瀏覽器物件模型
  2. 把【瀏覽器】當做是一個【物件】來看待
  3. BOM的頂級物件是window
  4. BOM學習的是瀏覽器視窗互動的一些物件
  5. BOM是瀏覽器廠商在各自瀏覽器上定義的，兼容性較差

BOM比DOM更大，它包含DOM

調整視窗大小事件

window.onresize = function() {}
window.addEventListener('resize',function() {});

window.onresize是調整視窗大小加載事件，當觸發時就呼叫的處理函式

注意：

  1. 只要視窗大小發生變化，就會觸發這個事件
  2. 經常利用這個事件完成回應式布局，window.innerWidth 當前螢屏的寬度
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			window.addEventListener('load',function() {
				// 粉色盒子隨著視窗大小而顯示或者隱藏
				// 獲取div
				var div = document.querySelector('div');
				window.addEventListener('resize',function() {
					console.log(window.innerWidth);
					
					console.log('變化了');
					if (window.innerWidth <= 800) {
						div.style.display = 'none';
					} else {
						div.style.display = 'block';
					}
				})
			})
		</script>
		<div></div>
	</body>
</html>

定時器

window物件給我們提供了2個非常好用的方法-定時器

  1. setTimeout()
  2. setInterval()

setTimeout() 定時器

window.setTimeout(呼叫函式,[延遲的毫秒數]);

setTimeout() 方法用于設定一個定時器，該定時器在定時器到期后執行呼叫函式

注意：

  1. window可以省略
  2. 這個呼叫函式可以直接寫函式，或者寫函式名或者采取字串 ‘函式名()’ 三種方式，第三種不推薦
  3. 延遲的毫秒數省略默認是0，如果寫，必須是毫秒
  4. 因為定時器可能有很多，所以我們經常給定時器賦值一個識別符號

setTimeout() 這個呼叫函式也稱為回呼函式 callback，普通函式是按照代碼順序直接呼叫，而這個函式，需要等待時間，時間到了才去呼叫這個函式，因此稱為回呼函式，

簡單理解：回呼，就是回頭呼叫的意思，上一件事干完，再回頭呼叫這個函式

案例

5秒之后自動關閉的廣告

  1. 核心思路：5秒之后，就把廣告隱藏起來
  2. 用定時器setTimeout
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="./img/廣告.jpg" class="ad" width="500px">
		<script type="text/javascript">
			var ad = document.querySelector('.ad');
			setTimeout(function() {
				ad.style.display = 'none';
			}, 5000);
		</script>
	</body>
</html>

停止setTimeout() 定時器

window.clearTimeout (timeoutID)

clearTimeout() 方法取消了先前通過呼叫setTimeout()建立的定時器

注意：

  1. window可以省略
  2. 里面的引數就是定時器的識別符號
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 點擊按鈕后不會輸出'爆炸了'，否則5秒后輸出'爆炸了' -->
		<button>點擊停止定時器</button>
		<script type="text/javascript">
			var btn = document.querySelector('button');
			var timer = setTimeout(function() {
				console.log('爆炸了');
			}, 5000);
			btn.addEventListener('click',function() {
				clearTimeout(timer);
			})
		</script>
	</body>
</html>

setInterval() 定時器

window.setInterval(回呼函式,[間隔的毫秒數]);

setInterval() 方法重復呼叫一個函式，每隔這個時間，就去呼叫一次回呼函式

注意：

  1. window可以省略
  2. 這個呼叫函式可以直接寫函式，或者寫函式名或者采取字串 ‘函式名()’ 三種形式
  3. 間隔的毫秒數省略默認是0，如果寫，必須是毫秒，表示每間隔多少毫秒就自動呼叫這個函式
  4. 因為定時器可能有很多，所以我們經常給定時器賦值一個識別符號
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 語法規范： window.setInterval(呼叫函式,延時時間);
			setInterval(function() {
				console.log('連續中出');
			}, 1000);
		</script>
	</body>
</html>

案例

秒殺倒計時

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				text-align: center;
				margin-top: 100px;
			}
			span {
				background-color: black;
				width: 50px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				color: #fff;
				font-size: 20px;
				margin:50px 0;
				padding: 20px 20px;
			}
		</style>
	</head>
	<body>
		<div>
			<span class="hour">1</span>
			<span class="minute">2</span>
			<span class="second">3</span>
		</div>
		<script type="text/javascript">
			// 1.獲取元素
			var hour = document.querySelector('.hour'); // 小時的黑色盒子
			var minute = document.querySelector('.minute'); // 分鐘的黑色盒子
			var second = document.querySelector('.second'); // 秒數的黑色盒子
			
			var inputTime = +new Date('2021-8-2 19:00:00'); // 回傳的是用戶輸入時間總的毫秒數
			countDown(); // 先呼叫一次這個函式，防止重繪頁面有空白
			
			// 開啟定時器
			setInterval(countDown, 1000);
			
			function countDown() {
				var nowTime = +new Date(); // 回傳的是當前時間總的毫秒數
				
				var times = (inputTime - nowTime) / 1000; // times是剩余時間總的毫秒數
				var h = parseInt(times / 60 / 60); // 時
				h = h < 10 ? '0' + h : h;
				hour.innerHTML = h; // 把剩余的小時 給 小時的黑色盒子
				
				var m = parseInt(times / 60 % 60); // 分
				m = m < 10 ? '0' + m : m;
				minute.innerHTML = m;
				
				var s = parseInt(times % 60); // 當前的秒
				s = s < 10 ? '0' + s : s;
				second.innerHTML = s;
			}
		</script>
	</body>
</html>

在這里插入圖片描述

區別

  1. setTimeout 延時時間到了，就去呼叫這個回呼函式，只呼叫一次就結束了這個定時器
  2. setInterval 每隔一個這個延時時間，就去呼叫這個回呼函式，會呼叫很多次，重復呼叫這個函式

停止setInterval() 定時器

window.clearInterval(intervalID);

clearInterval() 方法取消了先前通過呼叫setInterval()建立的定時器

注意：

  1. window可以省略
  2. 里面的引數就是定時器的識別符號
<body>
	<button class="begin">開啟定時器</button>
	<button class="stop">停止定時器</button>
	<script type="text/javascript">
		var begin = document.querySelector('.begin');
		var stop = document.querySelector('.stop');
		var timer = null; // 全域變數 null是一個空物件
		begin.addEventListener('click',function() {
			timer = setInterval(function() {
				console.log('你好啊');
			}, 1000);
		})
		stop.addEventListener('click',function() {
			clearInterval(timer);
		})
	</script>
</body>

案例

發送短信

<body>
	手機號碼： <input type="number"> <button>發送</button>
	<script type="text/javascript">
		// 按鈕點擊之后，會禁用disabled為true
		// 同時按鈕里面的內容會變化，注意button里面的內容通過innerHTML修改
		// 里面秒數是有變化的，因此需要用到定時器
		// 定義一個變數，在定時器里面，不斷遞減
		// 如果變數為0 說明到了時間，我們需要停止定時器，并且復原按鈕初始狀態
		var btn = document.querySelector('button');
		var time = 3; // 定義剩下的秒數
		btn.addEventListener('click',function() {
			btn.disabled = true;
			var timer = setInterval(function() {
				if (time == 0) {
					// 清除定時器和復原按鈕
					clearInterval(timer);
					btn.disabled = false;
					btn.innerHTML = '發送';
					time = 3; // 這個3需要從新開始
				} else {
					btn.innerHTML = '還剩下' + time + '秒';
					time--;
				}
			}, 1000);
		})
	</script>
</body>

同步和異步

Javascript的一大特點就是單執行緒，就是說，同一個時間只能做一件事，單執行緒就意味著，所有任務需要排隊，前一個任務結束，才會執行后一個任務，這樣會導致：如果JS執行時間過長，會造成頁面的渲染不連貫，

同步

前一個任務結束后再執行后一個任務，程式的執行順序與任務的排列順序是一致的、同步的，

比如做飯的同步做法：燒水煮飯，等水開了，再去切菜、炒菜，

異步

在做一件事情時，因為這件事情會花費很長時間，在做這件事的同時，還可以去處理其他事情，

比如做飯的異步做法：在燒水的同時，利用這10分鐘，去切菜、炒菜，

同步和異步的本質區別：這條流水線上各個流程的執行順序不同

以下代碼執行的結果是什么？

console.log(1);
setTimeout(function() {
    console.log(3);
}, 0);
console.log(2);

結果：1 2 3

執行機制

  1. 先執行 執行堆疊 中的同步任務
  2. 異步任務（回呼函式）放入任務佇列中
  3. 一旦執行堆疊中的所有同步任務執行完畢，系統就會按次序讀取任務佇列中的異步任務，于是被讀取的異步任務結束等待狀態，進入執行堆疊，開始執行，

在這里插入圖片描述

location 物件

URL的一般語法格式為：

protocol://host[:post]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link
組成說明
protocol通信協議 常用的http,ftp,maito等
host主機（域名）www.itheima.com
port埠號 可選，省略時使用方案的默認埠 如http的默認埠為80
path路徑 由 0 或多個’/'符號隔開的字串，一般用來表示主機上的一個目錄或檔案地址
query引數 以鍵值對的形式，通過&符號分隔開來
fragment片段 #后面內容 常見于鏈接、錨點

location物件的屬性

location物件屬性回傳值
location.href獲取或者設定整個URL
location.host回傳主機（域名）www.itheima.com
location.port回傳埠號 如果未寫回傳空字串
location.pathname回傳路徑
location.search回傳引數
location.hash回傳片段 #后面內容 常見于鏈接、錨點

重點記住：href 和 search

<body>
	<button>點擊</button>
	<div></div>
	<script type="text/javascript">
		var btn = document.querySelector('button');
		var div = document.querySelector('div');
		// 點擊跳轉
		btn.addEventListener('click',function() {
			location.href = 'http://www.baidu.com';
		})
		// n秒后跳轉
		var timer = 5;
		setInterval(function() {
			if (timer == 0) {
				location.href = 'http://www.baidu.com';
			} else {
				div.innerHTML = '將在'+ timer +'秒鐘之后跳轉';
				timer--;
			}
		}, 1000);
	</script>
</body>

案例

  1. 第一個登錄頁面，里面有提交表單，action提交到index.html頁面
  2. 第二個頁面，可以使用第一個頁面的引數，這樣實作了一個資料不同頁面之間的傳遞效果
  3. 第二個頁面之所以可以使用第一個頁面的資料，是利用了URL里面的location.search引數
  4. 在第二個頁面中，需要把這個引數提取
  5. 第一步去掉？ 利用substr
  6. 第二步利用=號分割鍵和值 split(’=’)

login.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="index.html">
			用戶名：<input type="text" name="uname"/>
			<input type="submit" value="登錄"/>
		</form>
		<script type="text/javascript">
			console.log(location.search);
			// 1.先去掉？ substr('起始位置','截取幾個字符');
			var params = location.search.substr(1);
			console.log(params);
			// 2.利用=把字串分割為陣列 split('=');
			var arr = params.split('=');
			console.log(arr);
		</script>
	</body>
</html>

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div></div>
		<script type="text/javascript">
			console.log(location.search);
			// 1.先去掉？ substr('起始位置','截取幾個字符');
			var params = location.search.substr(1);
			console.log(params);
			// 2.利用=把字串分割為陣列 split('=');
			var arr = params.split('=');
			console.log(arr);
			var div = document.querySelector('div');
			// 3.把資料寫入div中
			div.innerHTML = arr[1] + '歡迎您';
		</script>
	</body>
</html>

location物件的方法

location物件方法回傳值
location.assign()跟href一樣，可以跳轉頁面（也稱為重定向頁面）
location.replace()替換當前頁面，因為不記錄歷史，所以不能后退頁面
location.reload()重新加載頁面，相對于重繪按鈕或者f5 如果引數為true 強制重繪 Ctrl + f5

navigator物件

navigator物件包含有關瀏覽器的資訊，它有很多屬性，最常用的時userAgent，該屬性可以回傳客戶機發送服務器的user-agent頭部的值

判斷用戶哪個終端打開頁面，實作跳轉

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|blackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
	window.location.href = ''; // 手機
} else {
	window.location.href = ''; // 電腦
}

history物件

window物件給我們提供了一個history物件，與瀏覽器歷史記錄進行互動，

history物件方法作用
back()可以后退功能
forward()前進功能
go(引數)前進后退功能 引數如果是1前進1個頁面，如果是-1后退一個頁面

history物件一般在實際開發中比較少用，但是會在一些OA辦公系統中見到，

PC端網頁特效

元素偏移量offset系列

offset翻譯過來就是偏移量，使用offset系列相關屬性可以動態的得到該元素的位置（偏移）、大小等

  1. 獲得元素距離帶有定位父元素的位置
  2. 獲得元素自身的大小（寬度高度）
  3. 注意：回傳的數值都不帶單位

offset系列常用屬性：

offset系列屬性作用
element.offsetParent回傳作為該元素帶有定位的父級元素 如果父級都沒有定位則回傳body
element.offsetTop回傳元素相對帶有定位父元素上方的偏移
element.offsetLeft回傳元素相對帶有定位父元素左邊框的偏移
element.offsetWidth回傳自身包括padding、邊框、內容區的寬度，回傳數值不帶單位
element.offsetHeight回傳自身包括padding、邊框、內容區的高度，回傳數值不帶單位
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			.father {
				position: relative;
				width: 200px;
				height: 200px;
				background-color: pink;
				margin: 100px;
			}
			.son {
				width: 100px;
				height: 100px;
				background-color: plum;
				margin-left: 45px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
		<script type="text/javascript">
			// offset系列
			var father = document.querySelector('.father');
			var son = document.querySelector('.son');
			// 可以得到元素的偏移 位置 回傳的不帶單位的數值
			console.log(father.offsetTop); // 100
			console.log(father.offsetLeft); // 100
			// 它以帶有定位的父親為準 如果沒有父親或者父親沒有定位 則以body為準
			console.log(son.offsetLeft); // 45
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			.w {
				width: 200px;
				height: 200px;
				background-color: skyblue;
				margin: 0 auto 200px;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div class="w"></div>
		<script type="text/javascript">
			// offset系列
			var w = document.querySelector('.w');
			// 可以得到元素的大小、寬度、高度，是包含padding + border + width
			console.log(w.offsetWidth); // 220
			console.log(w.offsetHeight); // 220
		</script>
	</body>
</html>

offset與style的區別

offset

  1. 可以得到任意樣式表中的樣式值
  2. 獲得的數值沒有單位
  3. 包含padding + border + width
  4. offsetWidth等屬性是只讀屬性，只能獲取不能賦值
  5. 所以，想要獲取元素大小位置，用offset更合適

style

  1. 只能得到行內樣式表中的樣式值
  2. style.width獲得的是帶有單位的字串
  3. style.width獲得不包括padding和border的值
  4. style.width是可讀寫屬性，可以獲取也可以賦值
  5. 所以，想要給元素更改值，則需要用style改變
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 500px;
				height: 500px;
				background-color: pink;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<script type="text/javascript">
			// 在盒子內點擊，想要得到滑鼠距離盒子左右的距離
			// 首先得到滑鼠在頁面中的坐標（e.pageX,e.pageY）
			// 其次得到盒子在頁面中的距離（box.offsetLeft,box.offsetTop）
			// 用滑鼠距離頁面的坐標減去盒子在頁面中的距離，得到滑鼠在盒子內的坐標
			var box = document.querySelector('.box');
			box.addEventListener('click',function(e) {
				// console.log(e.pageX);
				// console.log(e.pageY);
				// console.log(box.offsetLeft);
				var x = e.pageX - this.offsetLeft;
				var y = e.pageY - this.offsetTop;
				this.innerHTML = 'x坐標是' + x + 'y坐標是' + y;
			})
		</script>
	</body>
</html>

元素可視區client系列

通過client系列的相關屬性可以動態的得到該元素的邊框大小、元素大小等

client系列屬性作用
element.clientTop回傳元素上邊框的大小
element.clientLeft回傳元素左邊框的大小
element.clientWidth回傳自身包括padding、內容區的寬度，不含邊框，回傳數值不帶單位
element.clientHeight回傳自身包括padding、內容區的高度，不含邊框，回傳數值不帶單位
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
				border: 10px solid red;
			}
		</style>
	</head>
	<body>
		<div></div>
		<script type="text/javascript">
			// client寬度 和offsetWidth最大的區別就是 不包含邊框
			var div = document.querySelector('div');
			console.log(div.clientWidth); // 200
		</script>
	</body>
</html>

立即執行函式

主要作用：創建一個獨立的作用域

<body>
	<script type="text/javascript">		
        function fn() {
			console.log(1);
		}
		fn();			// 1.立即執行函式：不需要呼叫，立馬能夠自己執行的函式
		// 2. 寫法 也可以傳遞引數進來
		// (function () {})()  或者  (function(){}())
		(function(a,b) {
			console.log(a + b); // 3
			var num = 10;
		})(1,2); // 第二個小括號可以看做是呼叫函式
		
		(function sum(a,b) {
			console.log(a + b); // 5
			var num = 10; // 區域變數
		}(2,3));
		// 3.立即執行函式最大的作用就是：獨立創建一個作用域，里面所有的變數都是區域變數 不會有命名沖突的情況
	</script>
</body>

元素滾動scroll系列屬性

使用scroll系列的相關屬性可以動態的得到該元素的大小、滾動距離等

scroll系列屬性作用
element.scrollTop回傳被卷去的上側距離，回傳數值不帶單位
element.scrollLeft回傳被卷去的左側距離，回傳數值不帶單位
element.scrollWidth回傳自身實際的寬度，不含邊框，回傳數值不帶單位
element.scrollHeight回傳自身實際的高度，不含邊框，回傳數值不帶單位
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
				border: 10px solid red;
				padding: 10px;
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<div>
			 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容
			 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容
			 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容
		</div>
		<script type="text/javascript">
			// scroll系列
			var div = document.querySelector('div');
			console.log(div.scrollHeight); // 這里是440，數值隨著內容的增加而增大
			console.log(div.clientHeight); // 220
		</script>
	</body>
</html>

案例

  1. 原先側邊欄是絕對定位
  2. 當頁面滾動到一定位置，側邊欄改為固定定位
  3. 頁面繼續滾動，會讓回傳頂部顯示出來
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.slider-bar {
				position: absolute;
				left: 50%;
				top: 300px;
				margin-left: 600px;
				width: 45px;
				height: 130px;
				background-color: pink;
			}
			
			.w {
				width: 1200px;
				margin: 10px auto;
			}
			
			.header {
				height: 150px;
				background-color: purple;
			}
			
			.banner {
				height: 250px;
				background-color: skyblue;
			}
			
			.main {
				height: 1000px;
				background-color: yellowgreen;
			}
			
			span {
				display: none;
				position: absolute;
					bottom: 0;
			}
		</style>
	</head>
	<body>
		<div class="slider-bar">
			<span class="goBack">回傳頂部</span>
		</div>
		<div class="header w">頭部區域</div>
		<div class="banner w">banner區域</div>
		<div class="main w">主體部分</div>
		<script type="text/javascript">
			// 獲取元素
			var sliderbar = document.querySelector('.slider-bar');
			var banner = document.querySelector('.banner');
			// banner.offsetTop就是被卷去頭部的大小一定要寫到滾動的外面
			var bannerTop = banner.offsetTop;
			// 當側邊欄固定定位之后應該變化的數值
			var sliderbarTop = sliderbar.offsetTop - bannerTop;
			// 獲取main主體元素
			var main = document.querySelector('.main');
			var goBack = document.querySelector('.goBack');
			var mainTop = main.offsetTop;
			
			// 頁面滾動事件 scroll
			document.addEventListener('scroll',function() {
				// window.pageYoffset 頁面被卷去的頭部
				// 當頁面被卷去的頭部大于等于172 此時 側邊欄就要改為固定定位
				if (window.pageYOffset >= 172) {
					sliderbar.style.position = 'fixed';
					sliderbar.style.top = sliderbarTop + 'px';
				} else {
					sliderbar.style.position = 'absolute';
					sliderbar.style.top = '300px';
				}
				// 當頁面滾動到main盒子，就顯示goback模塊
				if (window.pageYOffset >= mainTop) {
					goBack.style.display = 'block';
				} else {
					goBack.style.display = 'none';
				}
			})
		</script>
	</body>
</html>

頁面被卷去的頭部兼容性解決方案

頁面被卷去的頭部，有兼容性問題，因此被卷去的頭部通常有如下幾種寫法：

  1. 宣告了DTD，使用document.documentElement.scrollTop
  2. 宣告了DTD，使用document.body.scrollTop
  3. 新方法window.pageYoffset 和 window.pageXoffset,IE9開始支持
function getScroll() {
    return {
        left:window.pageXoffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
        top:window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
}
// 使用的時候
getScroll().left

三大系列總結

三大系列大小對比作用
element.offsetWidth回傳自身包括padding、邊框、內容區的寬度，回傳數值不帶單位
element.clientWidth回傳自身包括padding、內容區的寬度，不含邊框，回傳數值不帶單位
element.scrollWidth回傳自身實際的寬度，不含邊框，回傳數值不帶單位

主要用法

  1. offset系列經常用于獲得元素位置 offsetLeft offsetTop
  2. client系列經常用于獲取元素大小 clientWidth clientHeight
  3. scroll系列經常用于獲取滾動距離 scrollTop scrollLeft
  4. 注意頁面滾動的距離通過 window.pageXoffset 獲得

影片函式封裝

核心原理：通過定時器setinterval()不斷移動盒子位置

步驟:

  1. 獲得盒子當前位置
  2. 讓盒子在當前位置加上1個移動距離
  3. 利用定時器不斷重復這個操作
  4. 加一個結束定時器的條件
  5. 注意此元素需要添加定位，才能使用element.style.left
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				position: absolute;
				left: 0;
				width: 100px;
				height: 100px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div></div>
		<script type="text/javascript">
			var div = document.querySelector('div');
			
			var timer = setInterval(function() {
				if(div.offsetLeft >= 400) {
					// 停止影片 本質是停止定時器
					clearInterval(timer);
				}
				div.style.left = div.offsetLeft + 1 + 'px';
			}, 30);
		</script>
	</body>
</html>

影片函式給不同元素記錄不同定時器

如果多個元素都使用這個影片函式，每次都要var宣告定時器，可以給不同元素使用不同的定時器（自己專門用自己的定時器）

核心原理：利用js是一門動態語言，可以很方便的給當前物件添加屬性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				position: absolute;
				left: 0;
				width: 100px;
				height: 100px;
				background-color: pink;
			}
			
			span {
				position: absolute;
				left: 0;
				top: 200px;
				display: block;
				width: 150px;
				height: 150px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<button>點擊阿波才走</button>
		<div></div>
		<span>阿波</span>
		<script type="text/javascript">
			// 簡單影片函式封裝obj目標物件 target 目標位置
			// 給不同的元素指定了不同的定時器
			function animate(obj,target) {
				// 當不斷點擊按鈕，這個元素的速度會越來越快，因為開啟了太多的定時器
				// 解決方案是：讓我們元素只有一個定時器執行
				// 先清除以前的定時器，只保留當前的一個定時器執行
				clearInterval(obj.timer);
				obj.timer = setInterval(function() {
					if(obj.offsetLeft >= target) {
						// 停止影片 本質是停止定時器
						clearInterval(timer);
					}
					obj.style.left = obj.offsetLeft + 1 + 'px';
				}, 30);
			}
			
			var div = document.querySelector('div');
			var span = document.querySelector('span');
			var btn = document.querySelector('button');
			// 呼叫函式
			animate(div,300);
			
			btn.addEventListener('click',function() {
				animate(span,200);
			})
		</script>
	</body>
</html>

緩動效果

緩動影片就是讓元素運動速度有所變化，最常見的是讓速度慢慢停下來

思路：

  1. 讓盒子每次移動的距離慢慢變小，速度就會慢慢落下來
  2. 核心演算法：（目標值-現在的位置）/ 10 做為每次移動的距離步長
  3. 停止的條件是：讓當前盒子位置等于目標位置就停止定時器
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span {
				position: absolute;
				left: 0;
				top: 200px;
				display: block;
				width: 150px;
				height: 150px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<button class="btn500">點擊阿波到500</button>
		<button class="btn800">點擊阿波到800</button>
		<span>阿波</span>
		<script type="text/javascript">
			// 簡單影片函式封裝obj目標物件 target 目標位置
			function animate(obj,target) {
				// 先清除以前的定時器，只保留當前的一個定時器執行
				clearInterval(obj.timer);
				obj.timer = setInterval(function() {
					// 步長值寫道定時器的里面
					var step = (target - obj.offsetLeft) / 10;
					// 把步長值改為整數 不要出現小數的問題
					step = step > 0 ? Math.ceil(step) : Math.floor(step);
					if(obj.offsetLeft == target) {
						// 停止影片 本質是停止定時器
						clearInterval(obj.timer);
					}
					// 把每次加1這個步長值改為一個慢慢變小的值，步長公式：（目標值-現在的位置）/ 10
					obj.style.left = obj.offsetLeft + step + 'px';
				}, 15);
			}
			
			var span = document.querySelector('span');
			var btn500 = document.querySelector('.btn500');
			var btn800 = document.querySelector('.btn800');
			// 呼叫函式
			btn500.addEventListener('click',function() {
				animate(span,500);
			})
			btn800.addEventListener('click',function() {
				animate(span,800);
			})
			// 勻速影片 就是 盒子是當前的位置 + 固定的值 10
			// 緩動影片 就是 盒子當前的位置 + 變化的值（目標值 - 現在的位置）/ 10)
		</script>
	</body>
</html>

影片函式添加回呼函式

回呼函式：函式可以作為一個引數，將這個函式作為引數傳到另一個函式里面，當那個函式執行完之后，再執行傳進去的這個函式，這個程序叫回呼，

回呼函式寫的位置：定時器結束的位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span {
				position: absolute;
				left: 0;
				top: 200px;
				display: block;
				width: 150px;
				height: 150px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<button class="btn500">點擊阿波到500</button>
		<button class="btn800">點擊阿波到800</button>
		<span>阿波</span>
		<script type="text/javascript">
			// 簡單影片函式封裝obj目標物件 target 目標位置
			function animate(obj,target,callback) {
				// 先清除以前的定時器，只保留當前的一個定時器執行
				clearInterval(obj.timer);
				obj.timer = setInterval(function() {
					// 步長值寫道定時器的里面
					var step = (target - obj.offsetLeft) / 10;
					// 把步長值改為整數 不要出現小數的問題
					step = step > 0 ? Math.ceil(step) : Math.floor(step);
					if(obj.offsetLeft == target) {
						// 停止影片 本質是停止定時器
						clearInterval(obj.timer);
						// 回呼函式寫到定時器結束里面
						if (callback) {
							// 呼叫函式
							callback();
						}
					}
					// 把每次加1這個步長值改為一個慢慢變小的值，步長公式：（目標值-現在的位置）/ 10
					obj.style.left = obj.offsetLeft + step + 'px';
				}, 15);
			}
			
			var span = document.querySelector('span');
			var btn500 = document.querySelector('.btn500');
			var btn800 = document.querySelector('.btn800');
			// 呼叫函式
			btn500.addEventListener('click',function() {
				animate(span,500);
			})
			btn800.addEventListener('click',function() {
				// 使盒子變紅色的函式
				animate(span,800,function() {
					// alert('你好嗎');
					span.style.backgroundColor = 'red';
				});
			})
			// 勻速影片 就是 盒子是當前的位置 + 固定的值 10
			// 緩動影片 就是 盒子當前的位置 + 變化的值（目標值 - 現在的位置）/ 10)
		</script>
	</body>
</html>

輪播圖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最簡單的輪播效果</title>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<script type="text/javascript" src="js/index.js"></script>
</head>
	<body>
		<div class="focus">
			<!-- 左側按鈕 -->
			<a href="javascript:;" class="arrow-l">&lt;</a>
			<!-- 右側按鈕 -->
			<a href="javascript:;" class="arrow-r">&gt;</a>
			<!-- 核心的滾動區域 -->
			<ul>
				<li><a href="#"><img src="img/破敗大事件.jpg" ></a></li>
				<li><a href="#"><img src="img/靈能特工.jpg" ></a></li>
				<li><a href="#"><img src="img/烈陽皎月.jpg" ></a></li>
				<li><a href="#"><img src="img/阿貍.jpg" ></a></li>
				<li><a href="#"><img src="img/蜘蛛女皇伊莉絲-女巫.jpg" ></a></li>
				<li><a href="#"><img src="img/LOL英雄酒館.png" ></a></li>
			</ul>
			<!-- 小圓圈 -->
			<ol class="circle"></ol>
		</div>
	</body>
</html>

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/* 去掉li的小圓點 */
li {
	list-style:none
}

.focus {
	position: relative;
	width: 1024px;
	height: 400px;
	/* background-color: purple; */
	margin: auto;
	margin-top: 50px;
	overflow: hidden;
}

.focus ul {
	position: absolute;
	top: 0;
	left: 0;
	width: 800%;
}

.focus ul li {
	float: left;
}
.focus ul li img {
	width: 1024px;
}

.focus ol {
	position: absolute;
	height: 20px;
	/* right: 20px; */
	right: 42%;
	bottom: 20px;
	text-align: center;
	padding: 5px;
}

.focus ol li {
	display: inline-block;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	line-height: 20px;
	background-color: #fff;
	margin: 5px;
	cursor: pointer;
}

.focus ol .current {
	background-color: orangered;
}

/* 左右按鈕 */
.arrow-l,
.arrow-r {
	display: none;
	position: absolute;
	top: 50%;
	/* margin-top: -20px; */
	width: 40px;
	height: 60px;
	background: rgba(255, 255, 255, 0.3);
	text-align: center;
	/* line-height: -10; */
	color: black;
	font-size: 40px;
	text-align: center;
	text-decoration: none;
	z-index: 2;
	
}

.arrow-r {
	right: 0;
}

window.addEventListener('load',function() {
	// 獲取元素
	var arrow_l = document.querySelector('.arrow-l');
	var arrow_r = document.querySelector('.arrow-r');
	var focus = document.querySelector('.focus');
	var focusWidth = focus.offsetWidth;
	
	// 滑鼠經過 focus 就顯示隱藏左右按鈕
	focus.addEventListener('mouseenter',function() {
		arrow_l.style.display = 'block';
		arrow_r.style.display = 'block';
		// 滑鼠經過停止輪播
		clearInterval(timer);
		timer = null; // 清除定時器變數
	});
	focus.addEventListener('mouseleave',function() {
		arrow_l.style.display = 'none';
		arrow_r.style.display = 'none';
		// 滑鼠離開繼續輪播
		timer = setInterval(function() {
			// 手動呼叫點擊事件
			arrow_r.click();
		}, 2000);
	});
	
	// 動態生成小圓圈 有幾張圖片就生成幾個小圓點
	var ul = focus.querySelector('ul');
	var ol = focus.querySelector('.circle');
	
	for (var i = 0; i < ul.children.length; i++) {
		// 創建li
		var li = document.createElement('li');
		// 記錄當前小圓圈的索引號 通過自定義屬性來做
		li.setAttribute('index',i);
		// 把li插入到ol里面
		ol.appendChild(li);
		// 排他思想 直接生成小圓圈的同時直接系結點擊事件
		li.addEventListener('click',function() {
			// 干掉所有人 把所有的 li 清除 current 類名
			for (var i = 0; i < ol.children.length; i++) {
				ol.children[i].className = '';
			}
			// 留下我自己 當前的li設定為 current 類名
			this.className = 'current';
			// 點擊小圓圈，移動圖片 移動的是ul
			// ul的移動距離 小圓圈的索引號 乘以 圖片的寬度 注意是負值
			// 點擊某個li 就拿到當前li的索引號
			var index = this.getAttribute('index');
			// 點擊了某個li就把這個li的索引號給num
			num = index;
			// 點擊了某個li就把這個li的索引號給circle
			circle = index;
			
			animate(ul,-index * focusWidth);
		})
	}
	// 把ol里面的第一個li的類名設定為current
	ol.children[0].className = 'current';
	// 克隆第一張圖片放到ul最后面
	var first = ul.children[0].cloneNode(true);
	ul.appendChild(first);
	// 點擊右側按鈕，圖片滾動一張
	var num = 0;
	// circle控制小圓圈的播放
	var circle = 0;
	
	// 節流閥
	var flag = true;
	// 右側按鈕
	arrow_r.addEventListener('click',function() {
		if(flag) {
			flag = false; // 關閉節流閥
			// 如果走到最后復制的一張圖片，此時 ul快速復原left為0
			if (num == ul.children.length - 1) {
				ul.style.left = 0;
				num = 0;
			}
			num++;
			animate(ul,-num * focusWidth,function() {
				flag = true;
			});
			// 點擊右側圖片按鈕，小圓圈隨著一起變化
			circle++;
			// 如果circle==ol.children.length說明走到最后我們克隆的這張圖片了，就復原
			if (circle == ol.children.length) {
				circle = 0;
			}
			// 呼叫函式
			circleChange();
		}
		
	});
	
	// 左側按鈕
	arrow_l.addEventListener('click',function() {
		if (flag) {
			flag = false;
			// 如果走到最后復制的一張圖片，此時 ul快速復原left為0
			if (num == 0) {
				num = ul.children.length - 1;
				ul.style.left = -num * focusWidth + 'px';
			}
			num--;
			animate(ul,-num * focusWidth,function() {
				flag = true;
			});
			
			// 點擊右側圖片按鈕，小圓圈隨著一起變化
			circle--;
			// 如果circle==ol.children.length說明走到最后我們克隆的這張圖片了，就復原
			// if (circle < 0) {
			// 	circle = ol.children.length - 1;
			// }
			circle = circle < 0 ? ol.children.length - 1 : circle;
			// 呼叫函式
			circleChange();
		}
	});
	
	// 清除圓圈函式
	function circleChange() {
		// 清除其余小圓圈的current類名
		for (var i = 0; i < ol.children.length; i++) {
			ol.children[i].className = '';
		}
		// 留下當前小圓圈的current類名
		ol.children[circle].className = 'current';
	}
	
	// 自動播放輪播圖
	var timer = setInterval(function() {
		// 手動呼叫點擊事件
		arrow_r.click();
	}, 2000);
	
	// 簡單影片函式封裝obj目標物件 target 目標位置
	// 給不同的元素指定了不同的定時器
	function animate(obj,target,callback) {
	// 當不斷點擊按鈕，這個元素的速度會越來越快，因為開啟了太多的定時器
	// 解決方案是：讓我們元素只有一個定時器執行
	// 先清除以前的定時器，只保留當前的一個定時器執行
		clearInterval(obj.timer);
		obj.timer = setInterval(function() {
		// 步長值寫道定時器的里面
		var step = (target - obj.offsetLeft) / 10;
		// 把步長值改為整數 不要出現小數的問題
		step = step > 0 ? Math.ceil(step) : Math.floor(step);
		if(obj.offsetLeft == target) {
			// 停止影片 本質是停止定時器
			clearInterval(obj.timer);
			// 回呼函式寫到定時器結束里面
			// if (callback) {
			// 	// 呼叫函式
			// 	callback();
			// }
			callback && callback();
		}
		// 把每次加1這個步長值改為一個慢慢變小的值，步長公式：（目標值-現在的位置）/ 10
		obj.style.left = obj.offsetLeft + step + 'px';
		}, 15);
	}
})

回傳頂部

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.slider-bar {
				position: absolute;
				left: 50%;
				top: 300px;
				margin-left: 600px;
				width: 45px;
				height: 130px;
				background-color: pink;
			}
			
			.w {
				width: 1200px;
				margin: 10px auto;
			}
			
			.header {
				height: 150px;
				background-color: purple;
			}
			
			.banner {
				height: 250px;
				background-color: skyblue;
			}
			
			.main {
				height: 1000px;
				background-color: yellowgreen;
			}
			
			span {
				display: none;
				position: absolute;
					bottom: 0;
			}
		</style>
	</head>
	<body>
		<div class="slider-bar">
			<span class="goBack">回傳頂部</span>
		</div>
		<div class="header w">頭部區域</div>
		<div class="banner w">banner區域</div>
		<div class="main w">主體部分</div>
		<script type="text/javascript">
			// 獲取元素
			var sliderbar = document.querySelector('.slider-bar');
			var banner = document.querySelector('.banner');
			// banner.offsetTop就是被卷去頭部的大小一定要寫到滾動的外面
			var bannerTop = banner.offsetTop;
			// 當側邊欄固定定位之后應該變化的數值
			var sliderbarTop = sliderbar.offsetTop - bannerTop;
			// 獲取main主體元素
			var main = document.querySelector('.main');
			var goBack = document.querySelector('.goBack');
			var mainTop = main.offsetTop;
			
			// 頁面滾動事件 scroll
			document.addEventListener('scroll',function() {
				// window.pageYoffset 頁面被卷去的頭部
				// 當頁面被卷去的頭部大于等于172 此時 側邊欄就要改為固定定位
				if (window.pageYOffset >= 172) {
					sliderbar.style.position = 'fixed';
					sliderbar.style.top = sliderbarTop + 'px';
				} else {
					sliderbar.style.position = 'absolute';
					sliderbar.style.top = '300px';
				}
				// 當頁面滾動到main盒子，就顯示goback模塊
				if (window.pageYOffset >= mainTop) {
					goBack.style.display = 'block';
				} else {
					goBack.style.display = 'none';
				}
			})
			// 當我們點擊了回傳頂部模塊，就讓視窗滑動到頁面的最上方
			goBack.addEventListener("click",function() {
				// 里面的x和y不跟單位，直接寫數字即可
				// window.scroll(0,0);
				animate(window,0);
			});
			
			// 影片函式
			function animate(obj,target,callback) {
			// 先清除以前的定時器，只保留當前的一個定時器執行
				clearInterval(obj.timer);
				obj.timer = setInterval(function() {
				// 步長值寫道定時器的里面
				var step = (target - obj.offsetLeft) / 10;
				// 把步長值改為整數 不要出現小數的問題
				step = step > 0 ? Math.ceil(step) : Math.floor(step);
				if(window.pageYOffset == target) {
					// 停止影片 本質是停止定時器
					clearInterval(obj.timer);
					// 回呼函式寫到定時器結束里面
					callback && callback();
				}
					// 把每次加1這個步長值改為一個慢慢變小的值，步長公式：（目標值-現在的位置）/ 10
					// obj.style.left = obj.offsetLeft + step + 'px';
					window.scroll(0,window.pageYOffset - step);
				}, 15);
			}
		</script>
	</body>
</html>

本地儲存

特性：

  1. 資料存盤再用戶瀏覽器中
  2. 設定、讀取資訊方便、甚至頁面重繪不丟失資料
  3. 容量較大，sessionStorage約5M、localStorage約20M
  4. 只能存盤字串，可以將物件JSON.stringify()編碼后存盤

生命周期

簡單來說就是：什么時候死

sessionStorage

  1. 生命周期為關閉瀏覽器視窗
  2. 在同一個視窗（頁面）下資料都可以共享
  3. 以鍵值對的形式存盤使用

存盤資料：

sessionStorage.setltem(key,value)

獲取資料：

sessionStorage.getItem(key)

洗掉資料：

sessionStorage.removeItem(key)

洗掉所有資料：

sessionStorage.clear()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text">
		<button class="set">存盤資料</button>
		<button class="get">獲取資料</button>
		<button class="remove">洗掉資料</button>
		<button class="del">清空所有資料</button>
		<script type="text/javascript">
			var ipt = document.querySelector('input');
			var set = document.querySelector('.set');
			var get = document.querySelector('.get');
			var remove = document.querySelector('.remove');
			var del = document.querySelector('.del');
			
			set.addEventListener('click',function() {
				// 當我們點擊了之后，就可以把表單里面的值存盤起來
				var val = ipt.value;
				sessionStorage.setItem('uname',val);
			});
			get.addEventListener('click',function() {
				// 當我們點擊了之后，就可以把表單里面的值獲取過來
				console.log(sessionStorage.getItem('uname'));
			});
			remove.addEventListener('click',function() {
				// 當我們點擊了之后，就可以把表單里面的值洗掉
				sessionStorage.removeItem('uname');
			});
			del.addEventListener('click',function() {
				// 當我們點擊了之后，就可以把表單里面的值全部洗掉
				sessionStorage.clear();
			})
		</script>
	</body>
</html>

localStorage

  1. 宣告周期永久生效，除非手動洗掉，否則關閉頁面也會存在
  2. 可以多視窗（頁面）共享（同一瀏覽器可以共享）
  3. 以鍵值對的形式存盤使用

存盤資料：

localStorage.setItem(key,value)

獲取資料：

localStorage.getItem(key)

洗掉資料：

localStorage.removeItem(key)

洗掉所有資料：

localStorage.clear()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text">
		<button class="set">存盤資料</button>
		<button class="get">獲取資料</button>
		<button class="remove">洗掉資料</button>
		<button class="del">清空所有資料</button>
		<script type="text/javascript">
			var ipt = document.querySelector('input');
			var set = document.querySelector('.set');
			var get = document.querySelector('.get');
			var remove = document.querySelector('.remove');
			var del = document.querySelector('.del');
			
			set.addEventListener('click',function() {
				var val = ipt.value;
				localStorage.setItem('uname',val);
			});
			get.addEventListener('click',function() {
				console.log(localStorage.getItem('uname'));
			});
			remove.addEventListener('click',function() {
				localStorage.removeItem('uname');
			});
			del.addEventListener('click',function() {
				localStorage.clear();
			})
		</script>
	</body>
</html>

案例：記住用戶名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="username"> <input type="checkbox" name="" id="remember">記住用戶名
		<script type="text/javascript">
			var username = document.querySelector('#username');
			var remember = document.querySelector('#remember');
			
			if (localStorage.getItem('username')) {
				username.value = localStorage.getItem('username');
				remember.checked = true;
			}
			remember.addEventListener('change',function() {
				if(this.checked) {
					localStorage.setItem('username',username.value)
				} else {
					localStorage.removeItem('username');
				}
			})
		</script>
	</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/294239.html

標籤：其他

上一篇：Web前端學習筆記11：JavaScript_注釋_輸入輸出_變數_資料型別_關鍵字_保留字_運算子_流程控制

下一篇：ES6：【深扒】 JavaScript 中的迭代器

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • vue移動端上拉加載

    可能做得過于簡單或者比較low，請各位大佬留情，一起探討技術 ......

    uj5u.com 2020-09-10 04:38:07 more
  • 優美網站首頁，頂部多層導航

    一個個人用的瀏覽器首頁，可以把一下常用的網站放在這里，平常打開會比較方便。 第一步，HTML代碼 <script src=https://www.cnblogs.com/szharf/p/"js/jquery-3.4.1.min.js"></script> <div id="navigate"> <ul> <li class="labels labels_1"> ......

    uj5u.com 2020-09-10 04:38:47 more
  • 頁面為要加<!DOCTYPE html>

    最近因為寫一個js函式，需要用到$(window).height(); 由于手寫demo的時候，過于自信，其實對前端方面的認識也不夠體系，用文本檔案直接敲出來的html代碼，第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結果直接是整個document的高 ......

    uj5u.com 2020-09-10 04:38:52 more
  • WordPress網站程式手動升級要做好資料備份

    WordPress博客網站程式在進行升級前，必須要做好網站資料的備份，這個問題良家佐言是遇見過的；在剛開始接觸WordPress博客程式的時候，因為升級問題和博客網站的修改的一些嘗試，良家佐言是吃盡了苦頭。因為購買的是西部數碼的空間和域名，每當佐言把自己的WordPress博客網站搞到一塌糊涂的時候 ......

    uj5u.com 2020-09-10 04:39:30 more
  • WordPress程式不能升級為5.4.2版本的原因

    WordPress是一款個人博客系統，受到英文博客愛好者和中文博客愛好者的追捧，并逐步演化成一款內容管理系統軟體；它是使用PHP語言和MySQL資料庫開發的,用戶可以在支持PHP和MySQL資料庫的服務器上使用自己的博客。每一次WordPress程式的更新，就會牽動無數WordPress愛好者的心， ......

    uj5u.com 2020-09-10 04:39:49 more
  • 使用CSS3的偽元素進行首字母下沉和首行改變樣式

    網頁中常見的一種效果，首字改變樣式或者首行改變樣式，效果如下圖。 代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ......

    uj5u.com 2020-09-10 04:40:09 more
  • 關于a標簽的講解

    什么是a標簽？ <a> 標簽定義超鏈接，用于從一個頁面鏈接到另一個頁面。 <a> 元素最重要的屬性是 href 屬性，它指定鏈接的目標。 a標簽的語法格式：<a href=https://www.cnblogs.com/summerxbc/p/"指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a> a標簽 在所有瀏覽器中，鏈接的默認外觀如下： 未被訪問的鏈接帶 ......

    uj5u.com 2020-09-10 04:40:11 more
  • 前端輪播圖

    在需要輪播的頁面是引入swiper.min.js和swiper.min.css swiper.min.js地址： 鏈接：https://pan.baidu.com/s/15Uh516YHa4CV3X-RyjEIWw 提取碼：4aks swiper.min.css地址 鏈接：https://pan.b ......

    uj5u.com 2020-09-10 04:40:13 more
  • 如何設定html中的背景圖片（全屏顯示，且不拉伸）

    1 <style>2 body{background-image:url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); 3 background-size:cover;background ......

    uj5u.com 2020-09-10 04:40:16 more
  • Java學習——HTML詳解（上）

    HTML詳解 初識HTML Hyper Text Markup Language（超文本標記語言） 1 <!--DOCTYPE:告訴瀏覽器我們要使用什么規范--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <!--meta 描述性的標簽，描述一些 ......

    uj5u.com 2020-09-10 04:40:33 more
最新发布
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 07:59:23 more
  • 生產事故-走近科學之消失的JWT

    入職多年，面對生產環境，盡管都是小心翼翼，慎之又慎，還是難免捅出簍子。輕則滿頭大汗，面紅耳赤。重則系統停擺，損失資金。每一個生產事故的背后，都是寶貴的經驗和教訓，都是專案成員的血淚史。為了更好地防范和遏制今后的各類事故，特開此專題，長期更新和記錄大大小小的各類事故。有些是親身經歷，有些是經人耳傳口授 ......

    uj5u.com 2023-04-18 07:55:04 more
  • 記錄--Canvas實作打飛字游戲

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 打開游戲界面，看到一個畫面簡潔、卻又富有挑戰性的游戲。螢屏上，有一個白色的矩形框，里面不斷下落著各種單詞，而我需要迅速地輸入這些單詞。如果我輸入的單詞與螢屏上的單詞匹配，那么我就可以獲得得分；如果我輸入的單詞錯誤或者時間過長，那么我就會輸 ......

    uj5u.com 2023-04-04 08:35:30 more
  • 了解 HTTP 看這一篇就夠

    在學習網路之前，了解它的歷史能夠幫助我們明白為何它會發展為如今這個樣子，引發探究網路的興趣。下面的這張圖片就展示了“互聯網”誕生至今的發展歷程。 ......

    uj5u.com 2023-03-16 11:00:15 more
  • 藍牙-低功耗中心設備

    //11.開啟藍牙配接器 openBluetoothAdapter //21.開始搜索藍牙設備 startBluetoothDevicesDiscovery //31.開啟監聽搜索藍牙設備 onBluetoothDeviceFound //30.停止監聽搜索藍牙設備 offBluetoothDevi ......

    uj5u.com 2023-03-15 09:06:45 more
  • canvas畫板（滑鼠和觸摸）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ......

    uj5u.com 2023-02-15 08:56:31 more
  • 手機端H5 實作自定義拍照界面

    手機端 H5 實作自定義拍照界面也可以使用 MediaDevices API 和 <video> 標簽來實作，和在桌面端做法基本一致。 首先，使用 MediaDevices.getUserMedia() 方法獲取攝像頭媒體流，并將其傳遞給 <video> 標簽進行渲染。 接著，使用 HTML 的 < ......

    uj5u.com 2023-01-12 07:58:22 more
  • 記錄--短視頻滑動播放在 H5 下的實作

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 短視頻已經無數不在了，但是主體還是使用 app 來承載的。本文講述 H5 如何實作 app 的視頻滑動體驗。 無聲勝有聲，一圖頂百辯，且看下圖： 網址鏈接（需在微信或者手Q中瀏覽） 從上圖可以看到，我們主要實作的功能也是本文要講解的有： ......

    uj5u.com 2023-01-04 07:29:05 more
  • 一文讀懂 HTTP/1 HTTP/2 HTTP/3

    從 1989 年萬維網（www）誕生，HTTP（HyperText Transfer Protocol）經歷了眾多版本迭代，WebSocket 也在期間萌芽。1991 年 HTTP0.9 被發明。1996 年出現了 HTTP1.0。2015 年 HTTP2 正式發布。2020 年 HTTP3 或能正... ......

    uj5u.com 2022-12-24 06:56:02 more
  • 【HTML基礎篇002】HTML之form表單超詳解

    ??一、form表單是什么

    ??二、form表單的屬性

    ??三、input中的各種Type屬性值

    ??四、標簽 ......

    uj5u.com 2022-12-18 07:17:06 more

Copyright © 2010-2020 有解無憂