json

最新推荐文章于 2022-08-10 15:22:42 发布
最新推荐文章于 2022-08-10 15:22:42 发布
阅读量191 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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>

zoekitty
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Json
司天宏的博客
07-13 1156
文章目录1 json解析1.1 什么是json1.2 json的两种语法1.2.1 对象1.2.2 数组1.3 json-lib解析json1.3.1解析对象1.3.2解析数组1.3.3 生成JSON1.4 fastJson解析json（最常用）1.4.1 解析对象1.4.2 解析数组1.4.3 生成json1.5 Gson解析json1.5.1解析对象1.5.2解析数组1.5.3 生成JSON ...
JSON解析
热门推荐
liangxiuqingfen的博客
08-10 3万+
1）JSON（Java Script Object Notation）是一种轻量级的数据交换语言，以文本字符串为基础，且易于让人阅读。（注意：XML就是一个重量级的数据交换语言）（2）和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度,（3）JSON采用完全独立于任何程序语言的文本格式，使JSON成为理想的数据交换语言（4）JSON就是一串字符串 只不过元素会使用特定的符号标注。...
json文件
雪剑封心
08-10 8045
一般都使用类似字典的方式存储，但和字典不同，无论是键还是值，都要加上双引号。直接使用记事本打开：例如猫狗二分类。
JSON 详解
前端学习博客
03-12 2万+
JSON 详解 JSON是一种非常重要的数据格式，它并不是编程语言，而是一种可以在服务器和客户端之间传输的数据格式。 文章目录JSON 详解一、JSON基本语法二、JSON序列化JSON序列化方法三、Stringify方法replacer参数四、parse方法五、使用JSON序列化深拷贝 一、JSON基本语法 JSON的顶层支持三种类型的值： 简单值：数字（Number）、字符串（String，不支持单引号）、布尔类型（Boolean）、null类型； 对象值：由key、value组成，key是字符串类型
Newtonsoft.Json.dll
最新发布
03-11
**Newtonsoft.Json.dll详解** `Newtonsoft.Json.dll`是一个由James Newton-King 开发的流行的JSON库，专门用于.NET框架的开发。它在Unity引擎中广泛使用，因为Unity支持C#编程，而`Newtonsoft.Json`库提供了强大的...
labview JSON包
01-27
在这个"labview JSON包"中，我们关注的是如何在LabVIEW中处理JSON（JavaScript Object Notation）数据，这是一种轻量级的数据交换格式，广泛用于Web服务和跨平台通信。JSON因其简洁、易于读写和解析的特性，被很多...
nlohmann / json
01-05
《深入解析nlohmann/json库在C++中的应用》 nlohmann/json是C++领域中广泛使用的开源JSON（JavaScript Object Notation）解析库，由Niels Lohmann开发并维护，其源代码托管在GitHub上...
echarts 全国地图json数据
08-25
在这个“echarts全国地图json数据”中，我们主要讨论的是如何使用ECharts来展示中国地图，并结合JSON数据进行动态的、交互式的可视化。 首先，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于...
C#winform中读写json文件
01-02
在C# WinForm应用开发中，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于存储和传输数据。它易于人阅读和编写，同时也易于机器解析和生成。本篇文章将详细介绍如何在C# WinForm应用程序中...
点击按钮显示对应的图片
Discovery
08-10 7236
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 2533
这是第一条 这是第二条 这是第三条 //第一种方式，加入index属性 /**window.onload=function(){ * var otest=document.getElementById('test'); var oli=document.getElementById('test').getElementsByTag
仿网易轮播图
Discovery
09-06 959
下面是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 653
*{ margin: 0; padding: 0; list-style:none; } #list{ text-align: center; overflow: hidden; } #list li{ float: left; width: 20px; line-height:20px; background:#ccc;
注册验证
Discovery
09-02 543
注册   
数组 shift（）;slice（）;splice();indexof();lastIndexof();
Discovery
08-07 536
shift()用于删除数组的第一个元素并返回该元素&可以遍历循环并清空一个数组 var ashift=['a','b','c','d','f']; console.log(ashift.shift());//a/这部分是循环遍历并清空一个数组 var item; while(item=ashift.shift()){ console.log(item);/
js内置的进制转换
Discovery
10-16 526
console.log(parseInt("11", 2)); // 3 2进制转10进制 console.log(parseInt("77", 8)); // 63 8进制转10进制 console.log(parseInt("af", 16)); //175 16进制转10进制 /*将10进制转换为2进制，八进制，十六进制字符串 Object.toString(n
验证验证码
Discovery
08-17 448
input{width:60px;height:40px;border:1px solid yellow;} span{width:40px;height:40px;border: 1px solid blue;display:inline-block;} //随机获取验证码 function getRandomStr(length){
Dom内容汇总
Discovery
08-03 416
dom: 获取节点：{ 1、document.getElementById(元素id):通过元素id找到节点 2、document.getElementsByClassName(元素类名className): 通过class类名找到节点，返回的是一个集合 3、document.getElemen
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值