主頁 > 前端設計 > JS前端面試題（三）

JS前端面試題（三）

2020-11-16 14:03:20 前端設計

文章目錄

  • 61.new的原理是什么？通過new的方式創建物件和通過字面量創建有什么區別？
  • 62.prototype 和 proto 區別是什么？
  • 63.使用ES5實作一個繼承？
  • 64.取陣列的最大值（ES5、ES6）
  • 65.ES6新的特性有哪些？
  • 66.promise 有幾種狀態, Promise 有什么優缺點 ?
  • 67.Promise建構式是同步還是異步執行，then呢 ?promise如何實作then處理 ?
  • 68.Promise和setTimeout的區別 ?
  • 69.如何實作 Promise.all ?
  • 70.如何實作 Promise.finally ?
  • 71.如何判斷img加載完成
  • 72.如何阻止冒泡？
  • 73.如何阻止默認事件？
  • 74.ajax請求時，如何解釋json資料
  • 75.json和jsonp的區別?
  • 76.如何用原生js給一個按鈕系結兩個onclick事件？
  • 77.拖拽會用到哪些事件
  • 78.document.write和innerHTML的區別
  • 79.jQuery的事件委托方法bind 、live、delegate、on之間有什么區別？
    • (1)、bind 【jQuery 1.3之前】
    • (2)、live 【jQuery 1.3之后】
    • (3)、delegate 【jQuery 1.4.2中引入】
    • (4)、on 【1.7版本整合了之前的三種方式的新事件系結機制】
  • 80.瀏覽器是如何渲染頁面的？
  • 81.$(document).ready()方法和window.onload有什么區別？
  • 82. jquery中 . g e t ( ) 提 交 和 .get()提交和 .get()提交和.post()提交有區別嗎？
  • 83.對前端路由的理解？前后端路由的區別？
  • 84.手寫一個類的繼承
  • 85.XMLHttpRequest：XMLHttpRequest.readyState;狀態碼的意思
  • 86.請重寫Array 原型的map方法
      • 先看一下map的用法
  • 87.js編程題
  • 1.請寫出代碼的運行結果？如何改進？
      • //輸出結果為（五個5）
      • 改進
  • 2.請寫出列印結果，并解釋為什么？
  • 3.請寫出列印結果，并解釋為什么？

61.new的原理是什么？通過new的方式創建物件和通過字面量創建有什么區別？

new:

  1. 創建一個新物件，
  2. 這個新物件會被執行[[原型]]連接，
  3. 將建構式的作用域賦值給新物件，即this指向這個新物件.
  4. 如果函式沒有回傳其他物件，那么new運算式中的函式呼叫會自動回傳這個新物件，
function new(func) {
    lat target = {};
    target.__proto__ = func.prototype;
    let res = func.call(target);
    if (typeof(res) == "object" || typeof(res) == "function") {
        return res;
    }
    return target;
}

字面量創建物件，不會呼叫 Object建構式, 簡潔且性能更好;

new Object() 方式創建物件本質上是方法呼叫，涉及到在proto鏈中遍歷該方法，當找到該方法后，又會生產方法呼叫必須的 堆疊資訊，方法呼叫結束后，還要釋放該堆疊，性能不如字面量的方式，

通過物件字面量定義物件時，不會呼叫Object建構式，

62.prototype 和 proto 區別是什么？

prototype是建構式的屬性，

__proto__是每個實體都有的屬性，可以訪問 [[prototype]] 屬性，

實體的__proto__與其建構式的prototype指向的是同一個物件，

function Student(name) {
    this.name = name;
}
Student.prototype.setAge = function(){
    this.age=20;
}
let Jack = new Student('jack');
console.log(Jack.__proto__);
//console.log(Object.getPrototypeOf(Jack));;
console.log(Student.prototype);
console.log(Jack.__proto__ === Student.prototype);//true

63.使用ES5實作一個繼承？

組合繼承(最常用的繼承方式)

