实例一：不同的按钮提交不同的表单地址
<script type="text/javascript"> //提交表单function submitForm(btn){var btnId = btn.id; //获取单击按钮的idvar 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(){//初始为falsevar 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(){//获取到目标按钮的DOMvar myBtn = document.getElementById('myBtn');myBtn.disabled = false;//恢复可用状态window.clearInterval(myTimer);//取消定时器currStatus = '正常';//设置正常状态显示值showStatus();//显示当前状态}//修改按钮为不可用状态function disableStatus(){//获取到目标按钮的DOMvar myBtn = document.getElementById('myBtn');myBtn.disabled = true;//设置不可用为truewindow.clearInterval(myTimer);//取消定时器currStatus = '不可用';//设置不可用状态显示值showStatus();//显示当前状态}//修改按钮为开始定时10秒以后可用的状态function timerStatus(){//获取到目标按钮的DOMvar myBtn = document.getElementById('myBtn');myBtn.disabled = true;//设置不可用为truewindow.clearInterval(myTimer);//取消定时器mySec = 10; //开始10秒倒计时myTimer = window.setInterval(function(){if(mySec == 0){ //如果倒计时完了，则恢复按钮状态normalStatus();//恢复到正常状态}else{mySec--; //让倒计时秒数自减//设置倒计时状态显示值currStatus = '倒计时中('+mySec+')';showStatus(); //显示当前状态}}, 1000);}//显示当前状态function showStatus(){//获取到标题的DOMvar 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(){//获取注册按钮的DOMvar btn = document.getElementById('btn');sec--;//秒数自减1btn.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 属性，直到满足某些条件（比如选择一个复选框），才恢复用户对该按钮的使用。
如果觉得《javascript网页特效——按钮特效》对你有帮助，请点赞、收藏，并留下你的观点哦！
