SOURCE

console 命令行工具 X clear

                    
>
console
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1">
  <meta charset="utf8">
  <title>杭州主城区40天天气</title>
  <style>
    body {
      background-color: #fff;
      font-size: 12px;
      margin: 0;
      padding: 0;
      line-height: 1;
    }

    table {
      font-size: 12px;
      width: 100%;
      max-width: 600px;
      margin: auto;
      border-spacing: 1px;
    }

    .isToday-true {
      background-color: #3cf !important;
      
    }

    .isGreat-true {
      background-color: #4f81bd;
      color: #fff;
    }

    .isGreat-false {
      background-color: #eee;
    }

    th {
      text-align: left;
    }
  </style>
  <script src="https://tianqi.2345.com/t/wea_forty/js/data/58457.js"></script>
</head>

<body>
<div data="list">本应用只兼容IE8以上浏览器或非IE浏览器</div>
</body>

<script>
  // mvvm
  var vm = {
    list               : [],
    showDataBeforeToday: false
  }

  Object.defineProperty(vm, "list", {
    get: function () {
      return vm.list
    },
    set: function (list) {
      tableRender(list)
    }
  })

  /** @namespace sourceData jsonp, 服务端固定返回的值 */
  typeof sourceData !== 'undefined' && sourceData instanceof Array && (vm.list = sourceData)


  function tableRender(list) {

    var str = '<table><tr><th/><th>星期</th><th/><th colspan=2>最高 / 最低</th></tr><line-holder/></table>'

    list
    //.filter(i => new Date(i.date) >= new Date(sourceDate)) // 隐藏今天之前
      .forEach(function (i) {
          /** @namespace i.weaName */
          /** @namespace i.wea_height */
          /** @namespace i.wea_low */
          var day     = ['日', '一', '二', '三', '四', '五', '六', '日'][new Date(i.date).getDay()]
          var isGreat = ['多云', '晴', '阴'].indexOf(i.weaName) > -1
          str         = str.replace(
            '<line-holder/>',
            `<tr class="isGreat-${isGreat}">` +
            `<td class="isToday-${new Date(i.date).toDateString() === new Date().toDateString()}">${i.date}</td>` +
            `<td>${day}</td>` +
            //`<td>${i.nongli    }</td>`+
            `<td class="isGreat-${isGreat}">${i.weaName}</td>` +
            `<td>${i.wea_height}</td>` +
            `<td>${i.wea_low}</td></tr>` +
            `<line-holder/>`
          )
        }
      )
    document.querySelector('[data="list"]').innerHTML = str
  }


</script>