JavaScript网页特效学习笔记2
来源:互联网 发布:万网域名过期多久删除 编辑:程序博客网 时间:2024/05/16 02:13
今天又从书上和视频中学到了几个网页常见的JavaScript特效,也知道了几个在html页面中很少用到的属性。
1、按钮只能被单击一次
上网的时候可能会看到当单击按钮之后,就不能再次的单击了,直到经过几秒钟后,才可以进行单击,其实这是用表单的那些元素的disabled属性来设置的,如果元素的值为真,则元素不可用,反之,则可用。
<html><head><title>这个页面的按钮只能被单击一次</title><script type="text/javascript"></script></head><body><input type="button" name="button" value="只能单击一次" onclick="this.disabled=true"/></body></html>
2、滚动的字幕链接
在没有学过JavaScript之前,html中的marquee属性就是用来设置字幕的滚动的,我们也可以用JavaScript动态的创建marquee标签。
<html><head><title>带链接的滚动字幕</title><script type="text/javascript">var marqueewidth=400 //设置marquee的宽度 var marqueeheight=20//设置marquee的高度 var speed=6//设置marquee滚动的速度var marqueecontents='<strong><big><a href="http://blog.csdn.net/long2010yu2010">无处不在的博客</a></big></strong>';document.write('<marquee scrollAmount='+speed+' style="width:'+marqueewidth+'">'+marqueecontents+'</marquee>')</script></head><body></body></html>
3、给按钮定义热键
为了方便用户对网站的操作,有些网站给一些元素定义了热键。在这里用的热键是针对于Alt键的,有些属性有accesskey的方法,通过该方法可以指定和Alt键搭配形成热键。
<html><head><title>可用快捷键键提交的表单</title></head><body><form action="http://blog.csdn.net/long2010yu2010" method="get" name="form1"><textarea rows="6" cols="40"></textarea><br/><input type="submit" accesskey="G" value="提交按钮(可以用Alt+g)"/></form></body></html>
4、加入收藏夹
几乎每个网站都有收藏本站的链接,只需要通过JavaScript的一条语句可以简单的实现这种效果。通过window下的external属性下的addFavorite方法就可实现这种操作。
<html><head><title>加入收藏夹</title><script type="text/javascript"> function store(){window.external.addFavorite("http://blog.csdn.net/long2010yu2010","我的网站");}</script></head><body><a href="#" onClick="store()"><center>收藏本站</center></a></body></head>
5、禁止复制和粘贴
有时为了需要,需要对某些文本进行禁止复制和粘贴的操作,我们可以用JavaScript的oncopy事件和onpaste事件对它进行设置。
事件<html><head><title>这个网页不能复制和粘贴</title></head><body><form name="form1" method="get"><textarea rows="6" cols="30" oncopy="document.selection.empty()" onpaste="return false"></textarea></form></body></html>
6、改变元素的大小
某些元素具有contentediteable属性,通过该属性可以对其中的元素进行编辑,如在div中放入一个文本框和一个按钮,当页面执行时会发现可以改变元素的大小等操作。
<html><head><title>这个页面文本框可改变大小</title></head><body><div contenteditable="true"><input type="text" name="text" /><br/><input type="button" name="button" value="这个可改变大小"/></div><input type="button" value="这个不能改变大小"/></body></html>
7、放大文本
放大文本有多种方法,如改变字体的字号等,这里我写的是我新学习的方法,通过样式表中的zoom属性,这个属性是设置或检索对象的缩放比例。 通过缩放可以实现放大或缩小文本、图片的效果。
<html><head><title>文本放大效果</title></head><body><font color="red" onmouseover="this.style.zoom='180%'" onmouseout="this.style.zoom='normal'">鼠标放到这个文本上面会被放大!</font></body></html>
8、用Enter键登录
我们上网的时候,当输入完某些信息后,习惯用Enter进入,如果此时该按钮被设置了onclick方法,并且该按钮处于焦点,那么直接用Enter键是好使的,如果没在焦点上怎么办呢?我们可以用下面的方法。
<html><head><title>这个页面的Enter能登录</title><script type="text/javascript">function Enter(){if(event.keyCode == 13)//如果按下的键的码是13,即回车键{document.getElementById("button1").click();//调用按钮的点击方法}}</script></head><body onkeydown="Enter()"><input type="button" id="button1" value="登录" onclick="alert('登录按钮被点击了!')"/></body></html>
9、最后的更新时间
在JavaScript中通过lastModified属性可以知道页面的最后更新时间。
<script type="text/javascript">document.write("<font color="red" size="7">本页最后的更新日期: <br/>" + document.lastModified + "");</script>
10、全选按钮特效
在我们下载东西的时候,会发现选中了一个复选框全部的都选中,在单击就都不选了,这个特效是十分简单的只要设置选中时,遍历每个下载链接将他们的checked属性设为真,取消时将他们设为空即可。
<html><head><title>复选框全选</title><script type="text/javascript">function sall(){var c = document.getElementsByName("check");//得到名字为check的复选框对象数组var all = document.getElementsByName("all")[0];//得到全选复选框对象if(all.checked == true){for (var i = 0;i < c.length;i++ ){c[i].checked = "true";}}else {for (var i = 0;i < c.length;i++ ){c[i].checked = "";}}}</script></head><body><form name="form1" method="get"><input type="checkbox" name="check">选项一<br/><input type="checkbox" name="check">选项二<br/><input type="checkbox" name="check">选项三<br/><input type="checkbox" name="check">选项四<br/><input type="checkbox" name="check">选项五<br/><input type="checkbox" name="check">选项六<br/><input type="checkbox" name="check">选项七<br/><input type="checkbox" name="check">选项八<br/></form><input type="checkbox" name="all" onclick="sall()">全选<br/></body></html>
这10个是我昨天和今天通过一些书和资料总结来的,希望对大家有所帮助,有手写的,有改的,如果有不足之处希望大家理解。
- JavaScript网页特效学习笔记2
- JavaScript网页特效学习笔记1
- JavaScript网页特效学习笔记3
- javascript特效<一>--学习笔记
- JAVAScript-网页特效
- 网页特效Javascript
- JavaScript网页开屏特效
- JavaScript另类网页特效
- javascript网页特效
- javascript网页特效——鼠标特效
- javascript网页特效——按钮特效
- javascript网页特效——链接特效
- 常用的 JAVASCRIPT 网页特效
- 网页特效、JavaScript经典效果
- JavaScript网页特效5则
- JavaScript网页特效5则
- JavaScript网页特效范例目录
- 网页JavaScript特效之弹幕
- linux中LCD设备驱动(4)——基于s3c6410平台
- 严重: IOException while loading persisted sessions: java.io.EOFException
- 将ubuntu的美国源换成台湾源,apt-get的速度会快很多
- postgres支持并发测试
- C#鼠标跟踪
- JavaScript网页特效学习笔记2
- 注册lame.ax失败的原因
- WPF下消息识别
- 带优化和不带优化的setjmp 和longjmp函数
- 在Linux下,一个文件也有三种时间,分别是:访问时间、修改时间、状态改动时间
- 黑马程序员---Java基础--08天(面向对象之三多态)
- cocos2d 开关按钮
- SQL语句练习
- 分享2个iOS源码学习网站