目录
(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" onblur="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="数组的倒转" onclick="operateArray(1);" />
<input type="button" value="数组的排序(按照字符)" onclick="operateArray(2);" />
<input type="button" value="数组的排序(按照数值)" onclick="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) )" onclick="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" onblur="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日期_按钮" onclick="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循环_按钮" onclick="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="方法重载(一个参数)" onclick="md(10);" />
<input type="button" value="方法重载(二个参数)" onclick="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="特殊方法" onclick="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" onclick="cal(this.value);" />
<input type="button" value="2" onclick="cal(this.value);" />
<input type="button" value="3" onclick="cal(this.value);" />
<input type="button" value="4" onclick="cal(this.value);" />
<input type="button" value="5" onclick="cal(this.value);" />
<input type="button" value="+" onclick="cal(this.value);" />
<input type="button" value="-" onclick="cal(this.value);" />
<input type="button" value="=" onclick="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张图片