JS json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<br><script type="text/javascript" src="../json/differ.json"></script>
 
<script type="text/javascript">
    window.onload = function () {
         
        var cont = document.getElementById("content");
        var inner = "";
        for (var i = 0; i < list.length; i++) {
            inner += "<div style='margin: 0 auto; width: 80%; height: 120px; color:#979797; background-color:#FFFFFF;text-align:center'><div style='width:30%;height:80%;float:left;padding-top:24px '><font size='4' color='#333'>" + list[i].DifferType + "</font><br>合同件:" + list[i].LeftText + "<br>扫描件:" + list[i].RightText + "</div><div style='width: 70%; float:right; height: 80%; padding-top:24px'><font size='4' color='#333'>细节截图:</font><br /><img width='500' height='10' src='" + list[i].LeftPicPath + "'/><br><img width='500' height='10' src='" + list[i].RightPicPath + "'/></div></div><br>";
        }
        cont.innerHTML += inner;
    }
</script>
 
<div id="content">
</div>

  model.html with   JS's code:↑  

json's code:↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
list=[
  {
    "PageNo":1,
    "DifferType":"编辑",
    "LeftText":"1",
    "RightText":"2",
    "LeftPicPath":"../pic/0.1.jpg",
    "RightPicPath":"../pic/0.2.jpg"
  },
  {
    "PageNo":1,
    "DifferType":"删除",
    "LeftText":"]",
    "RightText":"无",
    "LeftPicPath":"../pic/1.1.jpg",
    "RightPicPath":"../pic/1.2.jpg"
  }
]

  json是由字符串“list=” + 一个class结构转json字符串的结果。

这样在加载mode.html时,会自动去路径寻找json文件。

 

其中:window.onload=function(){}

1
2
3
4
5
<script type="text/javascript">
window.onload=function(){
  document.getElementById("bg").style.backgroundColor="#F90";
}
</script>

  

网页中的某些JavaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免类似情况的发生,可以使用以下两种方式:

(1).将脚本代码放在网页的底端,运行脚本代码的时候,可以确保要操作的对象已经加载完成。

(2).通过window.onload来执行脚本代码。

 

下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "Hello World":

1
document.getElementById("demo").innerHTML="Hello World";

  

 

posted @   呼噜喵喵  阅读(214)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示