jquery简单天气查询


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>天气查询title>
	<style>
		#box1{
			width: 500px;
			min-height: 400px;
			background-color: pink;
			margin: auto;
			padding: 10px;
			text-align: center;
		}
		li{
			list-style: none;
		}
	style>
	<script src="jquery-3.3.1.js">script>
	<script>
		$(function() {
			$("#btn").click(function() {
				var city = $("#city").val();
				$.ajax({
					type:'get',
					url:'http://wthrcdn.etouch.cn/weather_mini',
					data:{city:city},
					dataType:"jsonp",
					success:function(data) {
						console.log(data);
						var tag = "
    "; var w = data.data.forecast; $.each(w, function(i,e) { var date = e.date; var high = e.high; var low = e.low; var fengxiang = e.fengxiang; var fengli = e.fengli; tag += "
  • 日期 " + date + "
  • "
    + "
  • 最高温度 " + high + "
  • "
    + "
  • 最低温度 " + low + "
  • "
    + "
  • 风向 " + fengxiang + "
  • "
    + "
  • 风力 " + fengli + "
  • "
    ; }) tag += "
"
; $("#info").html(tag); } }) }) })
script> head> <body> <div id="box1"> <input type="text" id="city"> <input type="button" value="查询" id="btn"> <div id="info">div> div> body> html>

你可能感兴趣的:(jquery简单天气查询)