160229-0一、web頁面經常使用功能js實現 web頁面經常使用功能js實現

時間 2019-12-14

標籤 web 頁面經常使用功能實現欄目 HTML 简体版

原文原文鏈接

web頁面經常使用功能js實現

1.網頁未加載時彈出新窗口javascript

<body onunload="window.open('http://www.a68.cn');"></body>html

2.瀏覽網頁時鼠標不能點擊右鍵java

<body oncontextmenu="window.event.returnValue=false"></body>web

3.設置回車鍵數組

<form id="myform" action=""> 瀏覽器

...... dom

<input type="button" id="submit" value="submit" onkeypress="pressEnter()"/> 函數

</form> post

js代碼：測試

function pressEnter()

{

if(window.event.keyCode==13) loginnav();

}

參考站點：http://491729.blog.51cto.com/481729/111245

用字符串的length實現限制文本框長度

本例使用JS字符串的length屬性來限制一個文本框內文本的長度。大體思路以下：每當用戶在文本框內輸入值的時候（鍵盤敲擊事件），都觸發一個名爲check的函數，它會得到文本框內字符的長度，並檢查該長度是否在5-10之間。若是不是則給出對應的警告。且當輸入字符多餘10個的時候會自動去掉長出的部分。

實例JavaScript代碼

-------------------------------------------------

JavaScript date對象

-------------------------------------------------

//新建一個Date對象

var todayStr = today.toString(); //把日期轉化爲字符串

var todayLocal = today.toLocaleString(); //轉換爲本地字符串(按本地格式化)

var date = today.getDate(); //查詢當月日期獲得X天

var day = today.getDay(); //查詢當前星期幾

var month = today.getMonth(); //查詢月份獲得X月

var year = today.getFullYear();//查詢年份獲得X年

</script>

JavaScript Date對象應用實例——時鐘代碼

本代碼轉自w3schools.com。

function startTime(){var today=new Date();

var h=today.getHours();

var m=today.getMinutes();

var s=today.getSeconds();//當數字小於10的時候在前面加一個0

m=checkTime(m);

s=checkTime(s);

document.getElementById('clock').innerHTML=h+":"+m+":"+s;//每隔500毫秒從新執行一次

startTimet=setTimeout('startTime()',500);}

function checkTime(i){if (i<10) { i="0" + i; }return i;}

</script>

9:54:53

時、分、秒

訪問時分秒也是十分簡單的，小時爲getHours，分爲getMinutes，秒爲getSeconds，還有毫秒getMilliseconds。

today.getHours()

today.getminutes()

today.getSeconds()

today.getMilliseconds()

todaygetTimezoneOffset() //時差（分鐘爲單位）

date對象設置（set）方法

設置Date對象的年、月、日等等屬性。

只須要使用setDate就能夠設置如今是本月的幾號。setMonth設置月份，setFullYear是以四位的方式設置年份。setHours設置小時，setMinutes設置分鐘，setSeconds設置秒，setMilliseconds則設置毫秒。

JavaScript代碼

today.setMonth(1);

today.setHours(1);

today.setDate(1); t

oday.setMinutes(1);

today.setSeconds(1);

today.setMilliseconds(1);</script>

date對象轉換（to）方法:

將Date對象轉換爲字符串

Date對象的toString方法能夠把它轉換爲字符串，從而能夠很方便地顯示出來或者是作進一步的處理。點擊下面的按鈕就能夠看到toString的結果了。

today.toString()

更有用的一個方法是toLocaleString，它將Date對象轉換成符合本地習慣的字符串。

today.toLocaleString()

toDateString與toLocaleDateString則將Date對象轉換爲字符串以後只保留日期部分。相對的，toTimeString和toLocaleTimeString則保留時間（時、分、秒）部分。

源代碼 (通常瀏覽器不支持)

toSource方法把Date對象轉換爲源代碼的形式，我的感受沒什麼用。

today.toSource()

JavaScript數組

