適用於您網站的15免費JavaScript示例片段

文章撰寫者:
  • 精選文章
  • 更新:Sep 23,2019

JavaScript是 這些天在網上無處不在 –改善網站互動性,驗證信息和/或改善網站前景。

JavaScript最早出現在1995中,從那時起,在接受度和使用方式上已經走了很長一段路。 JavaScript中使用的語法受到C語言的強烈影響; 但是Java,Pearl,Python和Scheme也發揮了作用。

JavaScrip初學者提示:您需要了解什麼?

首先,您需要了解的一些基礎知識是:

  • 可以在瀏覽器中關閉JavaScript
  • 每次加載頁面時都會運行JavaScript
  • JavaScript需要時間來加載慢速Internet連接
  • JavaScript仍然來自緩存頁面
  • 您可以在網頁中或從.js文件外部託管JavaScript
  • JavaScript與Java完全不同

同樣重要的是要了解,如果以錯誤的方式使用JavaScript,實際上會導致災難。

配置不當且編碼不正確的JavaScript會降低您的網站速度,並損害整個網站的導航。 反過來,這會影響訪問者的返回率(由於不良的用戶體驗)以及搜索引擎排名(由於網站響應率降低和漫遊器爬行)。 為了在這裡驗證我的案子,請讓自己成為觀眾。 如果您訪問的網站加載緩慢,導航困難,並且總體上沒有吸引力,您是否會返回該網站? 我不會

以下是向其中添加JavaScript時要考慮的一小件事 你的網頁.

  • 網站是否需要JavaScript才能正常運行?
  • 如果JavaScript被阻止,網站會是什麼樣子?
  • JavaScript會損害服務器性能嗎?
  • 添加JavaScript幫助會將您的網站移動到您想要的方向嗎?

不,我不是要嚇these這些觀點。

實際上,不要害怕 在您的網站上使用JavaScript 因為它提供了很多好處,並且如上所述,大多數人都在使用它。 我試圖在這裡講解的重點是,不要在不必要的時候繼續向網站添加JavaScript功能。 與其他網站相比,某些網站需要更多的JavaScript; 有些只需要更少–僅僅因為一個站點正在做並不意味著您應該做同樣的事情。

免費贈品:15 Cool JavaScript Snippets為您的網站

現在,讓我們來看看你來到這裡的東西 - 下面是一個15 JavaScript代碼片段列表,它將在功能或外觀方面增強你的網站。 代碼將分為兩部分,head和body或.js文件。 如果沒有給出部分標題,那麼該特定片段不需要它。

1。 了解HTML5視頻

快速樣品

