Das ist die HTML
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=320, user-scalable=no, initial-scale=1">
<script src="jquery.min.js" charset="utf-8"></script>
<script src="jquery.simpleWeather.min.js" charset="utf-8"></script>
<script src="functions.js" type="text/javascript"></script>
<script src="weather.js" type="text/javascript"></script>
<style type="text/css">@import url("style.css");</style>
<style type="text/css">@import url("background.css");</style>
<style type="text/css">@import url("app.css");</style>
<style type="text/css">@import url("custom.css");</style>
</head>
<body onload="handle()">
<div id="background"></div>
<div id="locationSelectorBG"></div>
<div id="locationSelector"></div>
<div id="locationLeft" class="locationArrows"></div>
<div id="locationRight" class="locationArrows"></div>
<div id="timeWrap" class="">
<div id="mainDiv">
<table id="divtable">
<tr><td id="hr1">
<script type="text/javascript">
//document.write('<td><img src="'+getHour(AM_PM).substring(0,1)+'.png" id="hr1" name="hr1"></td>');
document.write(getHour(AM_PM).substring(0,1));
</script></td><td id="hr2">
<script type="text/javascript">
//document.write('<td><img src="'+getHour(AM_PM).substring(1,2)+'.png" id="hr2" name="hr2"></td>');
document.write(getHour(AM_PM).substring(1,2));
</script></td>
<td><img src="NOTamNORpm.png" id="ampm" name="ampm"></td>
<td id="mn1"><script type="text/javascript">
document.write(getMinute().substring(0,1));
</script></td><td id="mn2">
<script type="text/javascript">
document.write(getMinute().substring(1,2));
</script></td>
</tr>
</table>
</div>
<div id="day">
<script type="text/javascript">
//document.write("<img width=250 src="+Day()+".png>");
document.write(Day());
</script>
</div>
<div id="month">
<script type="text/javascript">
//document.write("<img width=420 src="+Month()+".png>");
document.write(Month());
</script>
</div>
<div id="dayNumeric">
<script type="text/javascript">
//document.write("<img width=150 src="+DayNumeric()+".png>");
document.write(DayNumeric().replace('date',''));
</script>
</div>
<div id="year">
<script type="text/javascript">
//document.write("<img width=180 src="+Year()+".png>");
document.write(Year());
</script>
</div>
</div>
<div id="weather" class="forecast0">
<div id="Day0Weather" class="weatherSection">
<img id="weatherThumb" class="weatherThumb"/>
<h2 id="weatherCity" class="weatherCity" ></h2>
<div id="weatherTemp" class="weatherTemp" ></div>
<div id="weatherCurrently" class="weatherCurrently" ></div>
</div>
<div id="Day1Weather" class="weatherSection">
<img id="weatherThumb1" class="weatherThumb" />
<h2 id="weatherCity1" class="weatherCity" >Today</h2>
<div id="weatherTemp1" class="weatherTempHighLow" >
<div id="weather1High"></div>
<div id="weather1Low"></div>
</div>
<div id="weatherCurrently1" class="weatherCurrently" ></div>
</div>
<div id="Day2Weather" class="weatherSection">
<img id="weatherThumb2" class="weatherThumb" />
<h2 id="weatherCity2" class="weatherCity" >Tomorrow</h2>
<div id="weatherTemp2" class="weatherTempHighLow" >
<div id="weather2High"></div>
<div id="weather2Low"></div>
</div>
<div id="weatherCurrently2" class="weatherCurrently" ></div>
</div>
</div>
<div id="loader"></div>
<div id="unlock">KölscheJeck</div>
</div>
<script>
getWeather();
var currentWeatherShowing = 0;
function tapWeather(){
if(currentWeatherShowing>1)
currentWeatherShowing=0;
else
currentWeatherShowing++;
var t = $(this);
t.attr('class','forecast'+currentWeatherShowing);
$('#timeWrap').removeClass('showSelector');
}
$('#weather').click(function(){
if(currentWeatherShowing>1)
currentWeatherShowing=0;
else
currentWeatherShowing++;
var t = $(this);
t.attr('class','forecast'+currentWeatherShowing);
var n = weather.themeName.toLowerCase();
$('#timeWrap').removeClass('showSelector');
if(n=="gravity-mauikek")
{
$('#weatherCity').removeClass('showSelector');
}
else
{
}
return false;
});
</script>
</body>
</html>
Das wo ich den Code eingebe
Code:
{ "units" : "Celsius" , "places" : [ { "cityName" : "Köln" , "zip" : "GMXX0018" },{ "cityName" : "Hamburg" , "zip" : "GMXX0049" }] , "lang" : "de-de", "theme":"","themeName":"default" }
Und des die Weather.js
Code:
var weather = {};
var TO, toShow;
var currentZip;
var temp;
var conditions;
function showSelector(el){
el.toggleClass('showSelector');
var wth = $('#weather');
wth.toggleClass('showSelector');
}
function listCities(){
//if(navigator.userAgent.toLowerCase().match("mozilla"))
// $('#timeWrap').hide();
$('#locationSelector').html('');
//populate locations selector
for(var l = 0 ; l<weather.places.length ; l++){
var cls="location";
var cty = weather.places[l];
console.log(cty.zip + "==" +currentZip);
if(cty.zip==currentZip || (!currentZip && l==0)){
cls="location active";
}
$('#locationSelector').append('<span ref="'+cty.zip+'" class="'+cls+'">'+cty.cityName+"</span>");
}
//Activate interactions
var loc = $('.location');
loc.click(function(){
var t = $(this);
t.addClass('active').siblings('span').removeClass('active');
loadingAnimation(true, t.attr('ref'));
});
$('#locationRight').addClass('visible');
locationArrows();
$('#timeWrap').click(function(){
var t = $(this);
showSelector(t);
var n = weather.themeName.toLowerCase();
if(n=="gravity-mauikek")
{
showSelector($('#weatherCity'));
}
});
}
var currentPage = 1;
function locationArrows()
{
var right = $('#locationRight');
var left = $('#locationLeft');
var sel = $('#locationSelector');
right.click(function(){
left.addClass('visible');
var pos = sel.position().left;
if(currentPage<weather.places.length){
//slideLeft
var lft = pos-320;
sel.attr('style','-webkit-transform: translateX('+lft+'px);');
currentPage ++;
}
if(currentPage==weather.places.length){
right.removeClass('visible');
}
});
left.click(function(){
var pos = sel.position().left;
right.addClass('visible');
if(currentPage>1)
{
var lft = pos+320;
sel.attr('style','-webkit-transform: translateX('+lft+'px);');
currentPage--;
if(currentPage==1){
left.removeClass('visible');
}
}
});
}
function loadingAnimation(fadeOut, zip)
{
if(fadeOut){
$('#loader').addClass('visible');
renderWeather(zip);
}
else
$('#loader').removeClass('visible');
}
function renderWeather(z)
{
currentZip = z;
if(TO)
clearTimeout(TO);
$.simpleWeather({
//location: cLoc,
zipcode: currentZip,
unit: temp,
success: function(weather) {
var region = ', ' + weather.region;
if(region == ', ')
{
region = ', ' + weather.country;
}
var curr0 = (conditions) ? conditions[weather.code].toLowerCase() : weather.currently;
var curr1 = (conditions) ? conditions[weather.today.code].toLowerCase() : weather.forecast;
var curr2 = (conditions) ? conditions[weather.tomorrow.code].toLowerCase() : weather.tomorrow.forecast;
$("#weatherThumb").attr('src', weather.image[0]);
$("#weatherCity").html(weather.city);
$("#weatherTemp").html(weather.temp+'° '+weather.units.temp);
$("#weatherCurrently").text(curr0);//weather.currently);
$('#weatherCurrently1').text(curr1);//weather.forecast);
$('#weatherCurrently2').text(curr2);//weather.tomorrow.forecast);
$("#weatherCity1").html('Heute');
$("#weatherCity2").html('Morgen');
$('#weather1High').html('<span class="label">Hoch: </span><span class="bold">'+weather.high +'° </span>'+weather.units.temp);
$('#weather1Low').html('<span class="label">Tief: </span><span class="bold">'+weather.low +'° </span>'+weather.units.temp);
$('#weather2High').html('<span class="label">Hoch: </span><span class="bold">'+weather.tomorrow.high +'° </span>'+weather.units.temp);
$('#weather2Low').html('<span class="label">Tief: </span><span class="bold">'+weather.tomorrow.low +'° </span>'+weather.units.temp);
$("#weatherThumb1").attr('src', weather.image[1]);
$("#weatherThumb2").attr('src', weather.tomorrow.image);
TO = setTimeout('getWeather()', 600000);
setTimeout(function(){loadingAnimation(false);},500);
},
error: function(error) {
$("#weatherThumb").attr('src', '');//replace with loading
$("#weatherCity").html('');
$("#weatherTemp").html('');
$("#weatherCurrently").text('');
$('#weatherCurrently1').text('');
$("#weatherCity1").html('');
$('#weather1High').html('');
$('#weather1Low').html('');
$("#weatherThumb1").attr('');
$('#weatherCurrently2').text('');
$("#weatherCity2").html('');
$('#weather2High').html('');
$('#weather2Low').html('');
$("#weatherThumb2").attr('');
TO = setTimeout('getWeather()',1000);
}
});
}
function getWeather(z){
loadingAnimation(false);
if(!weather.places){
$('#loader').ajaxError(function(e, xhr, settings, exception) {
if(isArray(weather.places)){
if(weather.places.length>1)
listCities();
currentZip = weather.places[0].zip;
}
else
currentZip = weather.places.zip;
renderWeather(currentZip);
});
//GET Weather.txt
$.get('weather.txt', function(d){
weather = eval("("+d+")");
temp = weather.units.substr(0,1).toLowerCase();
var lang = (weather.lang)?weather.lang:"en-us";
$.get('lang/'+lang+'.txt', function(l){
conditions = eval("("+l+")");
if(isArray(weather.places)){
if(weather.places.length>1)
listCities();
currentZip = weather.places[0].zip;
}
else
currentZip = weather.places.zip;
renderWeather(currentZip);
});
});
}
else
{
renderWeather(currentZip);
}
}
![[Bild: u55o0rvbtghkk2066qsk.png]](https://iszene.com/uploads/u55o0rvbtghkk2066qsk.png)