javascript网页特效——按钮特效

实例一：不同的按钮提交不同的表单地址

<script type="text/javascript">         
    //提交表单
    function submitForm(btn){
        var btnId = btn.id;         //获取单击按钮的id
        var f = document.forms[0]       //当前的表单
        if(btnId == 'myBtn1'){          //是否是第一个按钮
            f.action = 'url1.html';     //修改action地址
        }else if(btnId == 'myBtn2'){        //如果是第二个按钮
            f.action = 'url2.html';     //修改action地址
        }
        f.submit();                 //提交表单
    }
</script>


<!-- 定义表单，包含2个按钮 -->
        <form action="" method="post" style="display:block; width: 200px; height: 200px; border: 1px solid black;">
            <br/><br/><br/>
            <input type="button" value="提交按钮一" id="myBtn1" 
                onclick="submitForm(this);"/>
            <br/>
            <input type="button" value="提交按钮二" id="myBtn2" 
                onclick="submitForm(this);"/>
        </form>

实例二：Enter键自动提交表单

<script type="text/javascript">         
            //当用户按下键时
            function formKeyPress(event){
                if(event.keyCode == 13){    //判断是否按的是Enter键
                    document.forms[0].submit(); //提交表单
                }else{
                    return false;               //返回
                }
            }
</script>

<!-- 定义表单，按钮 -->
        <form action="" method="post" style="display:block; width: 250px; height: 100px; 
            border: 1px solid black;">
            <br/>
            用户名：<input type="text" name="username"/><br/>
            密码：<input type="password" 
                name="password" onkeypress="formKeyPress();"/><br/>
            <input type="submit" value="提交"/><br/>
        </form>     

Password 对象代表 HTML 表单中的密码字段。
该文本输入字段供用户输入某些敏感的数据，比如密码等。当用户输入的时候，他的输入是被掩盖的（例如使用星号*），以防止旁边的人从他背后看到输入的内容。不过需要注意的是，当表单提交时，输入是用明文发送的。

实例三：按钮在单击以后就失效

<script type="text/javascript">         
            //提交表单
            function submitForm(){
                //让按钮失效
                document.getElementById("myBtn").disabled = true;
                document.forms[0].submit();     //提交表单
            }
</script>


<!-- 定义表单，按钮 -->
        <form action="" method="post" style="display:block; width: 250px; height: 100px; 
            border: 1px solid black;">
            <br/>
            用户名：<input type="text" name="username"/><br/>
            密码：<input type="password" name="password"/><br/>
            <input type="button" value="提交" onclick="submitForm();" id="myBtn"/><br/>
        </form>     

实例四：删除按钮必须的提醒功能

<script type="text/javascript">         
            //删除按钮必须的提醒功能
            function deleteInfo(){
                //初始为false
                var confirmDel = false;     
                //使用弹出框来接受用户是否确定删除
                confirmDel = window.confirm("确定删除吗？");
                if(confirmDel){             //如果用户确定删除
                    alert('删除成功');      //这里给出提示
                }else{
                    return false;       //否则返回false，什么都不做
                }
            }
</script>

confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。

实例五：通过单击按钮改变状态栏信息

<script type="text/javascript">                     
    function modifyStatus(){    //通过单击按钮改变状态栏信息
        window.status = 'hello world';  //为status设置新的值
    }
</script>

status 属性是一个可读可写的字符串，声明了要在窗口状态栏中显示的一条消息。
不少浏览器已经关闭了脚本化它们的状态栏的功能。这是一项安全措施，防止隐藏了超链接真正目的的钓鱼攻击。

实例六：不同的状态展示不同样式的按钮

<script type="text/javascript">         
            var currStatus = '正常';          //当前的状态
            var myTimer = null;             //定时器
            var mySec = 0;                  //定时还剩下的秒
            //修改按钮为正常状态
            function normalStatus(){
                //获取到目标按钮的DOM
                var myBtn = document.getElementById('myBtn');
                myBtn.disabled = false;     //恢复可用状态
                window.clearInterval(myTimer);//取消定时器
                currStatus = '正常';          //设置正常状态显示值
                showStatus();               //显示当前状态
            }
            //修改按钮为不可用状态
            function disableStatus(){
                //获取到目标按钮的DOM
                var myBtn = document.getElementById('myBtn');
                myBtn.disabled = true;      //设置不可用为true
                window.clearInterval(myTimer);//取消定时器
                currStatus = '不可用';     //设置不可用状态显示值
                showStatus();               //显示当前状态
            }
            //修改按钮为开始定时10秒以后可用的状态
            function timerStatus(){
                //获取到目标按钮的DOM
                var myBtn = document.getElementById('myBtn');
                myBtn.disabled = true;      //设置不可用为true
                window.clearInterval(myTimer);//取消定时器
                mySec = 10;             //开始10秒倒计时
                myTimer = window.setInterval(function(){
                    if(mySec == 0){         //如果倒计时完了，则恢复按钮状态
                        normalStatus();     //恢复到正常状态
                    }else{
                        mySec--;            //让倒计时秒数自减
                        //设置倒计时状态显示值
                        currStatus = '倒计时中('+mySec+')';
                        showStatus();       //显示当前状态
                    }
                }, 1000);
            }
            //显示当前状态
            function showStatus(){
                //获取到标题的DOM
                var h2 = document.getElementsByTagName("h2")[0];
                //设置标题为当前的状态
                h2.innerHTML = '当前的状态：' + currStatus; 
            }
        </script>


<!-- 定义按钮 -->
        <h2>当前的状态：</h2>
        <input type="button" value="正常状态" id="myBtn1" onclick="normalStatus()"/>
        <input type="button" value="不可用状态" id="myBtn2" onclick="disableStatus()"/>
        <input type="button" value="开始倒计时状态" id="myBtn3" onclick="timerStatus()"/>
        <br /><br />
        <input type="button" value="一个按钮" id="myBtn"/>

实例七：注册按钮倒计时效果

<script type="text/javascript">     
            //倒计时 秒
            var sec = 10;
            //初始化函数
            function init(){                
                //设置定时器，间隔1秒
                timer = setInterval(function(){
                    //获取注册按钮的DOM
                    var btn = document.getElementById('btn');
                    sec--;      //秒数自减1
                    btn.value = '注册('+sec+')';//按钮的文本
                    if(sec == 0){//如果倒计时结束
                        clearInterval(timer);//清除定时器
                        btn.disabled = false;//恢复可用
                        btn.value = '注册';//设置按钮文本
                    }
                }, 1000);
            }
        </script>   


<body style="text-align:center" onload="init();">
        <p>请认真阅读本协议。。。</p><br>
        <input type="button" value="注册(10)" id="btn" disabled="disabled"/>
</body>

disabled 属性规定禁用按钮。可以设置 disabled 属性，直到满足某些条件（比如选择一个复选框），才恢复用户对该按钮的使用。