JS實(shí)現(xiàn)一個(gè)按鈕的方法
更新時(shí)間：2015年02月05日 16:11:59 作者：magicfly9527
這篇文章主要介紹了JS實(shí)現(xiàn)一個(gè)按鈕的方法,實(shí)例分析了使用js實(shí)現(xiàn)一個(gè)按鈕的功能與相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)一個(gè)按鈕的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
<!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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JavaScript對(duì)象的淺拷貝與深拷貝實(shí)例分析
這篇文章主要介紹了JavaScript對(duì)象的淺拷貝與深拷貝,結(jié)合實(shí)例形式分析了javascript淺拷貝與深拷貝的原理、實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
Javascript 表格操作實(shí)現(xiàn)代碼
Javascript操作表格 包括獲取值，創(chuàng)建表格2009-06-06
這篇文章主要介紹了微信小程序的線程架構(gòu)，每個(gè)小程序包含一個(gè)描述整體程序的app實(shí)例和多個(gè)描述頁(yè)面的page，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
JavaScript定時(shí)器setTimeout()和setInterval()詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript定時(shí)器setTimeout()和setInterval()的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
js實(shí)現(xiàn)移動(dòng)端輪播圖滑動(dòng)切換
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)移動(dòng)端輪播圖滑動(dòng)切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
JavaScript實(shí)現(xiàn)數(shù)字前補(bǔ)“0”的五種方法示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)數(shù)字前補(bǔ)“0”的五種方法,結(jié)合具體實(shí)例形式分析了javascript數(shù)字前補(bǔ)0的相關(guān)操作技巧,涉及javascript字符串遍歷、迭代、截取、構(gòu)造等操作,需要的朋友可以參考下2019-01-01
JS實(shí)現(xiàn)仿雅虎首頁(yè)快捷登錄入口及導(dǎo)航模塊效果
這篇文章主要介紹了JS實(shí)現(xiàn)仿雅虎首頁(yè)快捷登錄入口及導(dǎo)航模塊效果,涉及JavaScript響應(yīng)鼠標(biāo)事件遍歷頁(yè)面元素的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
微信小程序tab左右滑動(dòng)切換功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序tab左右滑動(dòng)切換功能的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
這篇文章主要為大家詳細(xì)介紹了Bootstrap布局組件，感興趣的小伙伴們可以參考一下2016-07-07
javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊生成文字特效
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊生成文字特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12