赞
踩
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./assets/bootstrap-3.4.1-dist/css/bootstrap.min.css"> <style> .container { padding-top: 20px; } .nav { padding: 10px 0; } </style> </head> <body> <div class="container"> <h1>天气预报</h1> <div class="form-inline nav"> <div class="form-group"> <input type="text" class="form-control" id="province" placeholder="请输入省份" value=""> </div> <div class="form-group"> <input type="text" class="form-control" id="city" placeholder="请输入城市" value=""> </div> <button type="submit" class="btn btn-default" id="btn">搜索</button> </div> <table class="table table-striped table-hover" align="center" id="box"></table> </div> </body> <script src="./js/jsonp.js"></script> <script src="./js/template-web.js"></script> <!-- 创建一个模板引擎 --> <script type="text/html" id="tpl"> <tr> <th>时间</th> <th>温度</th> <th>天气</th> <th>风向</th> <th>风力</th> </tr> {{each info}} <tr> <td>{{date($value.update_time)}}</td> <td>{{$value.degree}}</td> <td>{{$value.weather}}</td> <td>{{$value.wind_direction}}</td> <td>{{$value.wind_power}}</td> </tr> {{/each}} </script> <script> // 获取table容器 var table = document.getElementById('box') // 获取搜索按钮 var btn = document.getElementById('btn') // 获取用户输入的省份 var province = document.getElementById('province'); // 获取用户输入的城市 var city = document.getElementById('city'); // 定义dateFormat方法 function dateFormat(data) { // 获取年,月,日,时,分,秒 var year = data.substr(0, 4) var month = data.substr(4, 2) var day = data.substr(6, 2) var hour = data.substr(8, 2) var minuter = data.substr(10, 2) var sec = data.substr(12, 2) return year + '年' + month + '月' + day + '日 ' + hour + '时' + minuter + '分' + sec + '秒' } // 向模板中开放外部变量 // 固定写法template.defaults.import.XX = dateFormat(方法名) template.defaults.imports.date = dateFormat // 点击搜索按钮触发事件 btn.onclick = function() { // 获取用户输入的省份,城市的值 province = province.value; city = city.value // 调用jsonp方法 jsonp({ url: 'https://wis.qq.com/weather/common', data: { source: 'pc', weather_type: 'forecast_1h|forecast_24h', province: province, city: city, }, success: function(data) { // 使用模板引擎 var html = template('tpl', { info: data.data.forecast_1h }) // 把拼接好的字符串放入table容器中 table.innerHTML = html } }) } </script> </html>
注意:这里需要导入 bootstrap.min.css,template-web.js(模板引擎第三方包),jsonp.js(自己封装的,当然也可以使用jquery中提供的$.ajax()方法,也可以使用jsonp请求)
如有需要可以在我的资源中下载