Question

我运行的脚本运行良好，但我需要一个额外的城市搜索字段，我对此功能有一些问题。

这是我这次的代码。

jQuery代码

    $(function () { var DEG = 'c'; var weatherDiv = $('#weather'), scroller = $('#scroller'), location = $('div.location');
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(locationSuccess, locationError);
    } else {
        showError("Your browser does not support Geolocation!");
    }
function locationSuccess(position) {
    try {
        var cache = localStorage.weatherCache && JSON.parse(localStorage.weatherCache);
        var d = new Date();
        if (cache && cache.timestamp && cache.timestamp > d.getTime() - 30 * 60 * 1000) {
            var offset = d.getTimezoneOffset() * 60 * 1000;
            var city = cache.data.city.name;
            var country = cache.data.city.country;
            $.each(cache.data.list, function () {
                var localTime = new Date(this.dt * 1000 - offset);
                addWeather(
                    this.weather[0].icon,
                    moment(localTime).calendar() + ' Uhr',
                    this.weather[0].description,
                    '<span class="forecast-temp-blue">' + convertTemperature(this.main.temp_min) + '°' + DEG + '</span> | <span class="forecast-temp-red">' + convertTemperature(this.main.temp_max) + '°' + DEG + '</span>',
                    '<b>' + this.main.humidity + '%</b>',
                    '<b>' + miles2km(this.wind.speed) + '</b>',
                    '<b>' + convertDeg2Comp(this.wind.deg) + '</b>'
                );
            });
            location.html(city + ', <b>' + country + '</b>');
            weatherDiv.addClass('loaded');
            showSlide(0);
        } else {
            var weatherAPI = 'http://api.openweathermap.org/data/2.5/forecast?lat=' + position.coords.latitude + '&lon=' + position.coords.longitude + '&lang=de&callback=?';
            $.getJSON(weatherAPI, function (response) {
                localStorage.weatherCache = JSON.stringify({
                    timestamp: (new Date()).getTime(),
                    data: response
                });
                locationSuccess(position);
            });
        }
    } catch (e) {
        showError("We can't find information about your city!");
        window.console && console.error(e);
    }
}

function addWeather(icon, day, description, temperature, humidity, windspeed, winddeg) {
    var markup = '<li>' +
        '<div class="row-body">' +
        '<div class="forecast-day">' + day + '</div>' +
        '<div class="forecast-cond">' + description + '</div>' +
        '<img src="assets/img/icons/' + icon + '.png" /><br>' +
        '<div class="forecast-left-side">' +
        '<div class="forecast-temp"><img src="assets/img/icons/temp.png" />' + temperature + '</div>' +
        '<div class="humidity"><img src="assets/img/icons/drop.png" />' + humidity + '</div>' +
        '</div>' +
        '<div class="forecast-right-side">' +
        '<div class="wind"><img src="assets/img/icons/wind.png" />' + windspeed + ' km/h</div>' +
        '<div class="windr"><img src="assets/img/icons/windr.png" />' + winddeg + '</strong></div>' +
        '</div></div></li>';
    scroller.append(markup);
}
var currentSlide = 0;
weatherDiv.find('a.previous').click(function (e) {
    e.preventDefault();
    showSlide(currentSlide - 1);
});
weatherDiv.find('a.next').click(function (e) {
    e.preventDefault();
    showSlide(currentSlide + 1);
});
$(document).keydown(function (e) {
    switch (e.keyCode) {
    case 37:
        weatherDiv.find('a.previous').click();
        break;
    case 39:
        weatherDiv.find('a.next').click();
        break;
    }
});
function showSlide(i) {
    var items = scroller.find('li');
    if (i >= items.length || i < 0 || scroller.is(':animated')) {
        return false;
    }
    weatherDiv.removeClass('first last');
    if (i == 0) {
        weatherDiv.addClass('first');
    } else if (i == items.length - 1) {
        weatherDiv.addClass('last');
    }
    scroller.animate({
        left: (-i * 100) + '%'
    }, function () {
        currentSlide = i;
    });
}
function locationError(error) {
    switch (error.code) {
    case error.TIMEOUT:
        showError("A timeout occured! Please try again!");
        break;
    case error.POSITION_UNAVAILABLE:
        showError('We can\'t detect your location. Sorry!');
        break;
    case error.PERMISSION_DENIED:
        showError('Please allow geolocation access for this to work.');
        break;
    case error.UNKNOWN_ERROR:
        showError('An unknown error occured!');
        break;
    }
}

function convertTemperature(kelvin) {
    return Math.round(DEG == 'c' ? (kelvin - 273.15) : (kelvin * 9 / 5 - 459.67));
}
function convertDeg2Comp(num) {
    val = Math.round((num - 22.5) / 45);
    arr = ["N", "NO", "O", "SO", "S", "SW", "W", "NW"];
    return arr[val % 8];
}
function miles2km(num) {
    val = (num / 0.62137).toFixed(2);
    return val;
}
function showError(msg) {
    weatherDiv.addClass('error').html(msg);
}

});

这是我的HTML代码

        <div id="weather">
      <div class="location"></div>
      <ul id="scroller">
        <!-- The forecast items will go here -->
      </ul>
      <a href="#" class="arrow previous">Previous</a> <a href="#" class="arrow next">Next</a>
      <form id="search">
        <input id="getcity" name="q" type="text" size="40" placeholder="Stadtname" onclick="httpGetCity()"/>
      </form>
      <input id="gloc" type="submit" title="W3C Geolocation" value="" />
    </div>

用户应该可以输入城市名称，并且天气数据应该显示在输入城市的同一个小部件中。

我们如何实现这一目标？

打开天气地图 - 为城市天气添加表格字段功能（Jquery）

0 个答案: