web页面常用功能js实现
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:editor 阅读 306
1.网页未加载时弹出新窗口&ltbodyonunload="window.open('http://www.a68.cn')"&gt&lt/body

1.网页未加载时弹出新窗口

 

 

2.浏览网页时鼠标不能点击右键

 

 

3.设置回车键

 

 

js代码: 

 

用字符串的length实现限制文本框长度

 本例使用JS字符串的length属性来限制一个文本框内文本的长度。大致思路如下:每当用户在文本框内输入值的时候(键盘敲击事件),都触发一个名为check的函数,它会获得文本框内字符的长度,并检查该长度是否在5-10之间。如果不是则给出对应的警告。且当输入字符多余10个的时候会自动去掉长出的部分。

实例JavaScript代码

HTML代码

-------------------------------------------------

JavaScript date对象

-------------------------------------------------

//新建一个Date对象 

var todayStr = today.toString(); //把日期转化为字符串 

var todayLocal = today.toLocaleString();  //转换为本地字符串(按本地格式化) 

var date = today.getDate(); //查询当月日期 得到X天

var day = today.getDay(); //查询当前星期几 

var month = today.getMonth(); //查询月份 得到X月

var year = today.getFullYear();//查询年份 得到X年

</script>

 

JavaScript Date对象应用实例——时钟代码

 

9:54:53

 

时、分、秒

访问时分秒也是十分简单的,小时为getHours,分为getMinutes,秒为getSeconds,还有毫秒getMilliseconds。

today.getHours()

today.getminutes()

today.getSeconds()

today.getMilliseconds()

todaygetTimezoneOffset()  //时差(分钟为单位)

 

date对象设置(set)方法

设置Date对象的年、月、日等等属性。

只需要使用setDate就可以设置现在是本月的几号。setMonth设置月份,setFullYear是以四位的方式设置年份。setHours设置小时,setMinutes设置分钟,setSeconds设置秒,setMilliseconds则设置毫秒。

JavaScript代码

 

 

 date对象转换(to)方法:

将Date对象转换为字符串

Date对象的toString方法可以把它转换为字符串,从而可以很方便地显示出来或者是做进一步的处理。点击下面的按钮就可以看到toString的结果了。

today.toString() 

更有用的一个方法是toLocaleString,它将Date对象转换成符合本地习惯的字符串。

today.toLocaleString() 

toDateString与toLocaleDateString则将Date对象转换为字符串之后只保留日期部分。相对的,toTimeString和toLocaleTimeString则保留时间(时、分、秒)部分。

 

源代码 (一般浏览器不支持)

toSource方法把Date对象转换为源代码的形式,个人感觉没什么用。

today.toSource() 

 

JavaScript数组

-------------------------------------------------

创建一个JavaScript数组

与字符串对象一样,数组也有一个length属性,不过它的意思是数组包含元素的个数。点击下面的按钮可以看到arr的长度为4。

alert(arr.length)

 

数组join方法

数组对象的join方法可以把数组的几个元素连接成一个字符串。

arr.join()

数组concat方法

数组对象的concat方法可以把两个或者多个数组连接起来,组成一个新的数组。下面是一段使用了concat方法的JS代码。

JavaScript代码

concat方法也可以接受多个参数。例如, var arrNewNew = arr.concat(arr2,arr3);这个语句将arr与arr2与arr3一起连接成一个新的数组,点击下面的按钮来查看这个新的数组。

arrNewNew 

arrNewNew.length 

 

数组sort方法

数组对象的sort方法可以按照一定的顺序把数组元素重新排列起来。通常情况下,都是按照字幕顺序排列。

JavaScript代码

 

实例JavaScript数组代码

下面是一段简单的使用数组的JS代码,可以点击后面的按钮来观察各个变量的值。

sort方法的参数

sort方法可以接受一个参数,这个参数的类型是函数,它也就是排序函数了。我们可以使用它来进行自定义的排序方式。例如,我们可以让上面的数字数组按照大小的方式排序。看下面的JS代码:

