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 相关文章推荐
javascript中的array数组使用技巧
Jan 31 Javascript
js中判断文本框是否为空的两种方法
Jul 31 Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
jquery选择器简述
Aug 31 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
iview table高度动态设置方法
Mar 14 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
node中使用shell脚本的方法步骤
Mar 23 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
UCenter 批量添加用户的php代码
2012/07/17 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
js实现继承的5种方式
2015/12/01 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
护士自荐信
2013/10/25 职场文书
团员个人的自我评价
2013/12/02 职场文书
专升本个人自我评价
2013/12/22 职场文书
我的大学生活职业生涯规划
2014/01/02 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
车辆工程专业求职信
2014/04/28 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
辞职信格式范文
2015/05/13 职场文书
政工师工作总结2015
2015/05/26 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
OpenCV实现反阈值二值化
2021/11/17 Java/Android
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