目錄
（1）實例代碼_switch...case、reverse、sort 方法
（1）實例代碼_Math.random、Math.floor、Math.ceil
-----前言
上篇文章我們對 JavaScript 常用內置對象、數組 做了一些介紹，詳細瞭解可參考：web快速入門之基礎篇-js：2_1、JavaScript常用內置對象、數組 這篇文章我將整理 JavaScript 常用內置對象、數組的一些案例效果演示
-----js代碼實例演示
1、js過濾敏感字符
（1）實例代碼_結合正則表達式
我們先來看看一個例子，如下代碼：js01_(js過濾敏感字符).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- 編碼類型,：純文本html,字符類型utf-8 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="jsCode1.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<form>
過濾敏感字符：
<input id="txt2" type="text" οnblur="replaceString();" />
</form>
</body>
</html>
接下來我們來看看 js 代碼：jsCode1.js
//1. 過濾敏感字符(結合正則表達式)
function replaceString() {
//獲取文本輸入框的值
var str = document.getElementById("txt2").value;
//複雜的匹配替換：結合正則表達式對象，標識
//str:用戶輸入的字符串
//replace: 參數1, 被替代的內容； 參數2,替代內容
// g:代表全部 ( global )
// i：不區分大小寫
var r = str.replace(/sb/gi,"*");
//將替換後的結果寫入文本框
document.getElementById("txt2").value = r;
}
（2）效果演示
用谷歌瀏覽器打開運行，當我在文本框輸入字母sb，點擊文本框外任意位置，效果如下：
2、js數組排序倒轉
（1）實例代碼_switch...case、reverse、sort 方法
我們先來看看一個例子，如下代碼：js02_(js數組排序倒轉).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="jsCode1.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<form>
<input type="text" value="12,4,31,111,9" id="txt3" />
<input type="button" value="數組的倒轉" οnclick="operateArray(1);" />
<input type="button" value="數組的排序（按照字符）" οnclick="operateArray(2);" />
<input type="button" value="數組的排序（按照數值）" οnclick="operateArray(3);" />
</form>
</body>
</html>
接下來我們來看看 js 代碼：jsCode1.js
//2. 操作數組：倒轉或者排序
function operateArray(t){
//先得到，拆分爲數組
var str = document.getElementById("txt3").value;
var array = str.split(",");
/*
for(var i=0;i<array.length;i++){
alert(array[i]);
}
*/
//操作
switch(t) {// 傳入的t與case標識 對應
case 1: array.reverse();break;//數組的倒轉: reverse()
case 2: array.sort(); break;//數組的字符排序: sort()
//自定義一個比較的規則，給它
case 3: array.sort(sortFunc); break;//數組的數值排序
}
//輸出
//join("*"):以 * 字符連接
alert(array.join("*"));
}
// 定義一個比較規則用的方法
function sortFunc(a,b) {
return a-b;
}
（2）效果演示
用谷歌瀏覽器打開運行，效果如下：
數組的倒轉
數組的排序（按照字符）、數組的排序（按照數組）
3、js生成隨機整數
（1）實例代碼_Math.random、Math.floor、Math.ceil
我們先來看看一個例子，如下代碼：js03_(js生成隨機整數).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="jsCode1.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<form>
<input type="button" value="出個隨機數( [3, 15) )" οnclick="getRandom(3,15);" />
</form>
</body>
</html>
接下來我們來看看 js 代碼：jsCode1.js
//3. 隨機整數
//Math.random(): 0<= x < 1
//(3, 15) : Math.random()*( 15-3 )+3
//Math.floor(4.14)-->4
//Math.ceil(4.14)-->5
function getRandom(min,max) {
var r = Math.floor(Math.random() * (max - min) + min);
alert(r);
}
（2）效果演示
用谷歌瀏覽器打開運行，效果如下：
4、js匹配驗證碼
（1）實例代碼_結合正則表達式
我們先來看看一個例子，如下代碼：js04_(js匹配驗證碼).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="jsCode1.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<form>
<input type="text" id="txt4" οnblur="validName()" />
</form>
</body>
</html>
接下來我們來看看 js 代碼：jsCode1.js
//4. 驗證碼
function validName(){
var str = document.getElementById("txt4").value;
// 邊界匹配: ^ 字符串開始; $ 字符串結束
//var reg = /[a-z]{3,5}/;
//var reg = /^[a-z]{3,5}$/;
var reg = /^[\u4e00-\u9fa5]{3}$/;//匹配3個漢字
if(!reg.test(str)){
alert("匹配失敗，請重新輸入！");
}else{
alert("匹配成功！");
}
}
（2）效果演示
用谷歌瀏覽器打開運行，效果如下：
匹配失敗，就沒有截圖了，大家可以試試看看結果！
5、js的日期Date
（1）實例代碼
我們先來看看一個例子，如下代碼：js05_(js的日期Date).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" language="javascript">
// 得到3天前的日期
function dateShow() {
var n = new Date();//獲取當前時間
//alert(n); //Sat Nov 02 2013 15:28:16 GMT+0800 (CST)
n.setDate(n.getDate() - 3);//設置天數
//alert(n); //Wed Oct 30 2013 15:29:19 GMT+0800 (CST)
//getFullYear():獲取年份
//getMonth()：獲取月份
//getDate()：獲取天數
alert(n.getFullYear() + "年" + (n.getMonth() + 1) + "月" + n.getDate());
}
</script>
</head>
<body>
<form>
<input type="button" value="Date日期_按鈕" οnclick="dateShow();" />
</form>
</body>
</html>
（2）效果演示
用谷歌瀏覽器打開運行，效果如下：
6、js的for循環
（1）實例代碼
我們先來看看一個例子，如下代碼：js06_(js的for循環).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" language="javascript">
function dateShow() {
var sum = 0;//確定數據類型
for (var i = 1; i <= 100; i++) {
sum += i;
}
alert(sum);
}
</script>
</head>
<body>
<form>
<input type="button" value="for循環_按鈕" οnclick="dateShow();" />
</form>
</body>
</html>
（2）效果演示
用谷歌瀏覽器打開運行，效果如下：
7、js的方法重載_arguments
（1）實例代碼
我們先來看看一個例子，如下代碼：js07_(方法重載).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- 編碼類型,：純文本html,字符類型utf-8 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="jsCode1.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<form>
<input type="button" value="方法重載(一個參數)" οnclick="md(10);" />
<input type="button" value="方法重載(二個參數)" οnclick="md(10,5);" />
</form>
</body>
</html>
接下來我們來看看 js 代碼：jsCode1.js
//5. 方法重載
function md() {
if (arguments.length == 1) {
var m = arguments[0];
alert(m * m);
} if (arguments.length == 2) {
var m1 = arguments[0];
var m2 = arguments[1];
alert(m1 + m2);
}
}
（2）效果演示
用谷歌瀏覽器打開運行，得到結果爲：100、15，
8、js的特殊方法：帶方法體、匿名方法_實現排序
（1）實例代碼
我們先來看看一個例子，如下代碼：js08_(帶方法體方法_匿名方法).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="jsCode1.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<form>
<input type="button" value="特殊方法" οnclick="testFunc();" />
</form>
</body>
</html>
接下來我們來看看 js 代碼：jsCode1.js
//6. 帶方法體方法、匿名方法，實現排序
function testFunc() {
//實現一： Function
//錯誤：
//var arr1={5,3,6,9,8};
var arr1 = [5, 3, 6, 9, 8];
var f = new Function("a", "b", "return a-b;");
arr1.sort(f);
alert(arr1.toString());
//實現二：匿名函數
var arr2 = [9, 6, 3, 8, 5, 2];
//錯誤：
//var f1 = new Function(a,b){
var f1 = function (a, b) {
return a - b;
};
arr2.sort(f1);
alert(arr2.toString());
}
（2）效果演示
用谷歌瀏覽器打開運行，效果如下：
9、js全局函數_簡易網頁計算器
（1）實例代碼
我們先來看看一個例子，如下代碼：js09_(eval_簡易網頁計算器).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="jsCode1.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<form>
<!-- this指整個按鈕 -->
<input type="button" value="1" οnclick="cal(this.value);" />
<input type="button" value="2" οnclick="cal(this.value);" />
<input type="button" value="3" οnclick="cal(this.value);" />
<input type="button" value="4" οnclick="cal(this.value);" />
<input type="button" value="5" οnclick="cal(this.value);" />
<input type="button" value="+" οnclick="cal(this.value);" />
<input type="button" value="-" οnclick="cal(this.value);" />
<input type="button" value="=" οnclick="cal(this.value);" />
<input type="text" id="textResult" />
</form>
</body>
</html>
接下來我們來看看 js 代碼：jsCode1.js
//7. 全局函數：eval
function cal(str) {
if (str == "=") {
var ex = document.getElementById("textResult").value;
var r = eval(ex);
//錯誤：
//document.getElementById().value = r;
document.getElementById("textResult").value = r;
} else {
document.getElementById("textResult").value += str;
}
}
（2）效果演示
用谷歌瀏覽器打開運行，效果如下：
爲了方便查看，截取了2張圖片
