如何在html頁面中使用js變量

1、首先我們選擇創(chuàng)建一個(gè)新的html5頁面并完成初始化代碼。

公司主營業(yè)務(wù)：成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出施秉免費(fèi)做網(wǎng)站回饋大家。

2、創(chuàng)建兩個(gè)新的輸入標(biāo)記，一個(gè)用于用戶輸入變量，另一個(gè)用于用戶更改變量的值。

3、編寫腳本標(biāo)記，將js代碼寫入內(nèi)部，我們通過js獲得兩個(gè)輸入標(biāo)記元素。

4、執(zhí)行按鈕標(biāo)記的click事件功能，也就是說，當(dāng)用戶單擊“加一”按鈕時(shí)，將調(diào)用此函數(shù)。

5、在函數(shù)中，我們首先將變量轉(zhuǎn)換為數(shù)字，然后在數(shù)字中加一，以實(shí)現(xiàn)用js更改html變量的功能。

6、要刷新下一頁，我們輸入數(shù)字“18”并單擊“加一”按鈕。

7、我們可以看到輸入框中變量的值變?yōu)?9，變量的值變?yōu)閖s。

html5頁面怎么延遲加載js文件

如何延遲加載JavaScript

下面是Google推薦的代碼。這些代碼應(yīng)被放置在/body標(biāo)簽前(接近HTML文件底部)。另外，我將外部JS文件名突出顯示。

JavaScript

script type="text/javascript"

function downloadJSAtOnload() {

var element = document.createElement("script");

element.src = "defer.js";

document.body.appendChild(element);

}

if (window.addEventListener)

window.addEventListener("load", downloadJSAtOnload, false);

else if (window.attachEvent)

window.attachEvent("onload", downloadJSAtOnload);

else window.onload = downloadJSAtOnload;

/script

JS異步加載的幾種方式

異步加載又叫非阻塞加載，瀏覽器在下載執(zhí)行js的同時(shí)，還會(huì)繼續(xù)進(jìn)行后續(xù)頁面的處理。主要有三種方式。

方法一：也叫Script DOM Element

但是這種加載方式執(zhí)行完之前會(huì)阻止onload事件的觸發(fā)，而現(xiàn)在很多頁面的代碼都在onload時(shí)還執(zhí)行額外的渲染工作，所以還是會(huì)阻塞部分頁面的初始化處理。

方法二：onload時(shí)的異步加載

這種方法只是把插入script的方法放在一個(gè)函數(shù)里面，然后放在window的onload方法里面執(zhí)行，這樣就解決了阻塞onload事件觸發(fā)的問題。

注:DOMContentLoaded與load的區(qū)別。前者是在document已經(jīng)解析完成，頁面中的dom元素可用，但是頁面中的圖片，視頻，音頻等資源未加載完，作用同jQuery中的ready事件；后者的區(qū)別在于頁面所有資源全部加載完畢。

方法三：其他方法

由于JavaScript的動(dòng)態(tài)性，還有很多異步加載方法： XHR Injection、 XHR Eval、 Script In Iframe、 Script defer屬性、 document.write(script tag)。

XHR Injection(XHR 注入)：通過XMLHttpRequest來獲取JavaScript，然后創(chuàng)建一個(gè)script元素插入到DOM結(jié)構(gòu)中。ajax請(qǐng)求成功后設(shè)置script.text為請(qǐng)求成功后返回的responseText。

Script In Irame：在父窗口插入一個(gè)iframe元素，然后再iframe中執(zhí)行加載JS的操作。

GMail Mobile：業(yè)內(nèi)JS內(nèi)容被注釋，所以不會(huì)執(zhí)行，在需要的時(shí)候，獲取script中的text內(nèi)容去掉注釋，調(diào)用eval()執(zhí)行。

HTML5新屬性：async和defer屬性

defer屬性：IE4.0就出現(xiàn)。defer屬聲明腳本中將不會(huì)有document.write和dom修改。瀏覽器會(huì)并行下載其他有defer屬性的script。而不會(huì)阻塞頁面后續(xù)處理。注：所有的defer腳本必須保證按順序執(zhí)行的。

