JS实现一个按钮的方法


Posted in Javascript onFebruary 05, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
jQuery使用手册之 事件处理
Mar 24 Javascript
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
javascript 多级checkbox选择效果
Aug 20 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 Javascript
JS实现碰撞检测效果
Mar 12 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
JS继承用法实例分析
Feb 05 #Javascript
Javascript实现Web颜色值转换
Feb 05 #Javascript
JS表的模拟方法
Feb 05 #Javascript
JS的数组迭代方法
Feb 05 #Javascript
js实现照片墙功能实例
Feb 05 #Javascript
js实现仿百度瀑布流的方法
Feb 05 #Javascript
JS函数this的用法实例分析
Feb 05 #Javascript
You might like
无线电的诞生过程
2021/03/01 无线电
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
javascript GUID生成器实现代码
2009/10/31 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
python利用tkinter实现屏保
2019/07/30 Python
Django实现文件上传和下载功能
2019/10/06 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
环保建议书
2014/03/12 职场文书
护士自我鉴定总结
2014/03/24 职场文书
授权委托书样本
2014/04/03 职场文书
政工例会汇报材料
2014/08/26 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
2014年加油站工作总结
2014/12/04 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL