目录
（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张图片
