JS实现一个按钮的方法

本文实例讲述了JS实现一个按钮的方法。分享给大家供大家参考。具体实现方法如下：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="edge">
    <script>
    window.onload = function(){
      var btn = new Btn();
      btn.init({width:300});
      bindEvent(btn,'show',function(){
        alert(1);
      })
      bindEvent(btn,'click',function(){
        alert(2);
      })
      var oBtn = document.getElementById('btn');
      oBtn.onclick = function (){
        fireEvent(btn,'show');
      }
    }
      function Btn(){
        this.btn= null;
        this.settings = {
          width:200,
          height:40,
          borderRadius:6,
          text :'按钮'
        };
      }
      Btn.prototype.init = function (opt){ 

        extend(this.settings,opt);
        this.creat();
      }
      Btn.prototype.creat = function (){
        this.btn =document.createElement('div'); 

        document.body.appendChild(this.btn);
        this.btn.innerHTML = this.settings.text;
        this.setData();
      }
      Btn.prototype.destory = function (){
        document.body.removeChild(this.btn);
      }
      Btn.prototype.setData = function (){
        this.btn.style.width = this.settings.width +'px';
        this.btn.style.height = this.settings.height +'px';
        this.btn.style.border ='solid #f00 '+ this.settings.borderRadius +'px'; 

      }
    function extend(obj1,obj2){
      for(var attr in obj2){
        obj1[attr] = obj2[attr];
      }
    }
    function bindEvent(obj,events,fn){
      obj.listeners = obj.listeners || {};
      obj.listeners[events] = obj.listeners[events] || [];
      obj.listeners[events].push( fn );
      if(obj.nodeType){
        if(obj.addEventListener){
          obj.addEventListener(events,fn,false);
        }else{
          obj.attachEvent('on'+events,fn);
        }
      }
    }
    function fireEvent (obj,events){
      if(obj.listeners[events]){
        for(var i in obj.listeners[events]){
          obj.listeners[events][i]();
        }
      }
    }
    </script>
  </head>
  <body>
  <a id="btn" style="margin-top: 40px;" >12</a>
  </body>
</html>

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

赞 (0)

