精华内容
下载资源
问答
  • js天气预报代码

    2013-08-26 20:09:18
    javascript 天气预报,包括:温度、风力、紫外线、空气状况。
  • 原生JS实现天气预报

    2020-11-20 03:44:06
    本文实例为大家分享了JS实现天气预报的具体代码,供大家参考,具体内容如下 HTML代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content...
  • 仿照webQQ的天气样式做的一个天气预报,使用中国天气的数据源
  • 天气预报gif动图 带JS对应图标解析说明 /// /// 天气描述转图标 /// /// <param name="phen"></param> /// <returns></returns> function GetYBgif(phen) { var ico = "02.gif";//默认多云图标 ...
  • jQuery自动定位当地天气预报代码是一款绿色清爽风格的天气预报插件下载。
  • jQuery天气预报查询代码基于jquery.1.10.2.min.js制作,使用高德地图API,查询全国各个城市天气预报
  • JS实现天气预报查询

    千次阅读 2018-12-19 18:01:41
    样品展示 HTML &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"...全国天气查询小应用&lt;/title&gt; &lt;link rel="stylesheet" h

    样品展示
    在这里插入图片描述

    HTML

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>全国天气查询小应用</title>
        <link rel="stylesheet" href="weather.css"/>
        <link rel="icon" href="favicon.ico"/>
    	
    </head>
    <body>
    <audio  autoplay loop="loop">
    	<source src="mp3/海为气象园.mp3">
    </audio>
    
    <header>
        <h1><font face='cursive' color='white'><b>❄ 海为气象园 ❄</b></font></h1>
        <div id="weather_search">
            <span><input id="text" type="text" placeholder="请输入您要查询的城市" /></span>
            <span><input id="btn" type="button" value=" 查询天气" /></span>
        </div>
    </header>
        <section>
    	<font color='white'>
            <div id="today_container">
    		
                <div>
                    <img src="./images/weather_icon/1.png" alt="今日天气"/>
                </div><p><font size='30'color='white'><b>☀ ☁ ☂ ❄</b></font></p>
                <div>
                    <div class="main_info"><span class="info">城市</span>|<span class="info">201X-XX-XX</span>|<span class="info">星期X</span>|<span class="info">---</span> </div>
                    <div class="more_info">今日温度:<span class="info">-----</span>风力:<span class="info">-----</span>风向:<span class="info">-----</span>PM2.5:<span class="info">--</span></div>
                </div>
            </div>
            <div id="future_container">
                <div class="future_box">
                    <img src="./images/weather_icon/1.png" alt="天气"/>
                    <span class="future_info">201X-XX-XX</span>
                    <span class="future_info">星期X</span>
                    <span class="future_info">--</span><span class="future_info">12-16℃</span>
                </div>
                <div class="future_box">
                    <img src="./images/weather_icon/3.png" alt="天气"/>
                    <span class="future_info">201X-XX-XX</span>
                    <span class="future_info">星期X</span>
                    <span class="future_info">--</span><span class="future_info">12-16℃</span>
                </div>
                <div class="future_box">
                    <img src="./images/weather_icon/2.png" alt="天气"/>
                    <span class="future_info">201X-XX-XX</span>
                    <span class="future_info">星期X</span>
                    <span class="future_info">--</span><span class="future_info">12-16℃</span>
                </div>
    			
                <div class="future_box">
                    <img src="./images/weather_icon/4.png" alt="天气"/>
                    <span class="future_info">201X-XX-XX</span>
                    <span class="future_info">星期X</span>
                    <span class="future_info">--</span><span class="future_info">12-16℃</span>
                </div>
                <div class="future_box">
                    <img src="images/weather_icon/5.png" alt="天气"/>
                    <span class="future_info">201X-XX-XX</span>
                    <span class="future_info">星期X</span>
                    <span class="future_info">-</span><span class="future_info">12-16℃</span>
                </div>
    			
            </div>
    	</font>
        </section>
    	
        <footer>
            <div>design and code by zsq</div>
        </footer>
        <script src="index.js"></script>
    	<div style="text-align:center;">
    	
    </div>
    
    </body>
    </html>`在这里插入代码片`
    

    CSS

    body,div,h1,h2,h3,h4,h5,h6,input,header,main,ul,li,footer,p,span,section{
        padding: 0;
        margin: 0;
    }
    html,body{
        height: 100%;
        min-width: 960px;
    }
    body{
        background: url(images/bg.jpg) no-repeat;
        font-size: 14px;
        font-family: "microsoft yahei";
        -webkit-background-size: 100%;
        background-size: 100%;
        color: #222;
    }
    header{
        height: 50px;
        padding-left: 80px;
        background: rgba(100, 100, 100, 0.6);
    }
    h1{
        padding-right: 30px;
        line-height: 50px;
        font-size: 30px;
        float: left;
    }
    #weather_search{
        margin-top: 10px;
        float: left;
    }
    #weather_search span{
        height: 30px;
        float: left;
    }
    #text{
        padding: 0 6px 0 6px;
        background: #fff;
        font-size: 14px;
        width: 240px;
        height: 30px;
        border: none;
        outline: none;
    }
    #btn{
        width: 70px;
        height: 30px;
        border: none;
        background: rgba(255,255,255,0.5);
        color: #333;
        outline: none;
        cursor: pointer;
    }
    #btn:hover{
        background: rgba(255, 255, 255, 0.3);
    }
    section{
        padding-top: 90px;
    }
    #today_container{
        width: 900px;
        margin: 0 auto;
        padding: 20px;
        background: rgba(100,100,100,0.3);
        overflow: hidden;
    }
    #today_container div img {
        margin: 0 50px 0 40px;
        float: left;
    }
     .main_info{
        font-size: 24px;
        margin-bottom: 10px;
    }
     .main_info span{
        margin: 0 15px;
    }
     .main_info span:first-child{
        margin-left: 0;
    }
     .more_info {
        margin-top: 3px;
        font-size: 16px;
    }
     .more_info span{
        margin: 0 15px 0 0;
    }
    #future_container{
        margin: 80px auto 0 auto;
        width: 950px;
        text-align: center;
        overflow: hidden;
    }
    #future_container div{
        float: left;
        width: 150px;
        padding: 20px 0;
        margin: 0 20px;
        background: rgba(100, 100, 100, 0.3);
    }
    #future_container div:hover{
        background: rgba(200,200,200,0.5);
    }
    #future_container div span{
        display: block;
    }
    footer{
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    footer div{
        width: 175px;
        margin: 0 auto;
    }
    

    JS

    /**
     * Created by zsq on 2016/11/13.
     */
    //调用jsonp函数请求当前所在城市
    jsonp('https://api.map.baidu.com/api?v=2.0&ak=Dv1NMU23dh1sGS9n2tUouDEYY96Dfzh3&s=1&callback=getCity');
    window.onload = function () {
        //请求天气车数据
        btn.addEventListener('click',function () {
            jsonp(createUrl()[0]);
            jsonp(createUrl()[1]);
        });
        text.addEventListener('keydown', function (e){
            if (e.keyCode == 13) {
                jsonp(createUrl()[0]);
                jsonp(createUrl()[1]);
            }
        });
    }
    
    function getCity() {
        function city(result) {
            //去掉城市名后的"市"
            var city = result.name.substring(0, result.name.length - 1);
            //请求当前城市的天气数据
            jsonp(createUrl(city)[0]);
            jsonp(createUrl(city)[1]);
        }
        var cityName = new BMap.LocalCity();
        cityName.get(city);
    }
    
    // 数据请求函数
    function jsonp(url) {
        var script = document.createElement('script');
        script.src = url;
        document.body.insertBefore(script, document.body.firstChild);
        document.body.removeChild(script);
    }
    
    //数据请求成功回调函数,用于将获取到的数据放入页面相应位置
    function getWeather(response) {
        var oSpan = document.getElementsByClassName('info');
        var data = response.result;
        oSpan[0].innerHTML = data[0].citynm;
        oSpan[1].innerHTML = data[0].days;
        oSpan[2].innerHTML = data[0].week;
        oSpan[3].innerHTML = data[0].weather;
        oSpan[4].innerHTML = data[0].temperature;
        oSpan[5].innerHTML = data[0].winp;
        oSpan[6].innerHTML = data[0].wind;
    
        var aDiv = document.getElementsByClassName('future_box');
        for (var i = 0; i < aDiv.length; i++) {
            var aSpan = aDiv[i].getElementsByClassName('future_info');
            aSpan[0].innerHTML = data[i + 1].days;
            aSpan[1].innerHTML = data[i + 1].week;
            aSpan[2].innerHTML = data[i + 1].weather;
            aSpan[3].innerHTML = data[i + 1].temperature;
        }
        //根据返回数据,替换不同天气图片
        changeImg(response);
    }
    
    function getTodayWeather(response) {
        var oSpan = document.getElementsByClassName('info');
        var data = response.results;
        oSpan[7].innerHTML = data[0].pm25;
        oSpan[8].innerHTML = data[0].index[4].zs;
        oSpan[9].innerHTML = data[0].index[1].zs;
        oSpan[10].innerHTML = data[0].index[2].zs;
        oSpan[11].innerHTML = data[0].index[0].zs;
    }
    
    //根据获取到的数据更改页面中相应的图片
    function changeImg(data) {
        var firstImg = document.getElementsByTagName("img")[0];
        var firstWeatherId = data.result[0].weatid;
        chooseImg(firstWeatherId, firstImg);
    
        var aImg = document.getElementById('future_container').getElementsByTagName('img');
        for (var j = 0; j < aImg.length; j++) {
            var weatherId = data.result[j + 1].weatid;
            chooseImg(weatherId, aImg[j]);
        }
    }
    
    //选择图片
    function chooseImg(id, index) {
        switch (id) {
            case '1':
                index.src = 'images/weather_icon/1.png';
                break;
            case '2':
                index.src = 'images/weather_icon/2.png';
                break;
            case '3':
                index.src = 'images/weather_icon/3.png';
                break;
            case '4':
            case '5':
            case '6':
            case '8':
            case '9':
            case '10':
            case '11':
            case '12':
            case '13':
            case '20':
            case '22':
            case '23':
            case '24':
            case '25':
            case '26':
                index.src = 'images/weather_icon/4.png';
                break;
            case '7':
                index.src = 'images/weather_icon/6.png';
                break;
            case '14':
            case '15':
            case '16':
            case '17':
            case '18':
            case '27':
            case '28':
            case '29':
                index.src = 'images/weather_icon/5.png';
                break;
            case '19':
            case '21':
            case '30':
            case '31':
            case '32':
            case '33':
                index.src = 'images/weather_icon/7.png';
                break;
            default:
                index.src = 'images/weather_icon/8.png';
        }
    }
    
    //根据城市名创建请求数据及url
    function createUrl() {
        var cityName = '';
        if (arguments.length == 0) {
            cityName = document.getElementById('text').value;
        } else {
            cityName = arguments[0];
        }
        var urls = [];
        urls[0] = 'https://sapi.k780.com/?app=weather.future&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=getWeather&weaid=' + encodeURI(cityName);
        urls[1] = 'https://api.map.baidu.com/telematics/v3/weather?output=json&ak=FK9mkfdQsloEngodbFl4FeY3&callback=getTodayWeather&location=' + encodeURI(cityName);
        return urls;
    }
    
    展开全文
  • js 获取天气预报

    2019-04-01 01:15:38
    NULL 博文链接:https://jiachenmianyu.iteye.com/blog/1409443
  • jQuery自动获取本地天气预报代码是一款自动获取本地时间日期天气等jquery插件。
  • jQuery自动获取本地天气预报代码是一款自动获取本地时间日期天气等情况的jquery插件。
  • 复制代码 代码如下:var request = require(‘request’) var url = ‘http://www.baidu.com/home/xman/data/superload’ var cookie = ‘你登录百度后的cookie’ var options = {  method: “GET”,  url: url,  ...
  • jQuery查询城市天气预报代码基于百度地图接口,输入城市查询各地天气情况。
  • 仿腾讯随IP地址变化的天气预报代码
  • jQuery移动端天气预报查询代码基于jquery-3.2.1.min.js、swiper.min.js制作,支持手指触屏操作,获取百度、新浪城市天气实时数据,包括日期、实时天气、空气质量、穿衣指数等。
  • 天气预报js调用代码

    热门讨论 2010-01-28 09:55:56
    天气预报Js调用代码,取自天气网,因找不到好的天气Rss订阅服务,
  • js天气预报 js天气预报接口

    热门讨论 2011-05-17 08:52:22
    js版得,可能显示的比较慢,显示不出来刷新下,经本人测试,可以显示出来,先去QQ查看ip,然后把ip转换为城市,最后由城市代码去查看天气
  • 一款简单好调用的jQuery全国城市天气预报API查询代码,输入城市名进行查询。
  • jQuery移动端天气预报查询代码基于jquery-3.2.1.min.js、swiper.min.js制作,支持手指触屏操作,获取百度、新浪城市天气实时数据,包括日期、实时天气、空气质量、穿衣指数等。
  • 代码 在前端页面插入下面代码即可 里面的参数就自己改去吧 <iframe width="415" scrolling="no" height="50" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=12&icon=1...

    代码

    在前端页面插入下面代码即可
    在这里插入图片描述

    里面的参数就自己改去吧
    <iframe width="415" scrolling="no" height="50" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=12&icon=1&num=3&site=12"></iframe>
    

    在这里插入图片描述
    可以选择城市
    在这里插入图片描述

    只是分享技术点,希望对帮助更多的人!

    在这里插入图片描述

    展开全文
  • 主要介绍了用python自制微信机器人,定时发送天气预报,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • swiper手机端左右滑动天气预报代码是一款实时天气地理定位,手机天气预报,搜狐的天气预报数据。
  • jQuery仿iPhone天气预报代码是一款类似苹果手机的天气预报界面,显示7天一周天气预报界面代码。
  • 微信小程序 天气预报 实例主要功能 自动定位所在城市 根据所定位的城市获取天气信息 显示未来几天的天气情况 查看当天天气的详情信息 先看效果图 微信小程序-天气 首页 微信小程序-天气 详情页 思路及编码部份...
  • type="text" id="city" class="input_txt" placeholder="请输入查询的天气" /> (event)"> 搜 索 button> div> <div class="hotkey"> <a href="javascript:;">北京a> <a href="javascript:;">上海a> <a href="...

    1.css文件:
    <1>index.css

    body {
    	font-family: 'Microsoft YaHei';
    }
    
    .wrap {
    	position: fixed;
    	left: 0;
    	top: 0;
    	width: 100%;
    	height: 100%;
    	/* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); */
    	/* background:#8fd5f4; */
    	/* background: linear-gradient(#6bc6ee, #fff); */
    	background: #fff;
    
    }
    
    .search_form {
    	width: 640px;
    	margin: 100px auto 0;
    }
    
    .logo img {
    	display: block;
    	margin: 0 auto;
    }
    
    .form_group {
    	width: 640px;
    	height: 40px;
    	margin-top: 45px;
    }
    
    .input_txt {
    	width: 538px;
    	height: 38px;
    	padding: 0px;
    	float: left;
    	border: 1px solid #41a1cb;
    	outline: none;
    	text-indent: 10px;
    }
    
    .input_sub {
    	width: 100px;
    	height: 40px;
    	border: 0px;
    	float: left;
    	background-color: #41a1cb;
    	color: #fff;
    	font-size: 16px;
    	outline: none;
    	cursor: pointer;
    	position: relative;
    }
    
    .input_sub.loading::before {
    	content: '';
    	position: absolute;
    	left: 0;
    	top: 0;
    	width: 100%;
    	height: 100%;
    	background: url('../img/loading.gif');
    }
    
    .hotkey {
    	margin: 3px 0 0 2px;
    }
    
    .hotkey a {
    	font-size: 14px;
    	color: #666;
    	padding-right: 15px;
    }
    
    .weather_list {
    	height: 200px;
    	text-align: center;
    	margin-top: 50px;
    	font-size: 0px;
    }
    
    .weather_list li {
    	display: inline-block;
    	width: 140px;
    	height: 200px;
    	padding: 0 10px;
    	overflow: hidden;
    	position: relative;
    	background: url('../img/line.png') right center no-repeat;
    	background-size: 1px 130px;
    }
    
    .weather_list li:last-child {
    	background: none;
    }
    
    /* .weather_list .col02{
        background-color: rgba(65, 165, 158, 0.8);
    }
    .weather_list .col03{
        background-color: rgba(94, 194, 237, 0.8);
    }
    .weather_list .col04{
        background-color: rgba(69, 137, 176, 0.8);
    }
    .weather_list .col05{
        background-color: rgba(118, 113, 223, 0.8);
    } */
    
    
    .info_date {
    	width: 100%;
    	height: 40px;
    	line-height: 40px;
    	color: #999;
    	font-size: 14px;
    	left: 0px;
    	bottom: 0px;
    	margin-top: 15px;
    }
    
    .info_date b {
    	float: left;
    	margin-left: 15px;
    }
    
    .info_type span {
    	color: #fda252;
    	font-size: 30px;
    	line-height: 80px;
    }
    
    .info_temp {
    	font-size: 14px;
    	color: #fda252;
    }
    
    .info_temp b {
    	font-size: 13px;
    }
    
    .tem .iconfont {
    	font-size: 50px;
    }
    
    

    <2>reset.css

    body,
    ul,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    	margin: 0;
    	padding: 0;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    	font-size: 100%;
    	font-weight: normal;
    }
    
    a {
    	text-decoration: none;
    }
    
    ul {
    	list-style: none;
    }
    
    img {
    	border: 0px;
    }
    
    /* 清除浮动,解决margin-top塌陷 */
    .clearfix:before,
    .clearfix:after {
    	content: '';
    	display: table;
    }
    
    .clearfix:after {
    	clear: both;
    }
    
    .clearfix {
    	zoom: 1;
    }
    
    .fl {
    	float: left;
    }
    
    .fr {
    	float: right;
    }
    
    

    2.图片文件
    <1>line.png
    在这里插入图片描述
    <2>logo.png
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    
    	<head>
    		<meta charset="UTF-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
    		<title>天知道</title>
    		<link rel="stylesheet" href="css/reset.css" />
    		<link rel="stylesheet" href="css/index.css" />
    	</head>
    
    	<body>
    		<div class="wrap" id="app">
    			<div class="search_form">
    				<div class="logo"><img src="img/logo.png" alt="logo" /></div>
    				<div class="form_group">
    					<input onkeyup="search(event)" type="text" id="city" class="input_txt" placeholder="请输入查询的天气" />
    					<button class="input_sub" onclick="search(event)">
    						搜 索
    					</button>
    				</div>
    				<div class="hotkey">
    					<a href="javascript:;">北京</a>
    					<a href="javascript:;">上海</a>
    					<a href="javascript:;">广州</a>
    					<a href="javascript:;">深圳</a>
    				</div>
    			</div>
    			<ul class="weather_list" id="myUL">
    				<!-- <li>
    					<div class="info_type"><span class="iconfont">多云</span></div>
    					<div class="info_temp">
    						<b>低温</b>
    						~
    						<b>高温</b>
    					</div>
    					<div class="info_date"><span>日期</span></div>
    				</li> -->
    			</ul>
    		</div>
    
    	</body>
    
    </html>
    <script type="text/javascript">
    	//创建异步请对象
    	var xmlhttp = new XMLHttpRequest();
    	//点击搜索
    	function search(e) {
    		if (e.keyCode == 13 || e.type == 'click') {
    			//发送
    			//获取用户输入的城市名
    			var cityName = document.getElementById("city").value;
    			if (!cityName) {
    				alert("请输入城市名");
    				return; //直接结束掉
    			}
    			xmlhttp.open("GET", "http://wthrcdn.etouch.cn/weather_mini?city=" + cityName, true);
    			xmlhttp.send();
    			//准备接收后台响应的结果
    			xmlhttp.onreadystatechange = function() {
    				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    					//获取后台返回的JSON字符串
    					var jsonStr = xmlhttp.responseText;
    					console.log(jsonStr);
    					//把JSON字符串转换成JSON对象
    					var jsonObj = JSON.parse(jsonStr);
    					//解析JSON数据展示到页面
    					var jsonArr = jsonObj.data.forecast;
    					parseJSON(jsonArr);
    				}
    			}
    		}
    	}
    
    	function parseJSON(jsonArr) {
    		var ul = document.getElementById("myUL");
    		//动态的创建li标签,li标签之间的数据,是从json中解析出来的,并且还要li标签放到ul之间
    
    		/* 
    		 <li>
    		 	<div class="info_type"><span class="iconfont">多云</span></div>
    		 	<div class="info_temp">
    		 		<b>低温</b>
    		 		~
    		 		<b>高温</b>
    		 	</div>
    		 	<div class="info_date"><span>日期</span></div>
    		 </li> 
    		 */
    		var li = '';
    		for (var i = 0; i < jsonArr.length; i++) {
    			var jsonEle = jsonArr[i];
    			li += `<li>
    		 	<div class="info_type"><span class="iconfont">${jsonEle.type}</span></div>
    		 	<div class="info_temp">
    		 		<b>${jsonEle.low}</b>
    		 		~
    		 		<b>${jsonEle.high}</b>
    		 	</div>
    		 	<div class="info_date"><span>${jsonEle.date}</span></div>
    		 </li>`
    		}
    
    		ul.innerHTML = li;
    	}
    </script>
    
    

    效果如图:
    在这里插入图片描述

    展开全文
  • 这是天气预报网里面有免费的js天气预报代码 http://www.tianqi.com/dingzhi/ http://www.tianqi.com/plugin/

     

    这是天气预报网里面有免费的js天气预报代码

    http://www.tianqi.com/dingzhi/

    http://www.tianqi.com/plugin/

    展开全文
  • 大陆仔天气预报是一个纯JS版的天气预报,调用了新浪的天气预报接口实现。具体功能如下: ● 支持根据用户IP来显示当地的天气预报 (使用了魔镜的 API) ● 支持用户搜索中国和国外城市的天气预报 ● 将能够查询未来...
  • js天气预报 html页面

    热门讨论 2011-03-07 15:53:20
    js天气预报 天气预报代码 页面好的js天气预报js天气预报js天气预报js天气预报
  • } 3、js实现动态数据绑定 //index.js //获取应用实例 var app = getApp() var day = ["今天","明天","后天"]; Page({ data: { day : day, }, onLoad: function () { console.log('onLoad') var that = this that....
  • 根据空心菜发的代码改了下,去除无效的CSS文件。加上了带链接功能。 使用腾讯IP数据库确保精准地区。 有链接调用weather.js,演示请点http://www.ydy.me/top10.html 无链接调用weather-nolink.js,演示请点...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,201
精华内容 2,080
关键字:

js天气预报代码