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 相关文章推荐
IE 当eval遇上function的处理
Aug 09 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 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
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
为Python的web框架编写前端模版的教程
2015/04/30 Python
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
python3爬取各类天气信息
2018/02/24 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
优秀村官事迹材料
2014/01/10 职场文书
西岭雪山导游词
2015/02/06 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android