相关推荐

  • js使用DOM设置单选按钮、复选框及下拉菜单的方法

    本文实例讲述了js使用DOM设置单选按钮.复选框及下拉菜单的方法.分享给大家供大家参考.具体实现方法如下: 1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为ture时,其它的都变为false. 先贴上一个例子: 复制代码 代码如下: <script type="text/javascript">     function ge

  • 控制页面按钮在后台执行期间不重复提交的JS方法

    在ASP.NET中,如果在点了一个按钮,提交到后台执行期间,再点一次按钮,会出现两种情况,一种是执行了两次后台代码,另一种是等待前一次的提交动作执行完后再次执行提交动作,无论是哪一种,都是跑了两遍后台代码,这是很多情况下不希望出现的.以下代码在 IE.傲游极速模式下测试通过. 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs"

  • js和jquery使按钮失效为不可用状态的方法

    设置disabled属性为true即为不可用状态. JS: 复制代码 代码如下: document.getElementByIdx("btn").disabled=true; jquery 复制代码 代码如下: $("#btn").attr("disabled", true); html: 复制代码 代码如下: <input type="button" value="提交" id="btn&

  • js实现按钮加背景图片常用方法

    本文实例讲述了js实现按钮加背景图片常用方法.分享给大家供大家参考.具体实现方法如下: 方法一: 复制代码 代码如下: <input type="submit" onMouseOver="style=background:url('imgs/jb51.gif')"/> 方法二: 复制代码 代码如下: <input type="button" value="提交" style="background:

  • Extjs grid添加一个图片状态或者按钮的方法

    extjs的grid中我们经常需要添加一个图片状态或者按钮,总结一下自己用过的方法: 一.状态表示: 复制代码 代码如下: renderer:function(value){ if(value==0){ return "<img src='images/icons/cancel.png'>"; }else if(value==1){ return "<img src='images/icons/accept.png'>"; } return

  • js 获取input点选按钮的值的方法

    html: 复制代码 代码如下: <input type= "radio" name="isEnd" value='1'>是 <input type= "radio" name="isEnd" value='0' checked=checked>否 <script type="text/javascript"> var isEnd; function getRadioVa

  • JS实现一个按钮的方法

    本文实例讲述了JS实现一个按钮的方法.分享给大家供大家参考.具体实现方法如下: <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="edge"> <script> window.onload = function(){ var btn

  • js控制一个按钮是否可点击(可使用)disabled的实例

    实例如下: /*** * 设置按钮是否可点击 */ function abledDownloadBtn(flag) { var $exportChartBtn = $("#exportChartBtn"); flag ? $exportChartBtn.removeAttr("disabled") : $exportChartBtn.attr("disabled", "disabled"); } 以上这篇js控制一个按钮是否可

  • 使用Node.js写一个代码生成器的方法步骤

    使用Node.js写一个代码生成器的方法步骤

     背景 第一次接触代码生成器用的是动软代码生成器,数据库设计好之后,一键生成后端 curd代码.之后也用过 CodeSmith , T4.目前市面上也有很多优秀的代码生成器,而且大部分都提供可视化界面操作. 自己写一个的原因是因为要集成到自己写的一个小工具中,而且使用 Node.js 这种动态脚本语言进行编写更加灵活. 原理 代码生成器的原理就是: 数据 + 模板 => 文件 . 数据 一般为数据库的表字段结构. 模板 的语法与使用的模板引擎有关. 使用模板引擎将 数据 和 模板 进行编译,编译

  • JS实现在网页中弹出一个输入框的方法

    本文实例讲述了JS实现在网页中弹出一个输入框的方法.分享给大家供大家参考.具体分析如下: 习惯了使用早期给电脑文件夹设置密码的朋友一定还记得那种弹出一个输入框,然后让你输入密码在登录查看的效果吧,这个JS代码就是实现这个在当前页面中弹出一个输入框,当然你可以输入任何东西 <html> <head> <title>js输入对话框</title> </head> <body> <script language="javas

  • js实现(全选)多选按钮的方法【附实例】

    js实现(全选)多选按钮的方法【附实例】

    第一种,全部选中: <html> <head> <title>复选框checked属性</title> <script language="JavaScript" type="text/javascript"> function changeState(isChecked) { var chk_list=document.getElementsByTagName("input"); fo

  • yii form 表单提交之前JS在提交按钮的验证方法

    很多时候,需要对Yii表单model中的对象设置的rules进行判断,但是有的时候可能需要在提交之前就在客户端进行验证,我这边设置的方法是在提交按钮上设置监听器,如果部分内容为空(比如多选按钮没有选择),那么提示出错信息.主要目的是页面不用提交后刷新,进入controller的对应函数之后再判断出错.显示rules()验证规则函数的错误信息. 这里为了验证是否选择某个单选按钮,对提交的按钮onclick设置监听,具体如下 <Button onclick = "return fun()&qu

  • js判断一个字符串是否包含一个子串的方法

    本文实例讲述了js判断一个字符串是否包含一个子串的方法.分享给大家供大家参考.具体如下: 在我们前端日常开发中,经常会遇到判断一个字符串中是否包含某个子串,这里我们将去探究一些解决此种需求的方法以及正确的使用它们.理想情况下,我们要找的是一个能匹配我们的目的(if x contains y)的方法,并返回true或false. 一.String.prototype.indexOf和String.prototype.lastIndexOf 这两个方法,可能是我们最容易想到的,如果包含子串,则返回大

  • JS去掉字符串末尾的标点符号及删除最后一个字符的方法

    需求:去掉js字符串末尾的标点符号 原字符串: Hello World! 目标字符串: Hello World 方式一: stringObject.slice(start,end) start : 要抽取的片断的起始下标.如果是负数,则该参数规定的是从字符串的尾部开始算起的位置.也就是说,-1 指字符串的最后一个字符 end:要抽取的片段的结尾的下标.若未指定此参数,则要提取的子串包括 start 到原字符串结尾的字符串.如果该参数是负数,那么它规定的是从字符串的尾部开始算起的位置 var st

  • JS获取一个未知DIV高度的方法

    本文实例讲述了JS获取一个未知DIV高度的方法.分享给大家供大家参考,具体如下: 通过元素的clientHeight属性能够得到元素的高度,如: var height = element.clientHeight; 这种做法的局限: 1. 如果元素的display属性设置为none, 那么得到的结果为0 2. 在safari浏览器中,需要使用:element.offsetHeight得到实际高度,这是safari浏览器的bug 下面是Prototype提供的方法,能够兼容各种浏览器,同时在元素隐

  • VC实现给窗体的一个按钮添加事件的方法

    本文实例讲述了VC实现给窗体的一个按钮添加事件的方法.分享给大家供大家参考.具体实现方法如下: 1. 在MainFrm.h中 复制代码 代码如下: // Generated message map functions 添加: 复制代码 代码如下: afx_msg void OnSelectRed(); //声明事件名称 2. MainFrm.cpp中 复制代码 代码如下: BEGIN_MESSAGE_MAP(CMainFrame, CFrameWnd) 下面 添加: 复制代码 代码如下: ON_

随机推荐