json

最新推荐文章于 2024-06-20 21:03:03 发布
最新推荐文章于 2024-06-20 21:03:03 发布
阅读量217 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zoekitty/article/details/52234264
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>

<!--
    city  -> 插入option 中
    div 中{

        date_y -- 》h1
        p 中{
            week
            temp1
            weather1
            wind1
            index
        }
    }
 点击option时，切换div 不同城市的天气信息

-->
<body>
<div id="box">
    <select name="" id="sel">
        <option value="-1">-请选择-</option>
    </select>
</div>
</body>
<script type="text/javascript">




        var jsonDat = {
            "weatherinfo": [
                {
                    "city": "杭州",
                    "city_en": "hangzhou",
                    "date_y": "2013年11月4日",
                    "date": "",
                    "week": "星期一",
                    "fchh": "08",
                    "cityid": "101210101",
                    "temp1": "21℃~13℃",
                    "temp2": "21℃~13℃",
                    "temp3": "23℃~14℃",
                    "temp4": "23℃~17℃",
                    "temp5": "25℃~17℃",
                    "temp6": "27℃~14℃",
                    "tempF1": "69.8℉~55.4℉",
                    "tempF2": "69.8℉~55.4℉",
                    "tempF3": "73.4℉~57.2℉",
                    "tempF4": "73.4℉~62.6℉",
                    "tempF5": "77℉~62.6℉",
                    "tempF6": "80.6℉~57.2℉",
                    "weather1": "多云",
                    "weather2": "多云",
                    "weather3": "多云",
                    "weather4": "多云",
                    "weather5": "多云转阴",
                    "weather6": "阴转小雨",
                    "img1": "1",
                    "img2": "99",
                    "img3": "1",
                    "img4": "99",
                    "img5": "1",
                    "img6": "99",
                    "img7": "1",
                    "img8": "99",
                    "img9": "1",
                    "img10": "2",
                    "img11": "2",
                    "img12": "7",
                    "img_single": "1",
                    "img_title1": "多云",
                    "img_title2": "多云",
                    "img_title3": "多云",
                    "img_title4": "多云",
                    "img_title5": "多云",
                    "img_title6": "多云",
                    "img_title7": "多云",
                    "img_title8": "多云",
                    "img_title9": "多云",
                    "img_title10": "阴",
                    "img_title11": "阴",
                    "img_title12": "小雨",
                    "img_title_single": "多云",
                    "wind1": "北风小于5级",
                    "wind2": "东风小于3级",
                    "wind3": "北风小于3级",
                    "wind4": "东风小于3级",
                    "wind5": "东南风小于3级",
                    "wind6": "西北风小于3级",
                    "fx1": "北风",
                    "fx2": "北风",
                    "fl1": "小于3级",
                    "fl2": "小于3级",
                    "fl3": "小于3级",
                    "fl4": "小于3级",
                    "fl5": "小于3级",
                    "fl6": "小于3级",
                    "index": "较舒适",
                    "index_d": "建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物，宜着夹克衫、薄毛衣等。",
                    "index48": "较舒适",
                    "index48_d": "建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物，宜着夹克衫、薄毛衣等。",
                    "index_uv": "弱",
                    "index48_uv": "弱",
                    "index_xc": "适宜",
                    "index_tr": "适宜",
                    "index_co": "舒适",
                    "st1": "21",
                    "st2": "13",
                    "st3": "21",
                    "st4": "13",
                    "st5": "23",
                    "st6": "14",
                    "index_cl": "适宜",
                    "index_ls": "适宜",
                    "index_ag": "极不易发"
                },
                {
                    "city": "北京",
                    "city_en": "beijing",
                    "date_y": "2014年11月4日",
                    "date": "",
                    "week": "星期二",
                    "fchh": "08",
                    "cityid": "101210101",
                    "temp1": "21℃~33℃",
                    "temp2": "21℃~13℃",
                    "temp3": "23℃~14℃",
                    "temp4": "23℃~17℃",
                    "temp5": "25℃~17℃",
                    "temp6": "27℃~14℃",
                    "tempF1": "69.8℉~55.4℉",
                    "tempF2": "69.8℉~55.4℉",
                    "tempF3": "73.4℉~57.2℉",
                    "tempF4": "73.4℉~62.6℉",
                    "tempF5": "77℉~62.6℉",
                    "tempF6": "80.6℉~57.2℉",
                    "weather1": "多云转阴",
                    "weather2": "多云",
                    "weather3": "多云",
                    "weather4": "多云",
                    "weather5": "多云转阴",
                    "weather6": "阴转小雨",
                    "img1": "1",
                    "img2": "99",
                    "img3": "1",
                    "img4": "99",
                    "img5": "1",
                    "img6": "99",
                    "img7": "1",
                    "img8": "99",
                    "img9": "1",
                    "img10": "2",
                    "img11": "2",
                    "img12": "7",
                    "img_single": "1",
                    "img_title1": "多云",
                    "img_title2": "多云",
                    "img_title3": "多云",
                    "img_title4": "多云",
                    "img_title5": "多云",
                    "img_title6": "多云",
                    "img_title7": "多云",
                    "img_title8": "多云",
                    "img_title9": "多云",
                    "img_title10": "阴",
                    "img_title11": "阴",
                    "img_title12": "小雨",
                    "img_title_single": "多云",
                    "wind1": "北风小于6级",
                    "wind2": "东风小于3级",
                    "wind3": "北风小于3级",
                    "wind4": "东风小于3级",
                    "wind5": "东南风小于3级",
                    "wind6": "西北风小于3级",
                    "fx1": "北风",
                    "fx2": "北风",
                    "fl1": "小于3级",
                    "fl2": "小于3级",
                    "fl3": "小于3级",
                    "fl4": "小于3级",
                    "fl5": "小于3级",
                    "fl6": "小于3级",
                    "index": "较舒适",
                    "index_d": "建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物，宜着夹克衫、薄毛衣等。",
                    "index48": "较舒适",
                    "index48_d": "建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物，宜着夹克衫、薄毛衣等。",
                    "index_uv": "弱",
                    "index48_uv": "弱",
                    "index_xc": "适宜",
                    "index_tr": "适宜",
                    "index_co": "舒适",
                    "st1": "21",
                    "st2": "13",
                    "st3": "21",
                    "st4": "13",
                    "st5": "23",
                    "st6": "14",
                    "index_cl": "适宜",
                    "index_ls": "适宜",
                    "index_ag": "极不易发"
                },
                {
                    "city": "上海",
                    "city_en": "shanghai",
                    "date_y": "2015年11月4日",
                    "date": "",
                    "week": "星期三",
                    "fchh": "08",
                    "cityid": "101210101",
                    "temp1": "31℃~43℃",
                    "temp2": "21℃~13℃",
                    "temp3": "23℃~14℃",
                    "temp4": "23℃~17℃",
                    "temp5": "25℃~17℃",
                    "temp6": "27℃~14℃",
                    "tempF1": "69.8℉~55.4℉",
                    "tempF2": "69.8℉~55.4℉",
                    "tempF3": "73.4℉~57.2℉",
                    "tempF4": "73.4℉~62.6℉",
                    "tempF5": "77℉~62.6℉",
                    "tempF6": "80.6℉~57.2℉",
                    "weather1": "多云",
                    "weather2": "多云",
                    "weather3": "多云",
                    "weather4": "多云",
                    "weather5": "多云转阴",
                    "weather6": "阴转小雨",
                    "img1": "1",
                    "img2": "99",
                    "img3": "1",
                    "img4": "99",
                    "img5": "1",
                    "img6": "99",
                    "img7": "1",
                    "img8": "99",
                    "img9": "1",
                    "img10": "2",
                    "img11": "2",
                    "img12": "7",
                    "img_single": "1",
                    "img_title1": "多云",
                    "img_title2": "多云",
                    "img_title3": "多云",
                    "img_title4": "多云",
                    "img_title5": "多云",
                    "img_title6": "多云",
                    "img_title7": "多云",
                    "img_title8": "多云",
                    "img_title9": "多云",
                    "img_title10": "阴",
                    "img_title11": "阴",
                    "img_title12": "小雨",
                    "img_title_single": "多云",
                    "wind1": "北风小于8级",
                    "wind2": "东风小于3级",
                    "wind3": "北风小于3级",
                    "wind4": "东风小于3级",
                    "wind5": "东南风小于3级",
                    "wind6": "西北风小于3级",
                    "fx1": "北风",
                    "fx2": "北风",
                    "fl1": "小于3级",
                    "fl2": "小于3级",
                    "fl3": "小于3级",
                    "fl4": "小于3级",
                    "fl5": "小于3级",
                    "fl6": "小于3级",
                    "index": "较舒适",
                    "index_d": "建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物，宜着夹克衫、薄毛衣等。",
                    "index48": "较舒适",
                    "index48_d": "建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物，宜着夹克衫、薄毛衣等。",
                    "index_uv": "弱",
                    "index48_uv": "弱",
                    "index_xc": "适宜",
                    "index_tr": "适宜",
                    "index_co": "舒适",
                    "st1": "21",
                    "st2": "13",
                    "st3": "21",
                    "st4": "13",
                    "st5": "23",
                    "st6": "14",
                    "index_cl": "适宜",
                    "index_ls": "适宜",
                    "index_ag": "极不易发"
                },
                {
                    "city": "深圳",
                    "city_en": "shenzhen",
                    "date_y": "2016年11月4日",
                    "date": "",
                    "week": "星期四",
                    "fchh": "08",
                    "cityid": "101210101",
                    "temp1": "121℃~131℃",
                    "temp2": "21℃~13℃",
                    "temp3": "23℃~14℃",
                    "temp4": "23℃~17℃",
                    "temp5": "25℃~17℃",
                    "temp6": "27℃~14℃",
                    "tempF1": "69.8℉~55.4℉",
                    "tempF2": "69.8℉~55.4℉",
                    "tempF3": "73.4℉~57.2℉",
                    "tempF4": "73.4℉~62.6℉",
                    "tempF5": "77℉~62.6℉",
                    "tempF6": "80.6℉~57.2℉",
                    "weather1": "阴转小雨",
                    "weather2": "多云",
                    "weather3": "多云",
                    "weather4": "多云",
                    "weather5": "多云转阴",
                    "weather6": "阴转小雨",
                    "img1": "1",
                    "img2": "99",
                    "img3": "1",
                    "img4": "99",
                    "img5": "1",
                    "img6": "99",
                    "img7": "1",
                    "img8": "99",
                    "img9": "1",
                    "img10": "2",
                    "img11": "2",
                    "img12": "7",
                    "img_single": "1",
                    "img_title1": "多云",
                    "img_title2": "多云",
                    "img_title3": "多云",
                    "img_title4": "多云",
                    "img_title5": "多云",
                    "img_title6": "多云",
                    "img_title7": "多云",
                    "img_title8": "多云",
                    "img_title9": "多云",
                    "img_title10": "阴",
                    "img_title11": "阴",
                    "img_title12": "小雨",
                    "img_title_single": "多云",
                    "wind1": "北风小于9级",
                    "wind2": "东风小于3级",
                    "wind3": "北风小于3级",
                    "wind4": "东风小于3级",
                    "wind5": "东南风小于3级",
                    "wind6": "西北风小于3级",
                    "fx1": "北风",
                    "fx2": "北风",
                    "fl1": "小于3级",
                    "fl2": "小于3级",
                    "fl3": "小于3级",
                    "fl4": "小于3级",
                    "fl5": "小于3级",
                    "fl6": "小于3级",
                    "index": "较舒适",
                    "index_d": "建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物，宜着夹克衫、薄毛衣等。",
                    "index48": "较舒适",
                    "index48_d": "建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物，宜着夹克衫、薄毛衣等。",
                    "index_uv": "弱",
                    "index48_uv": "弱",
                    "index_xc": "适宜",
                    "index_tr": "适宜",
                    "index_co": "舒适",
                    "st1": "21",
                    "st2": "13",
                    "st3": "21",
                    "st4": "13",
                    "st5": "23",
                    "st6": "14",
                    "index_cl": "适宜",
                    "index_ls": "适宜",
                    "index_ag": "极不易发"
                }
            ]
        };
        var _sel = document.getElementById('sel');
        var _box = document.getElementById('box');

        //城市
        for (var i = 0; i < jsonDat.weatherinfo.length; i++) {
            var _option = document.createElement("option");
            _option.setAttribute("value", i);
            _sel.appendChild(_option);
            _option.innerText = jsonDat.weatherinfo[i].city;
        }
        //创建盒子div
        var _div = document.createElement("div");