async屬性：Html5新屬性。腳本將在下載后盡快執(zhí)行，作用同defer，但是不能保證腳本按順序執(zhí)行。他們將在onload事件之前完成。

Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async屬性?？梢酝瑫r(shí)使用async和defer，這樣IE 4之后的所有IE都支持異步加載。

沒有async屬性，script將立即獲?。ㄏ螺d）并執(zhí)行，期間阻塞了瀏覽器的后續(xù)處理。如果有async屬性，那么script將被異步下載并執(zhí)行，同時(shí)瀏覽器繼續(xù)后續(xù)的處理。

總結(jié)：

對(duì)于支持HTML5的瀏覽器，實(shí)現(xiàn)JS的異步加載只需要在script元素中加上async屬性，為了兼容老版本的IE還需加上defer屬性；對(duì)于不支持Html5的瀏覽器(IE可以用defer實(shí)現(xiàn))，可以采用以上幾種方法實(shí)現(xiàn)。原理基本上都是向DOM中寫入script或者通過eval函數(shù)執(zhí)行JS代碼，你可以把它放在匿名函數(shù)中執(zhí)行，也可以在onload中執(zhí)行，也可以通過XHR注入實(shí)現(xiàn)，也可以創(chuàng)建一個(gè)iframe元素，然后在iframe中執(zhí)行插入JS代碼。

三：延遲加載

有些JS代碼在某些情況在需要使用，并不是頁面初始化的時(shí)候就要用到。延遲加載就是為了解決這個(gè)問題。將JS切分成許多模塊，頁面初始化時(shí)只加載需要立即執(zhí)行的JS，然后其它JS的加載延遲到第一次需要用到的時(shí)候再加載。類似圖片的延遲加載。

JS的加載分為兩個(gè)部分：下載和執(zhí)行。異步加載只是解決了下載的問題，但是代碼在下載完成后就會(huì)立即執(zhí)行，在執(zhí)行過程中瀏覽器處于阻塞狀態(tài)，響應(yīng)不了任何需求。

解決思路：為了解決JS延遲加載的問題，可以利用異步加載緩存起來，但不立即執(zhí)行，需要的時(shí)候在執(zhí)行。如何進(jìn)行緩存呢？將JS內(nèi)容作為Image或者Object對(duì)象加載緩存起來，所以不會(huì)立即執(zhí)行，然后在第一次需要的時(shí)候在執(zhí)行。

1：模擬較長的下載時(shí)間：

利用thread讓其sleep一段時(shí)間在執(zhí)行下載操作。

2：模擬較長的JS代碼執(zhí)行時(shí)間

這段代碼將使JS執(zhí)行5秒才完成！

JS延遲加載機(jī)制(LazyLoad)：簡單來說，就是在瀏覽器滾動(dòng)到某個(gè)位置在觸發(fā)相關(guān)的函數(shù)，實(shí)現(xiàn)頁面元素的加載或者某些動(dòng)作的執(zhí)行。如何實(shí)現(xiàn)瀏覽器滾動(dòng)位置的檢測呢？可以通過一個(gè)定時(shí)器來實(shí)現(xiàn)，通過比較某一時(shí)刻頁面目標(biāo)節(jié)點(diǎn)位置和瀏覽器滾動(dòng)條高度來判斷是否需要執(zhí)行函數(shù)。

html5 video標(biāo)簽如何在可以在視頻完全加載進(jìn)瀏覽器后執(zhí)行JS函數(shù)？

在js中使用document.getElementById("video")獲取視頻元素，加監(jiān)聽addEventListener("ended",

function

()

{

//要執(zhí)行的函數(shù)內(nèi)容

});

最近幾周都在弄這個(gè)

html5 js 問題

最后的那個(gè) body 請(qǐng)改為 /body

并把前面的 scriptxxx/script 這大塊放到 /body 前面。

因?yàn)槟阍趫?zhí)行 js 的時(shí)候 dom 都沒有加載呢，所以要放到后面，或者把整個(gè) js 放到 window.onload = function(){xxx}; 里面