91-(JSON)变化的万年历

最新推荐文章于 2024-07-27 18:51:22 发布

七色的天空

最新推荐文章于 2024-07-27 18:51:22 发布

阅读量82

点赞数

分类专栏： 04_JavaScript 文章标签： json 前端 css

本文链接：https://blog.csdn.net/q506174602/article/details/133239494

版权

04_JavaScript 专栏收录该内容

121 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .header {
            overflow: hidden;
            width: 500px;
        }

        .header ul {
            width: 504px;
        }

        .header ul li {
            float: left;
            width: 165px;
            height: 50px;
            margin-right: 3px;
            background-color: orange;
            text-align: center;
            line-height: 50px;
            color: #fff;
            cursor: pointer;
        }

        .content {
            width: 500px;

        }

        .content li {
            background-color: #ccc;
            margin: 2px 0;
            padding: 0 10px;
        }
    </style>
</head>
<body>
<div class="header">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div class="content">
    <ul>
        <li><span>阴历：</span><span data-title="yinli"></span></li>
        <li><span>属相：</span><span data-title="shuxiang"></span></li>
        <li><span>宜：</span><span data-title="yi"></span></li>
        <li><span>忌：</span><span data-title="ji"></span></li>
    </ul>
</div>

<script type="text/javascript">
  var obj = {
    "error_code": 0,
    "reason": "Success",
    "result": [
      {
        "data": {
          "holiday": "元旦",//假日
          "ji": "123123破土.安葬.行丧.开生坟.",//忌
          "shuxiang": "马",//属相
          "desc": "1月1日至3日放假调休，共3天。1月4日（星期日）上班。",//假日描述
          "weekday": "星期四",//周几
          "yi": "123213213订盟.纳采.造车器.祭祀.祈福.出行.安香.修造.动土.上梁.开市.交易.立券.移徙.入宅.会亲友.安机械.栽种.纳畜.造屋.起基.安床.造畜椆栖.",//宜
          "lunarYear": "甲午年",//纪年
          "yinli": "十一月十一",//农历
          "year-month": "2015-1",//年份和月份
          "date": "2015-1-1"//具体日期
        }
      },
      {
        "data": {
          "holiday": "元旦",//假日
          "ji": "1231232323112331破土.安葬.行丧.开生坟.",//忌
          "shuxiang": "牛",//属相
          "desc": "1月1日至3日放假调休，共3天。1月4日（星期日）上班。",//假日描述
          "weekday": "星期四",//周几
          "yi": "12321321313订盟.纳采.造车器.祭祀.祈福.出行.安香.修造.动土.上梁.开市.交易.立券.移徙.入宅.会亲友.安机械.栽种.纳畜.造屋.起基.安床.造畜椆栖.",//宜
          "lunarYear": "甲午年",//纪年
          "yinli": "十一月十二",//农历
          "year-month": "2015-1",//年份和月份
          "date": "2015-1-2"//具体日期
        }
      },
      {
        "data": {
          "holiday": "元旦",//假日
          "ji": "123213破土.安葬.行丧.开生坟.",//忌
          "shuxiang": "猪",//属相
          "desc": "1月1日至3日放假调休，共3天。1月4日（星期日）上班。",//假日描述
          "weekday": "星期四",//周几
          "yi": "123123订盟.纳采.造车器.祭祀.祈福.出行.安香.修造.动土.上梁.开市.交易.立券.移徙.入宅.会亲友.安机械.栽种.纳畜.造屋.起基.安床.造畜椆栖.",//宜
          "lunarYear": "甲午年",//纪年
          "yinli": "十一月十三",//农历
          "year-month": "2015-1",//年份和月份
          "date": "2015-1-3"//具体日期
        }
      }
    ]
  }
  var liArr = document.querySelectorAll('.header li');
  var spanArr = document.querySelectorAll('.content li span:last-child');

  for(var i = 0; i < liArr.length; i++) {
    // console.log(obj.result[i])
    liArr[i].innerText = obj.result[i].data.date;

    liArr[i].index = i;
    liArr[i].onclick = function() {
      for(var j = 0; j < spanArr.length; j++) {
        // var key = spanArr[j].getAttribute('data-title');
        // 要充实元素的类名正好与data的键值对名相对应
        var key = spanArr[j].dataset.title;
        spanArr[j].innerText = obj.result[this.index].data[key]
      }
    }
  }


  liArr[0].onclick();
</script>
</body>
</html>

上述运行结果：