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实现合并多个数组示例
Sep 21 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
微信小程序日历组件使用方法详解
Dec 29 Javascript
vue实现路由切换改变title功能
May 28 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
vue 实现把路由单独分离出来
Aug 13 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
php写入数据到CSV文件的方法
2015/03/14 PHP
php查询操作实现投票功能
2016/05/09 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
python基础教程之类class定义使用方法
2014/02/20 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
python实现媒体播放器功能
2018/02/11 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
python框架flask表单实现详解
2019/11/04 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
医院门卫岗位职责
2013/12/30 职场文书
公司总经理岗位职责
2014/03/15 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
个人公开承诺书
2014/03/28 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
财务会计岗位职责
2015/02/03 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL