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 相关文章推荐
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
node使用request请求的方法
Dec 20 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
vant时间控件使用方法详解
Dec 24 Javascript
关于element的表单组件整理笔记
Feb 05 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
session 的生命周期是多长
2006/10/09 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Python实现多线程的两种方式分析
2018/08/29 Python
使用pandas读取文件的实现
2019/07/31 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
俄罗斯女装店:12storeez
2019/10/25 全球购物
服装厂厂长职责
2013/12/16 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
文明班级建设方案
2014/05/15 职场文书
2014年公司工作总结
2014/11/22 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL