胡戈戈 » javascript

每日一JavaScript:能进行四则混合运算的计算器

胡戈戈 — Mon, 01 Dec 2008 17:11:20 +0000

网上也有下面部分的代码，不过这段代码经过我的修改了，原有代码中“AC”这个按钮无效，我到现在还不明白什么原因，所以只用了更简单的方法reset来解决掉。你可以点击这里查看效果。








能进行四则混合运算的计算器
%MINIFYHTML9ab046ae0b0ce2609e3ecdeafbda3e850%

Hugege.com by 胡戈戈 Copyright © 2008 爱祖国,爱人民,唉派对。
更多精彩欢迎您订阅http://feed.hugege.com
GegeHost稳定便宜的美国主机,论坛推荐:美国主机论坛

每日一JavaScript:显示当前日期、时间和星期

胡戈戈 — Sun, 30 Nov 2008 16:25:23 +0000

最主要是用到了日期对象和数组的知识，不难但我觉得很重要

%MINIFYHTML9ab046ae0b0ce2609e3ecdeafbda3e851%

点击这里看一下效果吧

Hugege.com by 胡戈戈 Copyright © 2008 爱祖国,爱人民,唉派对。
更多精彩欢迎您订阅http://feed.hugege.com
GegeHost稳定便宜的美国主机,论坛推荐:美国主机论坛

每日一JavaScript:使用值操作数据与使用引用操作数据

胡戈戈 — Sat, 29 Nov 2008 15:35:43 +0000

数字是原始类型，使用值的数据操作

对象和作为特殊对象类型的数组及函数都是引用类型

字符串的特殊性：在复制和传递字符串时使用的是引用，但对字符串进行比较时却使用的是值。

Hugege.com by 胡戈戈 Copyright © 2008 爱祖国,爱人民,唉派对。
更多精彩欢迎您订阅http://feed.hugege.com
GegeHost稳定便宜的美国主机,论坛推荐:美国主机论坛

每日一JavaScript:常用正则表达式举例

胡戈戈 — Fri, 28 Nov 2008 17:40:12 +0000

正则表达式很好很强大，不仅在JavaScript，我在第一次接触到这个东西是在学PHP的时候，总之现代的很多网络编程语言都会用到，听说还有更大的用途，今天我看到的文章说是可以用来解方程，做数学题，特别特别喜欢，基本的知识目前也已经了解了，以后有空我会更深入地去学习。

^ 对行首
$ 对行尾
^the对以the开头行
[Ss]igna[lL]对匹配单词signal、signaL、
Signal、SignaL
[Ss]igna[lL]\. 对同上，但加一句点
[mayMAY] 对包含may大写或小写字母的行
^USER$ 对只包含USER的行
[tty]$ 对以tty结尾的行
\. 对带句点的行
[.*0] 对0之前或之后加任意字符
[000*] 对000或更多个
[iI] 对大写或小写I
[iI] [nN] 对大写或小写i或n
[^$] 对空行
[^.*$] 对匹配行中任意字符串
^……$ 对包括6个字符的行
[a-zA-Z] 对任意单字符
[a-z][a-z]* 对至少一个小写字母
[^0-9\$] 对非数字或美元标识
[^0-0A-Za-z] 对非数字或字母
[123] 对1到3中一个数字
[Dd]evice 对单词device或Device
De..ce 对前两个字母为De，后跟两个任意字符，最后为ce
\^q对以^q开始行
^.$ 对仅有一个字符的行
^\.[0-9][0-9] 对以一个句点和两个数字开始的行
‘”Device”‘ 对单词device
De[Vv]ice\. 对单词Device或deVice
[0-9]\{2\}-[0-9]\{2\}-[0-9]\{4\} 对日期格式dd-mm-yyyy
[0-9]\{3\}\.[0-9]\{3\}\.[0-9]\{3\}\.[0-9]\{3\}对IP地址格式nnn.nnn.nnn.nnn
[^.*$] 对匹配任意行

以下的内容转自蓝色理想
匹配中文字符的正则表达式： [\u4e00-\u9fa5]

匹配双字节字符(包括汉字在内)：[^\x00-\xff]

应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

String.prototype.len=function(){return this.replace([^\x00-\xff]/g,”aa”).length;}

匹配空行的正则表达式：\n[\s| ]*\r

匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/

