javascript按钮禁用和启用的效果实例代码


Posted in Javascript onOctober 29, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所述:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>按钮启用和禁用</title>
<script type="text/javascript">
function btn1()
{
 document.getElementById("btn1").disabled=true;
 document.getElementById("btn1").innerHTML="禁用按钮1";
 document.getElementById("btn2").disabled=false;
 document.getElementById("btn2").innerHTML="启用按钮2";
 }
 //按钮2
function btn2()
{
 document.getElementById("btn1").disabled=false;
 document.getElementById("btn1").innerHTML="启用按钮1";
 document.getElementById("btn2").disabled=true;
 document.getElementById("btn2").innerHTML="禁用按钮2";
 }
</script>
</head>
<body>
<div style="position:absolute;left:400px;top:200px">
<button id="btn1" onclick="btn1();" style="width:100px;height:100px; ">按钮1</button>
<button id="btn2" onclick="btn2();" style="width:100px;height:100px; margin-left:100px ">按钮2</button>
</div>
</body>
</html>

效果:

javascript按钮禁用和启用的效果实例代码

总结

以上所述是小编给大家介绍的javascript按钮禁用和启用的效果实例代码,希望对大家有所帮助!

Javascript 相关文章推荐
jQuery使用手册之三 CSS操作
Mar 24 Javascript
javascript操作cookie_获取与修改代码
May 21 Javascript
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
JavaScript类库D
Oct 24 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
Nov 12 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
vue时间格式化实例代码
Jun 13 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 #jQuery
bootstrap table sum总数量统计实现方法
Oct 29 #Javascript
vue.js语法及常用指令
Oct 29 #Javascript
基于vue.js快速搭建图书管理平台
Oct 29 #Javascript
JavaScript代码执行的先后顺序问题
Oct 29 #Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 #jQuery
ES6中Class类的静态方法实例小结
Oct 28 #Javascript
You might like
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
非常好的php目录导航文件代码
2006/10/09 PHP
PHP用户指南-cookies部分
2006/10/09 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
python实现简单购物商城
2016/05/21 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
制衣厂各岗位职责
2013/12/02 职场文书
给导游的表扬信
2014/01/10 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
本溪水洞导游词
2015/02/11 职场文书