function SuperType() {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
SuperType.prototype.sayName = function() {
    console.log(this.name);
}

function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;

SubType.prototype.sayAge = function() {
    console.log(this.age);
}

64.取陣列的最大值（ES5、ES6）

// ES5 的寫法
Math.max.apply(null, [14, 3, 77, 30]);

// ES6 的寫法
Math.max(...[14, 3, 77, 30]);

// reduce
[14,3,77,30].reduce((accumulator, currentValue)=>{
    return accumulator = accumulator > currentValue ? accumulator : currentValue
});

65.ES6新的特性有哪些？

  1. 新增了塊級作用域(let,const)
  2. 提供了定義類的語法糖(class)
  3. 新增了一種基本資料型別(Symbol)
  4. 新增了變數的解構賦值
  5. 函式引數允許設定默認值，引入了rest引數，新增了箭頭函式
  6. 陣列新增了一些API，如 isArray / from / of 方法;陣列實體新增了 entries()，keys() 和 values() 等方法
  7. 物件和陣列新增了擴展運算子
  8. ES6 新增了模塊化(import/export)
  9. ES6 新增了 Set 和 Map 資料結構
  10. ES6 原生提供 Proxy 建構式，用來生成 Proxy 實體
  11. ES6 新增了生成器(Generator)和遍歷器(Iterator)

66.promise 有幾種狀態, Promise 有什么優缺點 ?

promise有三種狀態: fulfilled, rejected, pending.

Promise 的優點:

  1. 一旦狀態改變，就不會再變，任何時候都可以得到這個結果
  2. 可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回呼函式

Promise 的缺點:

  1. 無法取消 Promise
  2. 當處于pending狀態時，無法得知目前進展到哪一個階段

67.Promise建構式是同步還是異步執行，then呢 ?promise如何實作then處理 ?

Promise的建構式是同步執行的，then 是異步執行的，

68.Promise和setTimeout的區別 ?

Promise 是微任務，setTimeout 是宏任務，同一個事件回圈中，promise.then總是先于 setTimeout 執行，

69.如何實作 Promise.all ?

要實作 Promise.all,首先我們需要知道 Promise.all 的功能：

  1. 如果傳入的引數是一個空的可迭代物件，那么此promise物件回呼完成(resolve),只有此情況，是同步執行的，其它都是異步回傳的，
  2. 如果傳入的引數不包含任何 promise，則回傳一個異步完成.

promises 中所有的promise都“完成”時或引數中不包含 promise 時回呼完成，

  1. 如果引數中有一個promise失敗，那么Promise.all回傳的promise物件失敗
  2. 在任何情況下，Promise.all 回傳的 promise 的完成狀態的結果都是一個陣列
Promise.all = function (promises) {
    return new Promise((resolve, reject) => {
        let index = 0;
        let result = [];
        if (promises.length === 0) {
            resolve(result);
        } else {
            setTimeout(() => {
                function processValue(i, data) {
                    result[i] = data;
                    if (++index === promises.length) {
                        resolve(result);
                    }
                }
                for (let i = 0; i < promises.length; i++) {
                    //promises[i] 可能是普通值
                    Promise.resolve(promises[i]).then((data) => {
                        processValue(i, data);
                    }, (err) => {
                        reject(err);
                        return;
                    });
                }
            })
        }
    });
}

70.如何實作 Promise.finally ?

不管成功還是失敗，都會走到finally中,并且finally之后，還可以繼續then，并且會將值原封不動的傳遞給后面的then.

Promise.prototype.finally = function (callback) {
    return this.then((value) => {
        return Promise.resolve(callback()).then(() => {
            return value;
        });
    }, (err) => {
        return Promise.resolve(callback()).then(() => {
            throw err;
        });
    });
}

71.如何判斷img加載完成

一、load事件


<!DOCTYPE HTML>

<html> 

<head> 

    <meta charset="utf-8">

    <title>img - load event</title>

</head> 

<body>

    <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">

    <p id="p1">loading...</p>

    <script type="text/javascript">

        img1.onload = function() {

            p1.innerHTML = 'loaded'

        }

    </script>

</body>

</html>

測驗，所有瀏覽器都顯示出了“loaded”，說明所有瀏覽器都支持img的load事件，

二、readystatechange事件

<!DOCTYPE HTML>

<html> 

<head> 

    <meta charset="utf-8">

    <title>img - readystatechange event</title>

</head> 

<body>

    <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">

    <p id="p1">loading...</p>

    <script type="text/javascript">

        img1.onreadystatechange = function() {

            if(img1.readyState=="complete"||img1.readyState=="loaded"){ 

                p1.innerHTML = 'readystatechange:loaded'

            }

        }

    </script>

</body>

</html>

readyState為complete和loaded則表明圖片已經加載完畢，測驗IE6-IE10支持該事件，其它瀏覽器不支持，

三、img的complete屬性

<!DOCTYPE HTML>

<html> 

<head> 

    <meta charset="utf-8">

    <title>img - complete attribute</title>

</head> 

<body>

    <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">

    <p id="p1">loading...</p>

    <script type="text/javascript">

        function imgLoad(img, callback) {

            var timer = setInterval(function() {

                if (img.complete) {

                    callback(img)

                    clearInterval(timer)

                }

            }, 50)

        }

        imgLoad(img1, function() {

            p1.innerHTML('加載完畢')

        })

    </script>

</body>

</html>

輪詢不斷監測img的complete屬性，如果為true則表明圖片已經加載完畢，停止輪詢，該屬性所有瀏覽器都支持，

72.如何阻止冒泡？

冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document物件)的順序觸發，