匹配首尾空格的正则表达式：(^\s*)|(\s*$)

应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现，如下：

String.prototype.trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g, “”);
}

利用正则表达式分解和转换IP地址：

下面是利用正则表达式匹配IP地址，并将IP地址转换成对应数值的Javascript程序：

function IP2V(ip)
{
re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g //匹配IP地址的正则表达式
if(re.test(ip))
{
return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1
}
else
{
throw new Error(“Not a valid IP address!”)
}
}

不过上面的程序如果不用正则表达式，而直接用split函数来分解可能更简单，程序如下：

var ip=”10.100.20.168″
ip=ip.split(“.”)
alert(“IP值是：”+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1))

匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?

利用正则表达式去除字串中重复的字符的算法程序：[注：此程序不正确，原因见本贴回复]

var s=”abacabefgeeii”
var s1=s.replace(/(.).*\1/g,”$1″)
var re=new RegExp(“["+s1+"]“,”g”)
var s2=s.replace(re,”")
alert(s1+s2) //结果为：abcefgi

我原来在CSDN上发贴寻求一个表达式来实现去除重复字符的方法，最终没有找到，这是我能想到的最简单的实现方法。思路是使用后向引用取出包括重复的字符，再以重复的字符建立第二个表达式，取到不重复的字符，两者串连。这个方法对于字符顺序有要求的字符串可能不适用。

得用正则表达式从URL地址中提取文件名的javascript程序，如下结果为page1

s=”http://www.9499.net/page1.htm”
s=s.replace(/(.*\/){0,}([^\.]+).*/ig,”$2″)
alert(s)

利用正则表达式限制网页表单里的文本框输入内容：

用正则表达式限制只能输入中文：onkeyup=”value=value.replace(/[^\u4E00-\u9FA5]/g,”)” onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\u4E00-\u9FA5]/g,”))”

用正则表达式限制只能输入全角字符： onkeyup=”value=value.replace(/[^\uFF00-\uFFFF]/g,”)” onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\uFF00-\uFFFF]/g,”))”

用正则表达式限制只能输入数字：onkeyup=”value=value.replace(/[^\d]/g,”) “onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\d]/g,”))”

用正则表达式限制只能输入数字和英文：onkeyup=”value=value.replace(/[\W]/g,”) “onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\d]/g,”))”

更详细的含义

