JS天气控件

最新推荐文章于 2024-09-29 16:12:49 发布

lymkill

最新推荐文章于 2024-09-29 16:12:49 发布

阅读量2.1k

点赞数

文章标签：天气 js 控件

本文链接：https://blog.csdn.net/lymkill/article/details/82027371

版权

这篇博客分享了一个JS天气控件的实现，包括weather.js、weather.css和theCity.css三个文件，提供了下载链接，可用于网页中展示天气信息。

摘要由CSDN通过智能技术生成

下载地址：https://download.csdn.net/download/lymkill/10625693

weather.js:

(function($){
	var weather = function(target,options){
		this.target = target;
		this.options = options;
	}
	weather.prototype = {
		  constructor:weather,
		  //获取天气图标
		  getTypeClass:function(type){
			 switch (type) {
				case '晴':return 'weather-icon-qing';break;
				case '阴':return 'weather-icon-yin';break;
				case '多云':return 'weather-icon-duoyun';break;
				case '小雨':return 'weather-icon-xiaoyu';break;
				case '中雨':return 'weather-icon-zhongyu';break;
				case '大雨':return 'weather-icon-dayu';break;
				case '暴雨':return 'weather-icon-baoyu';break;
				case '小雪':return 'weather-icon-xiaoxue';break;
				case '中雪':return 'weather-icon-zhongxue';break;
				case '大雪':return 'weather-icon-daxue';break;
				case '暴雪':return 'weather-icon-baoxue';break;
				case '雨夹雪':return 'weather-icon-yujiaxue';break;
				case '阵雨':return 'weather-icon-zhenyu';break;
				case '雷阵雨':return 'weather-icon-leizhenyu';break;
			}
		},
		//获取星期格式
		getWeekHtml:function(week){
			if(week == '星期天'){
				return '<span class="weather-week">星期日</span>';
			}else if(week == '星期六'){
				return '<span class="weather-week">'+week+'</span>';
			}else{
				return '<span>'+week+'</span>';
			}
		},
		//初始化
		init:function(){
			$(this.target).css('width',this.options.width+'px');
			$(this.target).css('height',this.options.height+'px');
			$(this.target).empty();
			$(this.target).append('<div class="weather-positiondiv"><span class="weather-positionicon"></span><span class="weather-position">'+this.options.city+'</span></div><div class="weather-showdiv"></div>');
			this.loadWeather();
			$('.weather-position').theCity();
		},
		//加载天气信息
		loadWeather:function(){
			var that = this;
			$.get('http://wthrcdn.etouch.cn/weather_mini',{city:that.options.city},function(res){
				var data = res.data;
				$(that.target).children().eq(1).empty();
				for(var $i in data.forecast){
					if($i==that.options.showNum)break;
					var fengli = data.forecast[$i].fengli.substring(9,data.forecast[$i].fengli.length-3)
					var child = $('<div class="weather-child"></div>');
					child.append('<div><span class="weather-date">'+data.forecast[$i].date.split('日')[0]+'日</span>'+that.getWeekHtml(data.forecast[$i].date.split('日')[1])+'</div>');
					child.append('<div class="weather-icon '+that.getTypeClass(data.forecast[$i].type)+'" title="'+data.forecast[$i].type+'"></div>');
					child.append('<div>'+data.forecast[$i].fengxiang+'&nbsp;'+fengli+'</div>');
					child.append('<div>'+data.forecast[$i].low.split(' ')[1]+'~'+data.forecast[$i].high.split(' ')[1]+'</div>');
					
					$(that.target).children().eq(1).append(child.get(0));
				}
			},'json');
		}
	};
	//
	$.fn.weather = function(options, param){
		if (typeof options == 'string'){
			return $.fn.weather.methods[options](this, param);
		}
		options = $.extend({}, $.fn.weather.defaults, options);
		this.get(0).weathers = new weather(this,options);
		this.get(0).weathers.init();
	}
	//天气控件初始设置
	$.fn.weather.defaults = {
		width:500,
		heigth:200,
		showNum:4,
		city:'沈阳'
	};
	//天气控件方法
	$.fn.weather.methods = {
		setNum: function(that, param){
			that.ge