w3c的方法是e.stopPropagation()，IE則是使用e.cancelBubble = true，

//阻止冒泡行為 
function stopBubble(e) { 
//如果提供了事件物件，則這是一個非IE瀏覽器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否則，我們需要使用IE的方式來取消事件冒泡 
    window.event.cancelBubble = true; 
}

73.如何阻止默認事件？

w3c的方法是e.preventDefault()，IE則是使用e.returnValue = false

//阻止瀏覽器的默認行為 
function stopDefault( e ) { 
    //阻止默認瀏覽器動作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函式器默認動作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}

74.ajax請求時，如何解釋json資料

  • 使用eval parse,但是鑒于安全性考慮 使用parse更靠譜;

75.json和jsonp的區別?

json回傳的是一串json格式資料；而jsonp回傳的是腳本代碼（包含一個函式呼叫）

jsonp的全名叫做json with padding，就是把json物件用符合js語法的形式包裹起來以使其他的網站可以請求到，也就是將json封裝成js檔案傳過去，

76.如何用原生js給一個按鈕系結兩個onclick事件？

Var  btn=document.getElementById(‘btn’);
//事件監聽 系結多個事件
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);
function hello1(){
 alert("hello 1");
}
function hello2(){
 alert("hello 2");
}

77.拖拽會用到哪些事件

· dragstart:拖拽開始時在被拖拽元素上觸發此事件,監聽器需要設定拖拽所需資料,從作業系統拖拽檔案到瀏覽器時不觸發此事件.

· dragenter:拖拽滑鼠進入元素時在該元素上觸發,用于給拖放元素設定視覺反饋,如高亮

· dragover:拖拽時滑鼠在目標元素上移動時觸發.監聽器通過阻止瀏覽器默認行為設定元素為可拖放元素.

· dragleave:拖拽時滑鼠移出目標元素時在目標元素上觸發.此時監聽器可以取消掉前面設定的視覺效果.

· drag:拖拽期間在被拖拽元素上連續觸發

· drop:滑鼠在拖放目標上釋放時,在拖放目標上觸發.此時監聽器需要收集資料并且執行所需操作.如果是從作業系統拖放檔案到瀏覽器,需要取消瀏覽器默認行為.

· dragend:滑鼠在拖放目標上釋放時,在拖拽元素上觸發.將元素從瀏覽器拖放到作業系統時不會觸發此事件.

78.document.write和innerHTML的區別

