&l_静态html天气预报源码">
当前位置:   article > 正文

简易版天气预报(利用 html 和 js ) 2021-07-16_静态html天气预报源码

静态html天气预报源码

简易版天气预报(利用 html 和 js )

利用html,js 和 vue 完成 天气预报

html 完成的页面代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<div id="app">
			<div id="top">
				<input type="text" v-model="city" v-on:keyup.enter="seacherweather" id="inputtext" value="" />
				<button type="button" v-on:click="seacherweather">查询</button>
			</div>
			<div id="but">
				<ul>
					<li v-for="item in weatherlist">
						<div id="">
							{{item.date}}<br>
							{{item.type}}<br>
							{{item.low}}-{{item.high}}<br>
							{{item.fengli}}<br>
							{{item.fengxiang}}
						</div>
					</li>
				</ul>
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./天知道.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

利用 js 和 vue 完成的逻辑代码:

var app = new Vue({
	el:"#app",
	data:{
		city:"",
		weatherlist:[],
	},
	methods:{
		seacherweather:function(){
			var that = this;
			axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
			.then(function(response){
				console.log(response.data.data.forecast);
				that.weatherlist = response.data.data.forecast;
			})
		}
	}
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

效果图片:
虽然页面不美观,但是还是能看出是天气预报的,不影响信息。
内容还有很多欠缺,还望大佬们指出不足之处,我必虚心接受!!!!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小桥流水78/article/detail/906589
推荐阅读
相关标签