javascript按钮禁用和启用的效果实例代码
废话不多说了,直接给大家贴代码了,具体代码如下所述:
<!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按钮禁用和启用的效果实例代码,希望对大家有所帮助!
相关推荐
-
AngularJS 实现点击按钮获取验证码功能实例代码
html :样式采用了sui框架的样式,请自行引入查看,AngularJS,自己引入, <div ng-controller="forGetPassword" ng-app="routingDemoApp"> <form novalidate name="forget"> <header class="bar bar-nav"> <a href="javascript:his
-
ionic+AngularJs实现获取验证码倒计时按钮
按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 主要实现原理:点击后,设置一个$interval,每一秒更改一次剩余时间,并依赖Angular数据绑定实时显示在页面中.设置一个$timeout,60秒后将按钮初始化到可用状态. 实现代码: (1)js代码,设置成一个directive以便多次调用. angular.module('winwin').directive('timerbutton', function($timeout, $interval){
-
JS给按钮添加跳转功能类似a标签
方法 window.location.href = "要跳转的URL"; 或 window.location = "要跳转的URL"; 或 location = "要跳转的URL"; 示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>给按钮添加跳转功能[类似a标签]</title&g
-
JS简单实现点击按钮或文字显示遮罩层的方法
本文实例讲述了JS简单实现点击按钮或文字显示遮罩层的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>点击文字弹出一个DIV层窗口代码</title> <meta charset="urf-8"/> &l
-
js+html5实现复制文字按钮
本文实例为大家分享了js+html5实现点击复制文字的按钮,供大家参考,具体内容如下 图片展示: 注意css中的样式,有些页面复制不成功就是没有添加那一句造成的. 代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style type=
-
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了.写出了总结下 使用的方法:clipboard 插件下载地址:https://github.com/zenorocha/clipboard.js/tree/master 引入插件:目录\clipboard.js-master\dist\clipboard.min.js 目录中有各种demo,分别实现了固定的文字复制,input的复制等等,可以看下找找思路: 下边来记录下使用的方式: 一:引入插件: <script src=&quo
-
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
应用场景 在开发"发送短信验证"功能时候,要解决一个问题,防止恶意或频繁发送短信验证码问题.一般原理是"当点击发送按钮时,发送ajax请求到服务器发送短信验证码,成功则把发送按钮设置为不可点击,并且调用定时器,按钮显示倒计时".如果就这样不对倒计时存储做处理,那么当刷新页面,会出现倒计时失效,按钮可点击.提供以下解决方案: 利用cookie存储倒计时 利用HTML5的localStorage 存储倒计时 利用cookie存储倒计时 发送成功后把剩余倒计时存储到coo
-
javascript按钮禁用和启用的效果实例代码
废话不多说了,直接给大家贴代码了,具体代码如下所述: <!doctype html> <html> <head> <meta charset="utf-8"> <title>按钮启用和禁用</title> <script type="text/javascript"> function btn1() { document.getElementById("btn1"
-
JavaScript基于SVG的图片切换效果实例代码
最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解到没. -_-!!! 图片轮播见的太多,今天就用 SVG 写了一个图片轮播,效果如下. 效果要求 点击控制块,图片切换.切换的时候使用圆形做遮罩,由小到大变化.每次切换的时候,圆的位置随机产生. 主要知识点 1. SVG 的裁切(遮罩),clip-path 的运用. 2. SVG 利用 JS 更改层
-
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的 很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 turn.js 如何使用!!!!!!! 文章最后提供源码下载,结合源码看本文,turn.js更简单! 首先附上个人的文件路径 对于css 和 js文件不需要过多的解释 在这里要注意的是pages文件夹 这里个文件夹下放的是需要预览的图片文件
-
jQuery模拟实现天猫购物车动画效果实例代码
一.功能描述: 1.点击购买按钮,模拟抛物线将物品弹到购物车里: 2.购物车添加物品后,显示+1动画: 效果图如下: 实现如下: 1.导入jquery相关的包: <script type="text/javascript" src="jquery-2.1.1.min.js"></script> <script src="jquery.fly.min.js"></script> 2.html文件内容:
-
jQuery实现公告新闻自动滚屏效果实例代码
本文是小编参考网络上的一个小demo,自己做了下扩展,原来是向上滚动的,扩展了一个向下滚动的方法,具体实例代码如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滚屏实验</ti
-
Android 仿今日头条简单的刷新效果实例代码
点击按钮,先自动进行下拉刷新,也可以手动刷新,刷新完后,最后就多一行数据.有四个选项卡. 前两天导师要求做一个给本科学生预定机房座位的app,出发点来自这里.做着做着遇到很多问题,都解决了.这个效果感觉还不错,整理一下. MainActivity package com.example.fragmentmytest; import android.content.DialogInterface; import android.graphics.Color; import android.os.B
-
bootstrap实现点击删除按钮弹出确认框的实例代码
具体代码如下所示: <%@ page language="java" import="com.student.servlet.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page import="java.util.*" import="com.student.vo.User"%
-
vue框架制作购物车小球动画效果实例代码
最近在学习前端制作了一个购物车小球的动画效果 直接上图看看效果 下面介绍一下制作这个动画的详细过程: 1.因为使用vue锁业需要使用transition标签包裹 并指定动画三个动画生命周期函数 <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div class="ball" v-if=&quo
-
JavaScript实现简单的图片切换功能(实例代码)
代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片切换</title> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 300px; margin: 50px auto; padding: 20p
-
javascript单张多张图无缝滚动实例代码
我们会看到很多的网站上会使用多张图片无缝滚动的效果. 下面我就介绍几种纯JS实现多张图片的无缝滚动,并实现鼠标移到图片上运动停止的效果,可以控制图片左右滚动. 1.效果展示: <!DOCTYPE html> <html> <head> <title>无缝滚动</title> </head> <style type="text/css"> *{margin: 0;padding: 0;} #div1{po
随机推荐
- iOS实现去除html标签的方法汇总
- 密码哈希函数 Bcrypt的最大密码长度限制详解
- 非常棒的lcx写的非常规运行vbs
- Javascrp中几个常用的字符串验证
- 反序显示输入内容批处理
- 详解python实现读取邮件数据并下载附件的实例
- MVC4制作网站教程第四章 删除栏目4.4
- javascript判断css3动画结束 css3动画结束的回调函数
- php框架Phpbean说明
- Linux解压缩命令简介及解压缩命令使用
- Python open读写文件实现脚本
- MySQL实现差集(Minus)和交集(Intersect)测试报告
- jQuery使用之标记元素属性用法实例
- JS简单实现点击按钮或文字显示遮罩层的方法
- php表单提交问题的解决方法
- 基于JAVA中使用Axis发布/调用Webservice的方法详解
- Android开发笔记之Intent初级学习教程
- nodejs简单读写excel内容的方法示例
- 详解Spring Boot工程集成全局唯一ID生成器 UidGenerator的操作步骤
- jQuery实现表单动态添加与删除数据操作示例