<script type =“ text / javascript”>函數諒解視頻(){return !! document.createElement('video')。canPlayType; // boolean} if(!understands_video()){//必須是較舊的瀏覽器或IE。 //也許做一些事情,例如隱藏自定義// HTML5控件。 或其他... videoControls.style.display ='none'; } </ script>

JavaScript代碼段的作用是什麼?

這個小小的代碼片段會阻止您的網站嘗試顯示瀏覽器無法支持的視頻,從而節省帶寬和處理能力。

2。 JavaScript Cookies

快速樣品

<script type =“ text / javascript”> / ** *設置具有給定名稱和值的Cookie。 * *名稱cookie的名稱*值cookie的值* [expires] cookie的到期日期(默認值:當前會話的結束)* [path] cookie有效的路徑(默認值:調用文檔的路徑)* [域] cookie有效的域*(默認值:調用文檔的域)* [安全]布爾值,指示cookie傳輸是否需要*安全傳輸* /函數setCookie(名稱,值,到期時間,路徑,域,安全) {document.cookie = name +“ =” + escape(value)+((expires)?“; expires =” + expires.toGMTString():“”)+((path)?“; path =” + path: “”)+((domain)?“; domain =” + domain:“”)+((secure)?“; secure”:“”); } </ script> <script type =“ text / javascript”> / ** *獲取指定cookie的值。 * *名稱所需cookie的名稱。 * *返回一個包含指定cookie值的字符串;如果cookie不存在,則返回null。 * /函數getCookie(name){var dc = document.cookie; var prefix = name +“ =”; var begin = dc.indexOf(“;” +前綴); if(begin == -1){begin = dc.indexOf(prefix); 如果(開始!= 0)返回null; } else {開始+ = 2; } var end = document.cookie.indexOf(“;”,開始); if(end == -1){end = dc.length; } return unescape(dc.substring(begin + prefix.length,end)); } </ script> <script type =“ text / javascript”> / ** *刪除指定的cookie。 * *名稱cookie的名稱* cookie的[path]路徑(必須與用於創建cookie的路徑相同)* cookie的[domain]域(必須與用於創建cookie的域相同)* /函數deleteCookie(名稱,路徑,域){如果(getCookie(name)){document.cookie =名稱+“ =” +((路徑)?“; path =” +路徑:“”)+((域)?“;域=“ + domain:”“)+”; expires =星期四,01-Jan-70 00:00:01 GMT“; }} </ script>

JavaScript代碼段的作用是什麼?

這個片段有點長但非常有用,它允許您的網站在查看者的計算機上存儲信息,然後在另一個時間點讀取它。 此代碼段可以以多種不同方式使用,以完成不同的任務。

3。 預加載圖片

快速樣品

<script type =“ text / javascript”> var images = new Array(); 函數preloadImages(){for(i = 0; i <preloadImages.arguments.length; i ++){images [i] = new Image(); images [i] .src = preloadImages.arguments [i]; }} preloadImages(“ logo.jpg”,“ main_bg.jpg”,“ body_bg.jpg”,“ header_bg.jpg”); </ SCRIPT>

JavaScript代碼段的作用是什麼?

此代碼段將阻止您的網站在僅顯示網站的一部分時遇到尷尬的時間; 這不僅看起來很糟糕,而且也是不專業的。 您所要做的就是將圖像添加到preloadImages部分,然後就可以滾動了。

4。 電子郵件驗證

快速樣品

頭:

<script type =“ text / javascript”>函數validateEmail(theForm){if(/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$ /.test(theForm.email-id.value)){return(true); } alert(“無效的電子郵件地址!請再次輸入!!”); 返回(假); } </ script>

身體:<form onSubmit =“返回validateEmail(this);” action =“”>電子郵件地址:<input type =“ text” name =“ emailid” /> <input type =“ submit” value =“ Submit” /> <input type =“ reset” value =“重置” /> </ form>

JavaScript代碼段的作用是什麼?

此代碼段將驗證是否以表格形式輸入了格式正確的電子郵件地址,它不能保證該電子郵件地址是真實的,因此無法使用JavaScript進行檢查。

5。 沒有右鍵單擊

快速樣品

<script type =“ text / javascript”>函數f1(){if(document.all){返回false; }}函數f2(e){if(document.layers ||(document.getElementById&!document.all)){if(e.which == 2 || e.which == 3){返回false; }}} if(document.layers){document.captureEvents(Event.MOUSEDOWN); document.onmousedown = f1; } else {document.onmouseup = f2; document.oncontextmenu = f1; } document.oncontextmenu = new function(“ return false”); </ SCRIPT>

JavaScript代碼段的作用是什麼?

此代碼段會阻止觀看者右鍵單擊您的頁面。 這可以阻止普通用戶從您的網站借用圖片或代碼。

6。 顯示隨機報價

快速樣品

:<script type =“ text / javascript”> writeRandomQuote = function(){var quotes = new Array(); quotes [0] =“行動是智力的真正衡量標準。” quotes [1] =“與板球相比,棒球具有更快的優勢。 quotes [2] =“每一個目標,每一個行動,每一個想法,每一種感覺,無論是有意識地還是無意識地被認識,都是試圖提高人們的內心平靜程度。” quotes [3] =“好頭和好心永遠是強大的結合。” var rand = Math.floor(Math.random()* quotes.length); 文件撰寫(引號[蘭特]); } writeRandomQuote(); </ SCRIPT>

身體:<script type =“ text / javascript”> writeRandomQuote(); </ script>

JavaScript代碼段的作用是什麼?

好的,所以這不是所有網站都會使用的片段,但它可以用來顯示不僅僅是隨機引號。 您可以將引號的內容更改為您想要的任何內容,並在您的網站上的任何位置顯示隨機圖像或文本。

7。 上一個/下一個鏈接

快速樣品

<a href="javascript:history.back(1)">上一頁</a> | <a href="javascript:history.back(-1)">下一頁</a>

JavaScript代碼段的作用是什麼?

如果您在文章或教程中有多個頁面,則此片段非常有用。 它將允許用戶輕鬆瀏覽頁面。 從資源的角度來看,它也很小,重量輕。

8。 為頁面添加書籤

快速樣品

<ahref="javascript:window.external.AddFavorite('http://www.yoursite.com','您的網站名稱')">添加到收藏夾</a>

JavaScript代碼段的作用是什麼?

此代碼段將允許用戶輕鬆為您的頁面添加書籤; 他們只需點擊鏈接即可。 它的小功能可以增加觀眾的整體體驗。

9。 輕鬆打印頁面鏈接

快速樣品

<a href="javascript:window.print();">打印頁面</a>

JavaScript代碼段的作用是什麼?

這個小鏈接將允許您的視圖輕鬆打印您的頁面。 它利用瀏覽器已經設置的快速打印功能,在點擊之前不使用任何資源。

10。 顯示格式化日期

快速樣品

:<script type =“ text / javascript”>函數showDate(){var d = new Date(); var curr_date = d.getDate(); var curr_month = d.getMonth()+ 1; //月份是從零開始的變量var curr_year = d.getFullYear(); document.write(curr_date +“-” + curr_month +“-” + curr_year); } </ script>

身體:<script type =“ text / javascript”> showDate(); </ script>

JavaScript代碼段的作用是什麼?

此代碼段允許您在網頁上的任意位置顯示當前日期,而無需更新。 簡單地把它放在適當的位置並忘記它。

11。 逗號分隔符

快速樣品

:<script type =“ text / javascript”>函數addCommas(num){num + =''; var n1 = num.split('。'); var n2 = n1 [0]; var n3 = n1.length> 1嗎? '。“ + n1 [1]:''; var temp = /(d +)(d {3})/; while(temp.test(n2)){n2 = n2.replace(temp,``+','+''); } var out =返回n2 + n3; 文件撰寫(下); } </ script>

身體:<script type =“ text / javascript”> addCommas(“ 4550989023”); </ script>

JavaScript代碼段的作用是什麼?

此代碼段主要用於經常使用數字的網站。 這個片段將使您的數字保持全面相同。 您所要做的就是複制要添加號碼的正文行,並將號碼替換為您的號碼。

12。 獲取瀏覽器的顯示區域

快速樣品

<script type =“ text / javascript”> <!-var viewportwidth; var viewportheight; //更多符合標準的瀏覽器(mozilla / netscape / opera / IE7)使用window.innerWidth和window.innerHeight if(typeof window.innerWidth!='undefined'){viewportwidth = window.innerWidth,viewportheight = window.innerHeight} / / IE6處於標準兼容模式(即,以有效的doctype作為文檔的第一行),否則if(typeof document.documentElement!='undefined'&& typeof document.documentElement.clientWidth!='undefined'&& document.documentElement.clientWidth != 0){viewportwidth = document.documentElement.clientWidth,viewportheight = document.documentElement.clientHeight} // IE的舊版本else {viewportwidth = document.getElementsByTagName('body')[0] .clientWidth,viewportheight = document.getElementsByTagName ('body')[0] .clientHeight} document.write('<p>您的視口寬度為'+ viewportwidth +'x'+ viewportheight +'</ p>');; //-> </ script>

JavaScript代碼段的作用是什麼?

此代碼段允許您在視圖瀏覽器中獲取顯示區域的寬度和高度。 這將使設計人員能夠根據用戶瀏覽器窗口的大小創建和使用不同的顯示。

13。 重定向與可選延遲

快速樣品

<script type =“ text / javascript”> setTimeout(“ window.location.href ='http://walkerwines.com.au/'”,5 * 1000); </ SCRIPT>

JavaScript代碼段的作用是什麼?

此代碼段允許您將查看者重定向到另一個頁面,並且可以選擇設置延遲。 這個片段的使用非常明顯,它是一個非常有價值的工具。

14。 檢測iPhone

樣本

<script type =“ text / javascript”> if((navigator.userAgent.match(/ iPhone / i))||(navigator.userAgent.match(/ iPod / i))){如果((document.cookie.indexOf( “” iphone_redirect = false“)== -1){window.location =” http://m.espn.go.com/wireless/?iphone&i=COMR“; }} </ script>

JavaScript代碼段的作用是什麼?

此代碼段允許您檢測您的查看器是否在iPhone或iPod上,允許您向其顯示不同的內容。 這個片段對於移動市場的規模來說是非常寶貴的,它只會繼續增長。

15。 將消息打印到狀態欄

快速樣品

<script language =“ javascript” type =“ text / javascript”> <!-window.status =“ <鍵入您的消息>”; //-> </ script>

JavaScript代碼段的作用是什麼?

這個小片段將允許您將消息打印到狀態欄。 您可以在將吸引用戶眼球的區域中顯示最近或重要的新聞。

關於WHSR嘉賓

本文由客座撰稿人撰寫。 以下作者的觀點完全是他或她自己的觀點,可能無法反映WHSR的觀點。