JS实现一个按钮的方法
本文实例讲述了JS实现一个按钮的方法。分享给大家供大家参考。具体实现方法如下：
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="edge">
<script>
window.onload=function(){
varbtn=newBtn();
btn.init({width:300});
bindEvent(btn,'show',function(){
alert(1);
})
bindEvent(btn,'click',function(){
alert(2);
})
varoBtn=document.getElementById('btn');
oBtn.onclick=function(){
fireEvent(btn,'show');
}
}
functionBtn(){
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';
}
functionextend(obj1,obj2){
for(varattrinobj2){
obj1[attr]=obj2[attr];
}
}
functionbindEvent(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);
}
}
}
functionfireEvent(obj,events){
if(obj.listeners[events]){
for(variinobj.listeners[events]){
obj.listeners[events][i]();
}
}
}
</script>
</head>
<body>
<aid="btn"style="margin-top:40px;">12</a>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。