JavaScript网页特效学习笔记2

2023-04-26 01:46•javascript•阅读 3371

今天又从书上和视频中学到了几个网页常见的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+' +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" />
        </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个是我昨天和今天通过一些书和资料总结来的，希望对大家有所帮助，有手写的，有改的，如果有不足之处希望大家理解。

上一篇 »现在网页中流行的css3样式
下一篇 »高性能Javascript 克隆节点学习笔记

JavaScript网页特效学习笔记2

相关推荐

javascript学习笔记-1

Javascript学习笔记：对象的属性类型

PHP学习笔记，2字符串函数

html学习笔记

《CSS网站布局实录》学习笔记，五

HTML5+CSS3学习笔记，三

HTML学习笔记2

《JavaScript高级程序设计》学习笔记——最佳实践