　　\　
　　将下一个字符标记为一个特殊字符、或一个原义字符、或一个后向引用、或一个八进制转义符。例如，’n’ 匹配字符 “n”。’\n’ 匹配一个换行符。序列 ‘\\’ 匹配 “\” 而 “\(” 则匹配 “(“。　
　　^　
　　匹配输入字符串的开始位置。
　　$　
　　匹配输入字符串的结束位置。
　　*　
　　匹配前面的子表达式零次或多次。例如，zo* 能匹配 “z” 以及 “zoo”。 * 等价于{0,}。　
　　+　
　　匹配前面的子表达式一次或多次。例如，’zo+’ 能匹配 “zo” 以及 “zoo”，但不能匹配 “z”。+ 等价于 {1,}。　
　　?　
　　匹配前面的子表达式零次或一次。例如，”do(es)?” 可以匹配 “do” 或 “does” 中的”do” 。? 等价于 {0,1}。　
　　{n}　
　　n 是一个非负整数。匹配确定的 n 次。例如，’o{2}’ 不能匹配 “Bob” 中的 ‘o’，但是能匹配 “food” 中的两个 o。　
　　{n,}　
　　n 是一个非负整数。至少匹配n 次。例如，’o{2,}’ 不能匹配 “Bob” 中的 ‘o’，但能匹配 “foooood” 中的所有 o。’o{1,}’ 等价于 ‘o+’。’o{0,}’ 则等价于 ‘o*’。　
　　{n,m}　
　　m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。 "o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。　
　　?　
　　当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串 "oooo"，'o+?' 将匹配单个 "o"，而 'o+' 将匹配所有 'o'。　
　　.　
　　匹配除 "\n" 之外的任何单个字符。要匹配包括 '\n' 在内的任何字符，请使用象 '[.\n]' 的模式。　
　　(pattern)　
　　匹配pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到，在VBScript 中使用 SubMatches 集合，在Visual Basic Scripting Edition 中则使用 $0…$9 属性。要匹配圆括号字符，请使用 '$' 或 '$'。　
　　(?:pattern)　
　　匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如， 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。　
　　(?=pattern)　
　　正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如， 'Windows (?=95|98|NT|2000)' 能匹配 "Windows 2000" 中的 "Windows" ，但不能匹配 "Windows 3.1" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。　
　　(?!pattern)　
　　负向预查，在任何不匹配Negative lookahead matches the search string at any point where a string not matching pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如'Windows (?!95|98|NT|2000)' 能匹配 "Windows 3.1" 中的 "Windows"，但不能匹配 "Windows 2000" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始　
　　x|y　
　　匹配 x 或 y。例如，'z|food' 能匹配 "z" 或 "food"。'(z|f)ood' 则匹配 "zood" 或 "food"。　
　　[xyz]　
　　字符集合。匹配所包含的任意一个字符。例如， '[abc]' 可以匹配 "plain" 中的 'a'。　
　　[^xyz]　
　　负值字符集合。匹配未包含的任意字符。例如， '[^abc]' 可以匹配 "plain" 中的'p'。　
　　[a-z]　
　　字符范围。匹配指定范围内的任意字符。例如，'[a-z]' 可以匹配 'a' 到 'z' 范围内的任意小写字母字符。　
　　[^a-z]　
　　负值字符范围。匹配任何不在指定范围内的任意字符。例如，'[^a-z]' 可以匹配任何不在 'a' 到 'z' 范围内的任意字符。　
　　\b　
　　匹配一个单词边界，也就是指单词和空格间的位置。例如， 'er\b' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。　
　　\B　
　　匹配非单词边界。'er\B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。　
　　\cx　
　　匹配由x指明的控制字符。例如， \cM 匹配一个 Control-M 或回车符。 x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 'c' 字符。　
　　\d　
　　匹配一个数字字符。等价于 [0-9]。　
　　\D　
　　匹配一个非数字字符。等价于 [^0-9]。　
　　\f　
　　匹配一个换页符。等价于 \x0c 和 \cL。　
　　\n　
　　匹配一个换行符。等价于 \x0a 和 \cJ。　
　　\r　
　　匹配一个回车符。等价于 \x0d 和 \cM。　
　　\s　
　　匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。　
　　\S　
　　匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。　
　　\t　
　　匹配一个制表符。等价于 \x09 和 \cI。　
　　\v　
　　匹配一个垂直制表符。等价于 \x0b 和 \cK。　
　　\w　
　　匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。　
　　\W　
　　匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。　
　　\xn　
　　匹配 n，其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如， '\x41' 匹配 "A"。'\x041' 则等价于 '\x04' & "1"。正则表达式中可以使用 ASCII 编码。.　
　　\num　
　　匹配 num，其中 num 是一个正整数。对所获取的匹配的引用。例如，'(.)\1' 匹配两个连续的相同字符。　
　　\n　
　　标识一个八进制转义值或一个后向引用。如果 \n 之前至少 n 个获取的子表达式，则 n 为后向引用。否则，如果 n 为八进制数字 (0-7)，则 n 为一个八进制转义值。　
　　\nm　
　　标识一个八进制转义值或一个后向引用。如果 \nm 之前至少有is preceded by at least nm 个获取得子表达式，则 nm 为后向引用。如果 \nm 之前至少有 n 个获取，则 n 为一个后跟文字 m 的后向引用。如果前面的条件都不满足，若　n 和 m 均为八进制数字 (0-7)，则 \nm 将匹配八进制转义值 nm。　
　　\nml　
　　如果 n 为八进制数字 (0-3)，且 m 和 l 均为八进制数字 (0-7)，则匹配八进制转义值 nml。　
　　\un　
　　匹配 n，其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如， \u00A9 匹配版权符号 (?)。

每日一JavaScript:获取浏览器窗口大小

胡戈戈 — Thu, 27 Nov 2008 16:37:41 +0000

以下内容摘自JavaScript相关书籍和网络，我感觉以现在的情况应该可以再简化些，牛人帮忙看下。
（1）要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是< body>元素。

（2）Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

（3）Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

（4）document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。(for IE6)

Available Region Checker

`请调整浏览器窗口大小`


 

 
 
 浏览器窗口的高度：

 浏览器窗口的宽度：

源程序解读

（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。

（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。

（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。

（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。

（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。

（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。

演示页面请看这里。