点击上面的按钮可以发现,当我们使用自定义的compare函数进行排序的时候,10000这个最大的数字已经顺利地排到最后了。从代码中我们可以观察出来,sort是根据排序函数的返回值是正还是负来排序的。

 

数组push与pop方法

数组对象的push与pop方法分别在数组的尾部添加与删除元素。push方法有一个参数,也就是要添加到数组尾部的元素,而pop方法则没有参数,而是返回从数组尾部删除的元素。见下面的JS代码。

JavaScript代码

数组shift与unshift方法

数组对象的unshift与shift方法分别在数组的头部添加和删除一个元素.

JavaScript代码

 

数组slice方法

数组对象的slice方法从数组中分离出一个子数组,功能类似于字符串对象的substring方法。为了演示方便,我们创建一个值为[0,1,2,3,4,5,6,7,8,9,0]的数组。这样就形成了位置和值的对应,即,arr[0]的值恰好为0。

点击下面的按钮进行测试,可以发现,slice(0,3)会返回[0,1,2],也就是说,只返回位置0、1和2,而不包括3。由此我们可以知道,传递给slice的两个参数分别为,起始字符的位置,结束字符的位置+1。

与字符串的substring方法类似,数组的slice方法也可以省略第二个参数,表示一直到数组结束。见下面的实例。

arr.slice(3) 

arr.slice(3)表示从数组的第三个元素开始,一直到数组结尾的子数组。我们可以推测,arr.slice(0)将会返回数组本身。可以点击下面的按钮验证。

arr.slice(0) 

 

-------------------------------------------------

JavaScript 数学对象

-------------------------------------------------

JavaScript中有专门处理数学问题的Math对象。 

实例JavaScript Math代码

我们首先吧Math.PI的值保存在num中,这是一个JS内置的常量,可以点击下面的按钮来查看它的值。

alert(num) 

rNum则是num经过四舍五入的值。

 

alert(rNum) 

 

random方法则产生一个0-1之间的随机值。试着多点击几次下面的按钮,可以发现得到的数字会不断改变。

random方法则产生一个0-1之间的随机值。试着多点击几次下面的按钮,可以发现得到的数字会不断改变。

alert(Math.random())

 

JavaScript的Math对象计算器

[url]http://www.cainiao8.com/web/js_examples/09_math_jisuqnqi.html[/url]

用javascript修改html元素的class

-------------------------------------------------

实例JavaScript代码

需要注意的是在JavaScript中,如果要修改一个元素的class属性,一定要写为className,因为class是JavaScript的保留字。

HTML代码

本例只需要一个段落,并且给它设置了默认的class属性“testNormal”,而鼠标划过和划出会分别触发上面的两个JavaScript函数,从而改变该段落自身的class属性。

CSS

CSS代码设置了两个测试用的样式。

. 

-------------------------------------------------

JavaScript重定向

-------------------------------------------------

使用JavaScript可以将用户导向一个特定的地址,并且不同的方法会对浏览器的历史记录有不同的影响。

实例JavaScript代码

本例定义了两个JavaScript函数,功能都是重定向到首页,但是第一个函数采用的是直接给href赋值的方式,第二个使用的是replace方法。具体请看下面的代码:

HTML代码

JavaScript对象当作关联数组

JavaScript的对象不仅仅可以使用“.propertyName” 来访问对象的属性,也可以使用“[propertyName]”来访问对象的属性。

实例JavaScript代码

使用关联数组的方法访问对象的属性比使用传统的点“.propertyName”要灵活得多。因为我们可以在[]里填入一个变量,而不是必须事先制定好要访问的属性名。例如下面的这段代码中,我们通过select元素的name属性来设置具体要访问style的哪个属性(本例中为背景色),这样,这个函数就可以用来设置不同的CSS属性了。

HTML代码

本例的HTML代码比较简单,一个select元素用来罗列出来可选的背景色。而按钮则负责触发事件,调用函数。

选择颜色后点击按钮“设置背景颜色”。

 

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2