//       _div.setAttribute("class", "div1");
        _box.appendChild(_div);

        //创建h1并插入div
       var H1= document.createElement("h1");
        _div.appendChild(H1);

        //创建5个 p标签
        for(var j=0;j<5;j++){
            var P=document.createElement('p');
            _div.appendChild(P);
        }



    _sel.οnchange=function(){
        if(this.value==-1){
            _div.style.display="none";
        }
        else{
            _div.style.display="block";
            for(var i = 0; i < jsonDat.weatherinfo.length; i++){
                if(this.value==i){
                    _div.children[0].innerHTML=jsonDat.weatherinfo[i].date_y;
                    _div.children[1].innerHTML=jsonDat.weatherinfo[i].week;
                    _div.children[2].innerHTML=jsonDat.weatherinfo[i].temp1;
                    _div.children[3].innerHTML=jsonDat.weatherinfo[i].weather1;
                    _div.children[4].innerHTML=jsonDat.weatherinfo[i].wind1;
                    _div.children[5].innerHTML=jsonDat.weatherinfo[i].index;
                }
            }
        }
    }




</script>
</html>

Jackson解析JSON详细教程
桐花思雨
07-23 8843
Jackson和FastJson一样，是一个Java语言编写的，可以进行JSON处理的开源工具库，Jackson的使用非常广泛，Spring框架默认使用Jackson进行JSON处理Jackson有三个核心包，分别是，通过这些包可以方便的对JSON进行操作在模块。定义了一些流处理相关的API以及特定的JSON实现在模块，包含了Jackson中的注解在模块，在Streaming包的基础上实现了数据绑定，依赖于Streaming和包得益于Jackson高扩展性的设计，有很多常见的文本格式以及工具都有对。....
JSON 现代数据交换的利器
m0_74995879的博客
05-28 2407
JSON (JavaScript object Notation) 是一种轻量级的数据交换格式，具有易读易写的特点。它由键值对组成，并且支持嵌套、数组等复杂的数据结构
C++json库——nlohmann-json
czw
12-16 4374
CJSON简单介绍。
JSON简介
y516369的博客
12-16 8671
JSON简介
json的特点
最新发布
qq_33382118的博客
06-20 3025
JJSON是一种轻量级的数据交换格式，它基于JavaScript编程语言的一个子集，采用完全独立于语言的文本格式，结构化程度高。：JSON的格式类似于JavaScript对象和数组，对于熟悉JavaScript的人来说，JSON的语法易于理解和编写。：JSON数据可以表示复杂的结构，包括对象（object）和数组（array），对象由键值对组成，数组由多个值组成。：JSON的语法和结构不依赖于特定的编程语言，因此它可以在不同的编程环境中使用。：JSON的格式紧凑，易于传输和解析。
JSON的转换
热门推荐
m0_56195330的博客
08-27 3万+
JSON的转换
json数据
qq_42759120的博客
07-13 1万+
Android中关于json数据，相当于键值对 1.生成json数据 {"type":"Point", "coordinates":[ 533958.52189999819, 3123489.1460000016 ] } 可以看到上面的type和coordinates分别是json的对象结构和数据结构 JSONObject j21 = new JSONObject(); j2...
python加载json
weixin_42610010的博客
01-10 3260
在 Python 中，可以使用 json 模块来加载 JSON 数据。你可以使用 json.load() 方法来从文件中加载 JSON 数据，或者使用 json.loads() 方法来将字符串转换为 JSON 对象。 例如： import json # 加载 JSON 文件 with open('data.json', 'r') as f: data = json.load(f) # ...
Json文件编辑功能
m0_61228937的博客
08-03 2725
可以看到，编辑器的功能非常强大，它提供了一个友好的可视化编辑界面，支持Json格式的自动解析和格式化，支持Json格式的基本操作、结构视图，同时还支持对象节点的拖拽，等等，在实际工作中非常全面。如果只是偶尔需要编辑Json文件，使用文本编辑器或者线Json编辑器即可；如果需要高效、多功能的Json编辑工具，则HHDESK是您更好的选择。希望HHDESK为大家的工作带来便利。
String和JSON相互转换
hit、run
05-30 2万+
【代码】String和JSON相互转换。
Newtonsoft.Json.dll
03-11
**Newtonsoft.Json.dll详解** `Newtonsoft.Json.dll`是一个由James Newton-King 开发的流行的JSON库，专门用于.NET框架的开发。它在Unity引擎中广泛使用，因为Unity支持C#编程，而`Newtonsoft.Json`库提供了强大的...
中国省份地图json文件
03-25
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也方便机器解析和生成。它基于JavaScript的一个子集，但被广泛应用于各种编程语言中，包括Python、Java、C#等，作为数据传输...
最好用的c++json库 nlohmann json源代码
04-14
最好用的c++json库 nlohmann json源代码最好用的c++json库 nlohmann json源代码最好用的c++json库 nlohmann json源代码最好用的c++json库 nlohmann json源代码最好用的c++json库 nlohmann json源代码最好用的c++json...
MFC使用json11解析JSON
03-11
json11::Json jsonObject = json11::Json::parse(jsonString); if (jsonObject.is_object()) { // 处理解析成功的对象 } else { // 处理解析错误 } ``` 一旦你有了JSON对象，可以访问其成员或进行修改。例如，...
labview JSON包
01-27
在这个"labview JSON包"中，我们关注的是如何在LabVIEW中处理JSON（JavaScript Object Notation）数据，这是一种轻量级的数据交换格式，广泛用于Web服务和跨平台通信。JSON因其简洁、易于读写和解析的特性，被很多...
点击按钮显示对应的图片
Discovery
08-10 7362
img{display:none;} 请选择 图片1 图片2 图片3 图片4 var arr=["1.png","2.png","3.png","4.png"]; var imgShow=document.getElementById('imgshow');
点击一列显示其index的三种方法
Discovery
08-10 2594
这是第一条 这是第二条 这是第三条 //第一种方式，加入index属性 /**window.onload=function(){ * var otest=document.getElementById('test'); var oli=document.getElementById('test').getElementsByTag
仿网易轮播图
Discovery
09-06 1003
下面是slider.js /** * Created by andy on 2015/11/23. */ window.onload = function() { // 获取元素 function $(id) {return document.getElementById(id);} var js_slider = $("js_slider"); // 获取最大盒子
闭包实现选项卡的切换
Discovery
08-24 689
*{ margin: 0; padding: 0; list-style:none; } #list{ text-align: center; overflow: hidden; } #list li{ float: left; width: 20px; line-height:20px; background:#ccc;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值