-------------------------------------------------

建立一個JavaScript數組

//笨方法

var arr = new Array("HTML","CSS","JavaScript","DOM");

//省事一點的方法

var arr = ["HTML","CSS","JavaScript","DOM"];

</script>

與字符串對象同樣，數組也有一個length屬性，不過它的意思是數組包含元素的個數。點擊下面的按鈕能夠看到arr的長度爲4。

alert(arr.length)

數組join方法

數組對象的join方法能夠把數組的幾個元素鏈接成一個字符串。

arr.join()

數組concat方法

數組對象的concat方法能夠把兩個或者多個數組鏈接起來，組成一個新的數組。下面是一段使用了concat方法的JS代碼。

JavaScript代碼

var arrNew = arr.concat(arr2);

var arr3 = ["1","2","3","4"];

var arrNewNew = arr.concat(arr2,arr3);</script>

concat方法也能夠接受多個參數。例如， var arrNewNew = arr.concat(arr2,arr3);這個語句將arr與arr2與arr3一塊兒鏈接成一個新的數組，點擊下面的按鈕來查看這個新的數組。

arrNewNew

arrNewNew.length

數組sort方法

數組對象的sort方法能夠按照必定的順序把數組元素從新排列起來。一般狀況下，都是按照字幕順序排列。

JavaScript代碼

var arr = ["HTML","CSS","JavaScript","DOM"];

var arr2 = [4,3,2,1];

var arr3 = [40,300,2000,10000];

</script>

實例JavaScript數組代碼

下面是一段簡單的使用數組的JS代碼，能夠點擊後面的按鈕來觀察各個變量的值。

var arr = new Array("HTML","CSS","JavaScript","DOM");

var arr2 = new Array("ASP.NET","PHP","J2EE","Python","Ruby");

var joinArr = arr.join();

var bigArr = arr.concat(arr2);

var sortArr = bigArr.sort();

</script>

sort方法的參數

sort方法能夠接受一個參數，這個參數的類型是函數，它也就是排序函數了。咱們可使用它來進行自定義的排序方式。例如，咱們可讓上面的數字數組按照大小的方式排序。看下面的JS代碼：

點擊上面的按鈕能夠發現，當咱們使用自定義的compare函數進行排序的時候，10000這個最大的數字已經順利地排到最後了。從代碼中咱們能夠觀察出來，sort是根據排序函數的返回值是正仍是負來排序的。

數組push與pop方法

數組對象的push與pop方法分別在數組的尾部添加與刪除元素。push方法有一個參數，也就是要添加到數組尾部的元素，而pop方法則沒有參數，而是返回從數組尾部刪除的元素。見下面的JS代碼。

JavaScript代碼

var arr = ["HTML","CSS","JavaScript","DOM"];

var arr2 = [1,2,3,4]; arr.push("PHP");

var popped = arr2.pop();

</script>

數組shift與unshift方法

數組對象的unshift與shift方法分別在數組的頭部添加和刪除一個元素.

JavaScript代碼

var arr = ["HTML","CSS","JavaScript","DOM"];

var arr2 = [1,2,3,4]; arr.unshift("PHP");

var shifted = arr2.shift();

</script>

數組slice方法

數組對象的slice方法從數組中分離出一個子數組，功能相似於字符串對象的substring方法。爲了演示方便，咱們建立一個值爲[0,1,2,3,4,5,6,7,8,9,0]的數組。這樣就造成了位置和值的對應，即，arr[0]的值剛好爲0。

點擊下面的按鈕進行測試，能夠發現，slice(0,3)會返回[0,1,2]，也就是說，只返回位置0、1和2，而不包括3。由此咱們能夠知道，傳遞給slice的兩個參數分別爲，起始字符的位置，結束字符的位置+1。

與字符串的substring方法相似，數組的slice方法也能夠省略第二個參數，表示一直到數組結束。見下面的實例。

arr.slice(3)

