javascript实现点击后变换按钮显示文字的方法

本文实例讲述了javascript实现点击后变换按钮显示文字的方法。分享给大家供大家参考。具体实现方法如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>显示一些按钮，如果点击了，
 当前点击的按钮文本变为“点了”，其他按钮文本变为“没点”</title>
 <script type="text/javascript">
 //为所有按钮动态添加事件
 function IniButtonEvent() {
  var Items = document.getElementsByTagName("input");
  for (var i = 0; i < Items.length; i++) {
  var objTmp = Items[i];
  if (objTmp.type == "button") {
   objTmp.onclick = ButtonClick;
  }
  }
 }
 function ButtonClick() {
  var Items = document.getElementsByTagName("input");
  for (var i = 0; i < Items.length; i++) {
  var objTmp = Items[i];
  if (objTmp.type == "button") {
  //判断是否是按钮
   //window.event.srcElement触发当前事件的元素
   //用来判断是否是当前单击的按钮
   if (objTmp == window.event.srcElement) {
   objTmp.value = "点了";
   }
   else {
   objTmp.value = "没点";
   }
  }
  }
 }
 </script>
</head>
<body onload="IniButtonEvent()">
显示一些按钮，如果点击了，当前点击的按钮文本变为“点了”，
其他按钮文本变为“没点”<br />
 <input type="button" value="没点" />
 <input type="button" value="没点" />
 <input type="button" value="没点" />
 <input type="button" value="没点" />
 <input type="button" value="没点" />
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • Javascript 实现复制（Copy）动作方法大全

    一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function copyUrl2() { var Url2=document.getElementById("biao1"); Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好,可贴粘."); } <

  • JavaScript实现自动消除按钮功能的方法

    JavaScript实现自动消除按钮功能的方法

    本文实例讲述了JavaScript实现自动消除按钮功能的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript自动消除前项显示的内容,在网页特定方位显示内容,第一个按钮可用,但第二个在第一个点击之后就不能用了,如果想让第二个按钮起作用,你需要对其进行功能消除,如本示例代码就实现这样一种功能. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

  • JavaScript获取按钮所在form表单id的方法

    本文实例讲述了JavaScript获取按钮所在form表单id的方法.分享给大家供大家参考.具体如下: 这里使用javascript获取form表单按钮的id,可以通过下面的JS代码获取. <!DOCTYPE html> <html> <body> <h1>www.sharejs.com</h1> <form id="form1"> <button id="button1" type=&q

  • JavaScript实现给按钮加上双重动作的方法

    JavaScript实现给按钮加上双重动作的方法

    本文实例讲述了JavaScript实现给按钮加上双重动作的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript给网页上按钮加入同时加入两个动作,一个是在文本框显示文字,另一个则是转向到某个网址,以往的按钮跳转都是单一的,这一个又在跳转时加入了将文字赋值给文本框的动作,搞懂了原理,就可以灵活运用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-button-two-action-codes/ 具体代码如下: <title>

  • javascript实现表单提交后，提交按钮不可用的方法

    本文实例讲述了javascript实现表单提交后,提交按钮不可用的方法.分享给大家供大家参考.具体如下: 这里使用javascript控制表单提交后,提交按钮不可用,可以防止用户多次提交. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>表单提交后按钮禁用</title> &l

  • JavaScript给按钮绑定点击事件（onclick）的方法

    本文实例讲述了JavaScript给按钮绑定点击事件(onclick)的方法.分享给大家供大家参考.具体分析如下: 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!DOCTYPE html> <html> <head> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script

  • JavaScript实现点击单选按钮改变输入框中文本域内容的方法

    JavaScript实现点击单选按钮改变输入框中文本域内容的方法

    本文实例讲述了JavaScript实现点击单选按钮改变输入框中文本域内容的方法.分享给大家供大家参考.具体如下: 这里实现点击单选按钮改变输入框中文本域内容的方法,是一个JavaScript 的简单应用,可以减少用户的输入,提升用户操作易用性,它类似一个TAB选项卡一样的功能,并可以完成后提交表单,值得学习. 运行效果截图如下: 具体代码如下: <html> <head> <title>JavaScript点击单选框改变输入框内容</title> </

  • javascript实现点击提交按钮后显示loading的方法

    本文实例讲述了javascript实现点击提交按钮后显示loading的方法.分享给大家供大家参考.具体如下: 这里可以实现点击提交按钮后显示loading,防止用户重复提交 <style> #loading { position:absolute; width:500px; height:50px; top:50%; left:50%; margin: -25px -150px; background-color:#FFFFFF; border:1px solid #CCCCCC; text

  • javascript实现点击单选按钮链接转向对应网址的方法

    javascript实现点击单选按钮链接转向对应网址的方法

    本文实例讲述了javascript实现点击单选按钮链接转向对应网址的方法.分享给大家供大家参考.具体如下: 这里实现一个按钮特效,当点击复选择框按钮的时候,激活链接,跳转到某网址,这里主要是由onClick派生出来的一些功能,然后配合函数你可以编写出更多的按钮特效来. 运行效果截图如下: 具体代码如下: <html> <head> <title>点击文本框激活链接转向某网址</title> <SCRIPT> function go(loc) {

  • javascript实现点击后变换按钮显示文字的方法

    本文实例讲述了javascript实现点击后变换按钮显示文字的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>显示一些按钮,如果点击了, 当前点击的按钮文本变为"点了",其他按钮文本变为"没点"</title> <script type="text/javascript

  • JavaScript实现定时隐藏与显示图片的方法

    JavaScript实现定时隐藏与显示图片的方法

    本文实例讲述了JavaScript实现定时隐藏与显示图片的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现定时隐藏与显示图片,设定图片在几秒后会自动显示,也会自动隐藏,秒数这个自己去定义吧,在JavaScript代码片段内. 运行效果如下图所示: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/lo

  • JavaScript实现在标题栏上显示当前日期的方法

    本文实例讲述了JavaScript实现在标题栏上显示当前日期的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <script language="JavaScript"> <!-- function writeIt() { // getDate var now = new Date(); var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday'

  • layui实现根据table数据判断按钮显示情况的方法

    就可以根据table的数据实现判断toolbar按钮的显示状态和情况 实例如下所示: <script type="text/html" id="barDemo"> {{# if(d.status ==0){ }} <a class="layui-btn layui-btn-mini" lay-event="examine">查看</a> <a class="layui-btn

  • JavaScript获取页面上被选中文字的方法技巧

    JavaScript获取页面上被选中文字的方法技巧

    这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: 复制代码 代码如下: event.selection = window.getSelection(); 这里的selection实际上是个对象,但如果我们使用 .toString()或强行转化成字符串,我们将得到被选中的文字. 复制代码 代码如下: $(document).ready(function () {    $(".contenttext").mouseup

  • JS/jQuery实现默认显示部分文字点击按钮显示全部内容

    复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>JS实现默认显示部分文字,点击按钮显示全部</title> </head> <body> <div id="box"> <h2>民间机构提前3天预报大理地震 地震局称违法</h2> <p&g

  • JS简单实现点击按钮或文字显示遮罩层的方法

    JS简单实现点击按钮或文字显示遮罩层的方法

    本文实例讲述了JS简单实现点击按钮或文字显示遮罩层的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>点击文字弹出一个DIV层窗口代码</title> <meta charset="urf-8"/> &l

  • JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)

    新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了.写出了总结下 使用的方法:clipboard 插件下载地址:https://github.com/zenorocha/clipboard.js/tree/master 引入插件:目录\clipboard.js-master\dist\clipboard.min.js 目录中有各种demo,分别实现了固定的文字复制,input的复制等等,可以看下找找思路: 下边来记录下使用的方式: 一:引入插件: <script src=&quo

  • javascript实现鼠标移到Image上方时显示文字效果的方法

    javascript实现鼠标移到Image上方时显示文字效果的方法

    本文实例讲述了javascript实现鼠标移到Image上方时显示文字效果的方法.分享给大家供大家参考.具体如下: 先看一下运行效果截图: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w

随机推荐