json传参应用
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成。
下面做一个最简单的弹窗小插件,通过用json参数改变弹窗的样式。
HTML:
<button id="open">打开</button>
<button id="close">关闭</button>
<div id="box"></div>
JS:
function Alert(json){
this.win=document.getElementById('box');
this.w=json.width||200; //如果参数为'',就显示200.
this.h=json.height||150;
this.content=json.content||'box';
this.win.style.height=this.h+'px';
this.win.style.width=this.w+'px';
this.win.innerText=this.content;
this.win.style.background=json.background||'black';
this.win.style.color=json.color||'white';
}
Alert.prototype.open=function(){//对象原型,open打开close关闭
this.win.style.display='block';
}
Alert.prototype.close=function(){
this.win.style.display='none';
}
调用JS:
window.onload=function(){
var Open=document.getElementById('open');
var Close=document.getElementById('close');
var box=new Alert({
height:100,
width:100,
content:'弹窗',
background:'red',
color:'blue'
});
Open.onclick=function(){
box.open();
};
Close.onclick=function(){
box.close()
}
};