首页 > Web开发 > 详细

json传参应用

时间:2016-09-13 16:04:33      阅读:183      评论:0      收藏:0      [点我收藏+]

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()
    }
};

 

json传参应用

原文:http://www.cnblogs.com/xuxingeren/p/5868726.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!