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>
var vm = {
list : [],
showDataBeforeToday: false
}
Object.defineProperty(vm, "list", {
get: function () {
return vm.list
},
set: function (list) {
tableRender(list)
}
})
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
.forEach(function (i) {
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 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>