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"; |
![](https://images2018.cnblogs.com/blog/1336496/201803/1336496-20180316150407575-558377170.png)
您的资助是我最大的动力!
金额随意,欢迎来赏!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步