document.write是直接寫入到頁面的內容流，如果在寫之前沒有呼叫document.open, 瀏覽器會自動呼叫open，每次寫完關閉之后重新呼叫該函式，會導致頁面被重寫，

innerHTML則是DOM頁面元素的一個屬性，代表該元素的html內容，你可以精確到某一個具體的元素來進行更改，如果想修改document的內容，則需要修改document.documentElement.innerElement，

innerHTML將內容寫入某個DOM節點，不會導致頁面全部重繪

innerHTML很多情況下都優于document.write，其原因在于其允許更精確的控制要重繪頁面的那一個部分，

79.jQuery的事件委托方法bind 、live、delegate、on之間有什么區別？

(1)、bind 【jQuery 1.3之前】

定義和用法：主要用于給選擇到的元素上系結特定事件型別的監聽函式；

語法：bind(type,[data],function(eventObject))；

特點：

(1)、適用于頁面元素靜態系結，只能給呼叫它的時候已經存在的元素系結事件，不能給未來新增的元素系結事件，

(2)、當頁面加載完的時候，你才可以進行bind()，所以可能產生效率問題，

實體如下：$( “#members li a” ).bind( “click”, function( e ) {} );

(2)、live 【jQuery 1.3之后】

定義和用法：主要用于給選擇到的元素上系結特定事件型別的監聽函式；

語法：live(type, [data], fn);

特點：

(1)、live方法并沒有將監聽器系結到自己(this)身上，而是系結到了this.context上了，

(2)、live正是利用了事件委托機制來完成事件的監聽處理，把節點的處理委托給了document，新添加的元素不必再系結一次監聽器，

(3)、使用live（）方法但卻只能放在直接選擇的元素后面，不能在層級比較深，連綴的DOM遍歷方法后面使用，即 ( “ u l ” " ) . l i v e . . . 可 以 ， 但 (“ul”").live...可以，但 (“ul”").live...可以，但(“body”).find(“ul”).live…不行；

實體如下：$( document ).on( “click”, “#members li a”, function( e ) {} );

(3)、delegate 【jQuery 1.4.2中引入】

定義和用法：將監聽事件系結在就近的父級元素上

語法：delegate(selector,type,[data],fn)

特點：

(1)、選擇就近的父級元素，因為事件可以更快的冒泡上去，能夠在第一時間進行處理，

(2)、更精確的小范圍使用事件代理，性能優于.live()，可以用在動態添加的元素上，

實體如下：

$("#info_table").delegate(“td”,“click”,function(){/顯示更多資訊/});

$(“table”).find("#info").delegate(“td”,“click”,function(){/顯示更多資訊/});

(4)、on 【1.7版本整合了之前的三種方式的新事件系結機制】

定義和用法：將監聽事件系結到指定元素上，

語法：on(type,[selector],[data],fn)

實體如下：$("#info_table").on(“click”,“td”,function(){/顯示更多資訊/});引數的位置寫法與delegate不一樣，

說明：on方法是當前JQuery推薦使用的事件系結方法，附加只運行一次就洗掉函式的方法是one()，

總結 ：.bind(), .live(), .delegate(),.on()分別對應的相反事件為：.unbind(),.die(), .undelegate(),.off()

80.瀏覽器是如何渲染頁面的？

渲染的流程如下：

1.決議HTML檔案，創建DOM樹，

自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞后續外部腳本的加載），

2.決議CSS，優先級：瀏覽器默認設定<用戶設定<外部樣式<行內樣式<HTML中的style樣式；

3.將CSS與DOM合并，構建渲染樹（Render Tree）

4.布局和繪制，重繪（repaint）和重排（reflow）

81.$(document).ready()方法和window.onload有什么區別？

(1)、window.onload方法是在網頁中所有的元素(包括元素的所有關聯檔案)完全加載到瀏覽器后才執行的，

(2)、$(document).ready() 方法可以在DOM載入就緒時就對其進行操縱，并呼叫執行系結的函式，

82. jquery中 . g e t ( ) 提 交 和 .get()提交和 .get()提交和.post()提交有區別嗎？

相同點：都是異步請求的方式來獲取服務端的資料；

異同點：

1、請求方式不同： . g e t ( ) 方 法 使 用 G E T 方 法 來 進 行 異 步 請 求 的 ， .get() 方法使用GET方法來進行異步請求的， .get()方法使用GET方法來進行異步請求的，.post() 方法使用POST方法來進行異步請求的，

2、引數傳遞方式不同：get請求會將引數跟在URL后進行傳遞，而POST請求則是作為HTTP訊息的物體內容發送給Web服務器的，這種傳遞是對用戶不可見的，

3、資料傳輸大小不同：get方式傳輸的資料大小不能超過2KB 而POST要大的多

4、安全問題： GET 方式請求的資料會被瀏覽器快取起來，因此有安全問題，

83.對前端路由的理解？前后端路由的區別？

前端的路由和后端的路由在實作技術上不一樣，但是原理都是一樣的，在 HTML5 的 history API 出現之前，前端的路由都是通過 hash 來實作的，hash 能兼容低版本的瀏覽器，

http://10.0.0.1/
http://10.0.0.1/#/about
http://10.0.0.1/#/concat

服務端路由：每跳轉到不同的URL，都是重新訪問服務端，然后服務端回傳頁面，頁面也可以是服務端獲取資料，然后和模板組合，回傳HTML，也可以是直接回傳模板HTML，然后由前端JS再去請求資料，使用前端模板和資料進行組合，生成想要的HTML，

前端路由：每跳轉到不同的URL都是使用前端的錨點路由，實際上只是JS根據URL來操作DOM元素，根據每個頁面需要的去服務端請求資料，回傳資料后和模板進行組合，當然模板有可能是請求服務端回傳的，這就是 SPA 單頁程式，

在js可以通過window.location.hash讀取到路徑加以決議之后就可以回應不同路徑的邏輯處理，

history 是 HTML5 才有的新 API，可以用來操作瀏覽器的 session history (會話歷史)，基于 history 來實作的路由可以和最初的例子中提到的路徑規則一樣，

H5還新增了一個hashchange事件，也是很有用途的一個新事件：

當頁面hash(#)變化時，即會觸發hashchange，錨點Hash起到引導瀏覽器將這次記錄推入歷史記錄堆疊頂的作用，window.location物件處理“#”的改變并不會重新加載頁面，而是將之當成新頁面，放入歷史堆疊里，并且，當前進或者后退或者觸發hashchange事件時，我們可以在對應的事件處理函式中注冊ajax等操作！
但是hashchange這個事件不是每個瀏覽器都有，低級瀏覽器需要用輪詢檢測URL是否在變化，來檢測錨點的變化，當錨點內容(location.hash)被操作時，如果錨點內容發生改變瀏覽器才會將其放入歷史堆疊中，如果錨點內容沒發生變化，歷史堆疊并不會增加，并且也不會觸發hashchange事件，

84.手寫一個類的繼承

繼承的形式有很多中，js高程里面歸納了其中，我簡單說一下前三種，
1.原型繼承

function Parent(){
    this.name = "parent";
}
Parent.prototype.getName = function(){
    return this.name;
}

function Child(){
    this.name = "child";
}

//繼承parent
Child.prototype = new Parent();

2.建構式繼承

function Animal(name){
    this.name = name;
    this.eat = function(){
        consoel.log(this.name + "吃飯");
    }
}
var cat = new Animal("maomi");
cat.name;
cat.eat();

85.XMLHttpRequest：XMLHttpRequest.readyState;狀態碼的意思

XmlHttpRequest(Ajax)狀態碼readyState
當一個XMLHttpRequest初次創建時，這個屬性的值是從0開始，知道接收完整的HTTP回應，這個值增加到4，有五種狀態：

狀態0 (請求未初始化)： (XMLHttpRequest)物件已經創建或已被abort()方法重置，但還沒有呼叫open()方法；

狀態1 (載入服務器連接已建立)：已經呼叫open() 方法，但是send()方法未呼叫，尚未發送請求；

狀態2 (載入完成，請求已接收)： send()方法已呼叫，HTTP請求已發送到web服務器，請求已經發送完成，未接收到回應；

狀態3 (互動，請求處理中)：所有回應頭部都已經接收到，回應體開始接收但未完成，即可以接收到部分回應資料；

狀態4 (請求完成，且相應已就緒)：已經接收到了全部資料，并且連接已經關閉，

86.請重寫Array 原型的map方法

先看一下map的用法

//語法：array.map(function(currentValue,index,arr), thisValue)
//用法：
var arr = [1,2,3,4];
arr.map((item,index,arr) => {
    return item*10 //新陣列為10,20,30,40
})
//map遍歷陣列，回傳一個新陣列，不改變原陣列的值，

用js實作

Array.prototype.fakeMap = function(fn,context) {
	let arr = this;
	let temp = [];
	for(let i=0;i<arr.length;i++){
		let result = fn.call(context,arr[i],i,arr);
		temp.push(result);
	}
	return temp;
}

87.js編程題

1.請寫出代碼的運行結果？如何改進？

請寫出代碼運行結果？如何改進？

for(var i=0;i<5;i++){
		setTimeout(function(){
			console.log(i)
		},1000)
	}

//輸出結果為（五個5）

原因是：

settimeout是異步執行，1s后往任務佇列里面添加一個任務，
只有主線上的全部執行完，才會執行任務佇列里的任務，
當主線執行完成后，i是5，所以此時再去執行任務佇列里的任務時，i全部是5了，

改進

for(let i=0;i<5;i++){
		setTimeout(function(){
			console.log(i)
		},1000)
	}

//輸出 0,1,2,3,4
決議：

for回圈頭部的let不僅將i系結到for回圈塊中，
它也將其重新系結到 **回圈體的每一次迭代** 中，確保上一次迭代結束的值重新被賦值，

setTimeout里面的function()屬于一個新的域，
通過 var 定義的變數是無法傳入到這個函式執行域中的，
而通過使用 let 來宣告塊變數，這時候變數就能作用于這個塊，
所以 function就能使用 i 這個變數了；

2.請寫出列印結果，并解釋為什么？

請寫出代碼運行結果，并解釋為什么？

let length = 10;

function fn(){
	console.log(this.length);
}
var obj = {
	length:5,
	method:function(){
		return fn;
	}
}
obj.method()();

//輸出結果：0
決議：
“this永遠指向呼叫他的物件”，在執行obj.method()方法時，如果函式內部有this，則this確實是指向obj，但是method()內部執行的是fn()函式，而fn()函式系結的物件是window，即window.fn()
所以this指的事window
但是為什么沒有顯示10而是顯示的0是因為
let宣告變數會形成塊級作用域，且不存在宣告提升，而var存在宣告提升，所以當使用let宣告變數時，不存在宣告提升，length屬性實際上并沒有添加到window物件中，

3.請寫出列印結果，并解釋為什么？

請寫出代碼運行結果，并解釋為什么？

var name = "clobal";
	  var object = {
	   name:'local',
	   fn:function(){
	    return this.name;
	   },
	   getName:function(){
	    alert("1." + this.name);
	    return function(){
	     return this.name;
	    }
	   },
	   getFn:function(){
	    return this.fn;
	   }
	  };
	  var fun = object.getName();
	  alert("2."+fun());
	  alert("3."+fun.apply(object));
	  alert("4."+fun.call(object));
	  var fn = object.getFn();
	  alert("5."+fn())

輸出結果

1.local 2.clocal 3.local 4.local 5.clocal

決議
this物件是在運行時基于函式的執行環境系結的，
匿名函式的執行環境具有全域性，
因此匿名函式的this指向window

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

標籤：其他

上一篇：JavaScript腳本語?&基礎語法&筆記總結

下一篇：?LeetCode刷題實戰96：不同的二叉搜索樹

標籤雲
其他(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 有解無憂