js实现网站引入天气预报功能

现在各大论坛或者博客中都会有天气预报，分享一下js实现网站引入天气预报功能完整代码

效果展示

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;
}

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>


    <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>

        </font>
    </section>

    <footer>
        <div>design and code by zsq</div>
    </footer>
    <script src="index.js"></script>
    <div style="text-align:center;">

    </div>

</body>

</html>