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 相关文章推荐
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
javascript解析json格式的数据方法详解
Aug 07 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 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
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
让焦点自动跳转
2006/07/01 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
浅析JS运动
2015/12/28 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
python实现可逆简单的加密算法
2019/03/22 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
Python实现最常见加密方式详解
2019/07/13 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
办公室内勤工作职责
2013/12/11 职场文书
婚礼答谢礼品
2015/01/20 职场文书
5.12护士节活动总结
2015/02/10 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript
Go中的条件语句Switch示例详解
2021/08/23 Golang