学习周记课堂练习

最新推荐文章于 2025-03-29 15:23:34 发布

海绵宝宝的神奇海螺

最新推荐文章于 2025-03-29 15:23:34 发布

阅读量147

点赞数

本文链接：https://blog.youkuaiyun.com/m0_47087071/article/details/118158960

版权

天气查询

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title></title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    	
   		document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")
   			
   		});  
	
		/*----------Jquery事件--------------*/
		$(document).ready(function(){
			$("button").click(function(){
				var city=$("#city").val();
		/*-----------------------------------begin--------------------------------*/
		/*------说明：通过ajax获取远程服务器（url:http://wthrcdn.etouch.cn/weather_mini?city=）天气信息（json数据），解析获取的字条串，
		转化成为对象，获取forecast数组，调用addBox（）函数---------*/
		
		$.ajax({
		                 type: "GET", //请求方式  
		                 url: "http://wthrcdn.etouch.cn/weather_mini?city="+city,//url地址，就是json文件的路径  
		                 dataType: "json", //数据类型，可以是 text xml json  script  jsonp  
		 　　　　　　　　　success: function(result){ //result是响应信息返回的结果，此处包含了返回的json对象  
		                     addBox(result.data.forecast);  //调用addBox函数，将result数据添加到box容器中
		                 }  
		             });
		  
		   });	
			});
		
			
				
		function addBox(result) {
			
				$.each(result, function(index, obj) {
					
					$("#box").append("<div'>" +
						
							"<p>" + obj['date'] + "</p>" +
							
							
							"<p>" + obj['high'] + "</p>" +
							
							"<p>" + obj['fengli'] + "</p>" +
							
							"<p>" + obj['low'] + "</p>" +
							
							"<p>" + obj['fengxiang'] + "</p>" +
							
							"<p>" + obj['type'] + "</p>" +
							
							"</div>");
				});							
		}
    </script>
	
</head>
	<body>
		<div>	<h1>请输入城市</h1>
		城市：<input type="text" id="city"/>
		<br />
		<button type="button">提交</button>
		</div>	
		<div id="box"></div>
	</body>
</html>

数字输入是否正确

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			请输入1-10：<input type="text" v-model="type" />
			<div v-if="type>1&&type<10">
			true
			</div>
			<div v-else>
				false
			</div>
		</div>
		<script>
			new Vue({
				el:'#app'
				data:{
				}
			})
		</script>
	</body>
</html>