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 属性，直到满足某些条件（比如选择一个复选框），才恢复用户对该按钮的使用。