json传参应用

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成。

下面做一个最简单的弹窗小插件,通过用json参数改变弹窗的样式。

HTML:

  1. <button id="open">打开</button>
  2. <button id="close">关闭</button>
  3. <div id="box"></div>

JS:

  1. function Alert(json){
  2. this.win=document.getElementById('box');
  3. this.w=json.width||200; //如果参数为'',就显示200.
  4. this.h=json.height||150;
  5. this.content=json.content||'box';
  6. this.win.style.height=this.h+'px';
  7. this.win.style.width=this.w+'px';
  8. this.win.innerText=this.content;
  9. this.win.style.background=json.background||'black';
  10. this.win.style.color=json.color||'white';
  11. }
  12. Alert.prototype.open=function(){//对象原型,open打开close关闭
  13. this.win.style.display='block';
  14. }
  15. Alert.prototype.close=function(){
  16. this.win.style.display='none';
  17. }

调用JS:

  1. window.onload=function(){
  2. var Open=document.getElementById('open');
  3. var Close=document.getElementById('close');
  4. var box=new Alert({
  5. height:100,
  6. width:100,
  7. content:'弹窗',
  8. background:'red',
  9. color:'blue'
  10. });
  11. Open.onclick=function(){
  12. box.open();
  13. };
  14. Close.onclick=function(){
  15. box.close()
  16. }
  17. };

json传参应用的更多相关文章

  1. ASP.NET WebAPI RC 竟然不支持最常用的json传参

    壮士断腕(WCF Web API),为的是 ASP.NET Web API 的横空出世,再加上它的开放(开源),于是对之产生了一点点痴情,并写下了HttpClient + ASP.NET Web AP ...

  2. SpringBoot 处理 POST Json 传参枚举

    在 Spring 框架中对枚举类型的序列化/反序列化是有限制的. 假设如下面这样在某些情况下就不能正常工作: 123456789 public enum PayChannelEnum implemen ...

  3. HttpClient调用doGet、doPost、JSON传参及获得返回值

    调用 doPost:map传参 Map<String,Object> map = new HashMap<>(); map.put("test"," ...

  4. json传参 js前端和java后端 的简单例子

    下面讲解了从前端js对象-->json字符串-->java字符串---->java map的过程 1,初始化js对象 var param = {}; param.krel = kre ...

  5. 关于SQL Server 2017中使用json传参时解析遇到的多层解析问题

    开发新的系统,DB部分使用了SQL Server从2016版开始自带的Json解析方式. 用了快半年,在个人项目,以及公司部分项目上使用了,暂时还没遇到大的问题,和性能问题. 今天在解析Json的多级 ...

  6. JSON传参

    通过javascript将数据组织成json格式,然后传到java后台. 注意:前台json数组传参到后台时候需要将对象(json或json数组)转换成字符串(字符串数组). Simple: 1.前台 ...

  7. json传参报错

    restful接口报错: com.fasterxml.jackson.core.JsonParseException: Unexpected character ('e' (code 101)): w ...

  8. jquery 巧用json传参

    JavaScript代码,巧用JSON传参数function AddComment(content) { var comment = {}; comment.threadId = $("#s ...

  9. Android与JS交互,json传参问题

    一.JS调用Android的方法 JS调用安卓的方法,并且传递的参数为json格式的字符串(JSONObject.toString()), 例如: var json = {"name&quo ...

随机推荐

  1. code md5

    using System; using System.Collections.Generic; using System.Linq; using System.Security.Cryptograph ...

  2. 织梦CMS站点favicon.ico图标的放置

    1.在线制作一个ico图标,推荐制作网站:http://ico.55.la/.制作好后,将favicon.ico图标放在站点模板默认目录下的images文件夹里. 2.在index.htm的<h ...

  3. .NET 验证码/验证图片

    /// <summary> /// 验证码类 /// </summary> public class Rand { #region 生成随机数字 /// <summary ...

  4. 手机端的各种默认样式比如 ios的按钮变灰色

    1.ios按钮变灰色,给按钮加样式: -webkit-appearance: none; 2.有圆角话 ; } 3.去除Chrome等浏览器文本框默认发光边框 input:focus, textare ...

  5. linux nandflash驱动之MTD层

    MTD,Memory Technology Device即内存技术设备,在Linux内核中,引入MTD层为NOR FLASH和NAND FLASH设备提供统一接口.MTD将文件系统与底层FLASH存储 ...

  6. freemarker中使用shiro标签

    地址:https://github.com/jagregory/shiro-freemarker-tags下载该jar包 或者源代码文件复制到自己工程的lib下或者package中  如果使用spri ...

  7. mysql触发器查看

    查询触发器列表 SHOW TRIGGERS; 但是这个无法查询到没有权限的触发器,可以试试这个 select * from sym_trigger where source_table_name li ...

  8. (easy)LeetCode 258.Add Digits

    Given a non-negative integer num, repeatedly add all its digits until the result has only one digit. ...

  9. java类的高级特性

    1.非内部类不能被声明为private 或protected访问类型.

  10. java使用jacob将office转pdf

    1.此处代码是把office文档转换成pdf的工具类,在BS架构的产品中,我们可以使用基于JS的pdf插件显示pdf文档,但是前提IE需要按照adobe的pdf软件,对于非IE不用安装.2.可以基于f ...