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 相关文章推荐
Js与下拉列表处理问题解决
Feb 13 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
vue实现列表的添加点击
Dec 29 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 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
桌面中心(三)修改数据库
2006/10/09 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
PHP中Array相关函数简介
2016/07/03 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
python3.6的venv模块使用详解
2018/08/01 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
个人应聘自我评价分享
2013/11/18 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
社区服务活动小结
2014/07/08 职场文书
销售会议开幕词
2015/01/28 职场文书
病人慰问信范文
2015/02/15 职场文书
决心书格式范文
2015/09/23 职场文书
学校体育节班级口号
2015/12/25 职场文书