arr.slice(3)表示從數組的第三個元素開始，一直到數組結尾的子數組。咱們能夠推測，arr.slice(0)將會返回數組自己。能夠點擊下面的按鈕驗證。

arr.slice(0)

-------------------------------------------------

JavaScript 數學對象

-------------------------------------------------

JavaScript中有專門處理數學問題的Math對象。

實例JavaScript Math代碼

alert(num)

rNum則是num通過四捨五入的值。

alert(rNum)

random方法則產生一個0-1之間的隨機值。試着多點擊幾回下面的按鈕，能夠發現獲得的數字會不斷改變。

alert(Math.random())

JavaScript的Math對象計算器

[url]http://www.cainiao8.com/web/js_examples/09_math_jisuqnqi.html[/url]

-------------------------------------------------

用javascript修改html元素的class

-------------------------------------------------

實例JavaScript代碼

須要注意的是在JavaScript中，若是要修改一個元素的class屬性，必定要寫爲className，由於class是JavaScript的保留字。

function over(){

var para = document.getElementById("testPara").className = "testOver"; } function out(){ var para = document.getElementById("testPara").className = "testNormal"; } </script>

HTML代碼

本例只須要一個段落，而且給它設置了默認的class屬性「testNormal」，而鼠標劃過和劃出會分別觸發上面的兩個JavaScript函數，從而改變該段落自身的class屬性。

CSS

CSS代碼設置了兩個測試用的樣式。

.testNormal { border:1px solid black; }.testOver { background:#999999; border:1px solid black; font-weight:bold; padding:3em; }

-------------------------------------------------

JavaScript重定向

-------------------------------------------------

使用JavaScript能夠將用戶導向一個特定的地址，而且不一樣的方法會對瀏覽器的歷史記錄有不一樣的影響。

實例JavaScript代碼

本例定義了兩個JavaScript函數，功能都是重定向到首頁，可是第一個函數採用的是直接給href賦值的方式，第二個使用的是replace方法。具體請看下面的代碼：

HTML代碼

<p> 點擊後面的按鈕就可使得頁面轉向首頁，能夠點擊瀏覽器的後退按鈕返回本頁。使用的方法是直接給location.href賦值。</p><button return false;" value="重定向到首頁"> 重定向到首頁</button><p> 點擊後面的按鈕就一樣會跳轉到首頁，可是因爲是使用location.replace的方法，因此不能經過瀏覽器的後退按鈕返回本頁。</p><button return false;" value="重定向到首頁(不能返回)" >

-------------------------------------------------

JavaScript對象看成關聯數組

-------------------------------------------------

JavaScript的對象不只僅可使用「.propertyName」來訪問對象的屬性，也可使用「[propertyName]」來訪問對象的屬性。

實例JavaScript代碼

使用關聯數組的方法訪問對象的屬性比使用傳統的點「.propertyName」要靈活得多。由於咱們能夠在[]裏填入一個變量，而不是必須事先制定好要訪問的屬性名。例以下面的這段代碼中，咱們經過select元素的name屬性來設置具體要訪問style的哪一個屬性（本例中爲背景色），這樣，這個函數就能夠用來設置不一樣的CSS屬性了。

本例的HTML代碼比較簡單，一個select元素用來羅列出來可選的背景色。而按鈕則負責觸發事件，調用函數。

<select id="selectColor" name="backgroundColor"> <option value="aqua">aqua</option> <option value="black">black</option> <option value="blue">blue</option> <option value="fuchsia">fuchsia</option> <option value="gray">gray</option> <option value="green">green</option> <option value="lime">lime</option> <option value="maroon">maroon</option> <option value="navy">navy</option> <option value="olive">olive</option> <option value="purple">purple</option> <option value="red">red</option> <option value="silver">silver</option> <option value="teal">teal</option> <option value="white">white</option> <option value="yellow">yellow</option></select> <button return false;">設置背景顏色</button>效果

選擇顏色後點擊按鈕「設置背景顏色」。