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


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>能进行四则混合运算的计算器</title>
</head>
<body>
<h1>能进行四则混合运算的计算器</h1>
<script type="text/javascript">
<!–
function compute(obj) //计算并输出结果
{
obj.expr.value=eval(obj.expr.value);
}
//定义10个数字以及各种运算符
var one=’1′;
var two=’2′;
var three=’3′;
var four=’4′;
var five=’5′;
var six=’6′;
var seven=’7′;
var eight=’8′;
var nine=’9′;
var zero=’0′;
var plus=’+';
var minus=’-';
var multiply=’*';
var divide=’/';
var decimal=’.';
function enter(obj,string) //将输入的运算数字及运算符连接起来
{
obj.expr.value+=string;
}
//–>
</script>
<form name="clac">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4"><input type="text" name="expr" size="30" accept="compute(this.form)" /></td>
</tr>
<tr>
[...]

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


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script type="text/javascript">
<!–
//取当前日期、时、分、秒
today=new Date();
var hours=today.getHours();
var minutes=today.getMinutes();
var seconds=today.getSeconds();
//将小时按12小时存储
var timeValue=(hours>=12)?"下午":"上午";
timeValue+=((hours>12)?hours-12:hours)+"时";
timeValue+=minutes+"分";
timeValue+=seconds+"秒";
function initArray() {
this.length=initArray.arguments.length;
for(var i=0;i<this.length;i++)
//依次读取星期日至星期六7个中文名称
this[i+1]=initArray.arguments[i];
}
//建立一个数组,存储星期日到星期六7个中文名称
var d=new initArray (
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六"
);
//格式化输出,注意这里的getFullYear()不能为getYear(),否则在Firefox将显示不太正常
document.write(
"<p>",today.getFullYear(),"年",today.getMonth()+1,"月",
today.getDate(),"日"," ",d[today.getDay()+1]," ",timeValue,"</p>"
);
//–>
</script>

点击这里看一下效果吧

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


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

<script type=”text/javascript”>
<!–
var x=1;    //为变量x赋值1
var y=x;    //使用值的复制操作:变量y使用了一个独立的值1
//下面的函数可以说明使用值的操作
function add_total(total,x)
{
total=total+x;  //这里只改变了total的内部副本
return total;
}
//下面调用该函数,给它传递x和y存放的数值
//x的值将被复制,该值在函数中名称为total
//该函数会把y的一个副本值加到x的副本中
//这种操作不会影响到函数外部y的原始值
var q=add_total(x,y);
document.write(“函数运行结果为:”+q+”<p>”);
document.write(“函数运行后x值为:”+x+”<p>”);
document.write(“函数运行后y值为:”+y+”<p>”);
//下面是使用值的运算
//1是程序中的一个独立数值,用它和变量x中的存放的值进行比较
//在比较操作中,将对两个数字进行字节比较,看它们是否相同
if(x==1) {
y=2;      //如果x的值与直接量1相同,则y的值变为2
}
document.write(“现在的y值为:”+y);
//–>
</script>

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

<script type=”text/javascript”><!–
//下面创建一个对象来表示2007年6月10日
//变量myyear存储的是对对象的引用,而不是对象本身
var myyear=new Date(2007,06,10);
//下面对引用进行复制操作,将得到对原始对象的一个新引用
//两个变量引用的是同一个对象值
var newyear=myyear;
//下面通过新的引用来改变对象
newyear.setDate(18);
//通过原始的引用可以看到对象的变化
//下面的返回值将是18,而不是10
myyear.getDate();
//下面使用引用进行比较操作
//当对上面定义的两个变量进行比较操作时
//尽管它们引用的日期不同,但引用是同一个对象
if(myyear==newyear) {  //比较两个变量是否相等
document.write(“myyear == newyear 结果为:”);
document.write(myyear == newyear); //这里直接输出逻辑值
}
else {
document.write(“myyear == newyear 结果为:”);
document.write(myyear == newyear); //这里直接输出逻辑值
}
//下面定义的两个变量引用的是两个不同对象
//两个对象表示的日期完全相同
var myyear_new=new Date(2007,06,10);
var newyear_new=new Date(2007,06,10);
//根据“引用比较”原则,不同的对象是不相同的
if(myyear_new==newyear_new) { //比较两个变量是否相等
document.write(“newyear_new!= myyear_new 结果为:”);
document.write(newyear_new != myyear_new); //这里直接输出逻辑值
}
else {
document.write(“newyear_new != myyear_new 结果为:”);
document.write(newyear_new != myyear_new); //这里直接输出逻辑值
}
// –></script>

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

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


正则表达式很好很强大,不仅在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
[^.*$] 对匹配任意行

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


以下内容摘自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)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Available Region Checker</title>
</head>
<body>
<h2 align=”center”>请调整浏览器窗口大小</h2>
<hr />
<form action=”#” method=”get” name=”form1″ id=”form1″>
<!–显示浏览器窗口的实际尺寸–>
浏览器窗口的高度:<input type=”text” name=”availHeight” size=”4″><br />
浏览器窗口的宽度:<input type=”text” name=”availWidth” size=”4″ /><br />
</form>
<script type=”text/javascript”>
<!–
var winWidth=0;
var winHeight=0;
function findDimensions() //函数:获取尺寸
{
//获取窗口宽度
if(window.innerWidth)
winWidth=window.innerWidth;
else if((document.body)&&(document.body.clientWidth))
winWidth=document.body.clientWidth;
//获取窗口高度
if(window.innerHeight)
winHeight=window.innerHeight;
else if((document.body)&&(document.body.clientHeight))
winHeight=document.body.clientHeight;
/*nasty hack to deal with doctype swith in IE*/
//通过深入Document内部对body进行检测,获取窗口大小
if(document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight=document.documentElement.clientHeight;
winWidth=document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value=winHeight;
document.form1.availWidth.value=winWidth;
}
findDimensions();
window.onresize=findDimensions;
//–>
</script>
</body>
</html>

源程序解读
(1)程序首先建立一个表单,包含两个文本框,用于显示窗口当前的宽度和高度,并且,其数值会随窗口大小的改变而变化。
(2)在随后的JavaScript代码中,首先定义了两个变量winWidth和winHeight,用于保存窗口的高度值和宽度值。
(3)然后,在函数findDimensions ( )中,使用window.innerHeight和window.innerWidth得到窗口的高度和宽度,并将二者保存在前述两个变量中。
(4)再通过深入Document内部对body进行检测,获取窗口大小,并存储在前述两个变量中。
(5)在函数的最后,通过按名称访问表单元素,结果输出至两个文本框。
(6)在JavaScript代码的最后,通过调用findDimensions ( [...]