1
私はRaspberry piのCoderでHTML、CSS、Javascriptを学んでいます。現在、私は時間、日付、現在の天気を表示する簡単なページを作ろうとしています。 getWeather()機能の$.getJSONコールで何か問題が発生しています。Raspberry PiコーダーでopenweatherのJSON再発行を発行
$.getJSONに渡されたURLを入力すると正しく動作します（つまり、ページにJSONのすべての情報が読み込まれます）が、「天気予報」の文字列は表示されません。また、JSONまたはJSONPデータ型を要求するAJAX呼び出しを使用しようとしました。これらの方法のどちらも機能しませんでした。私は何が欠けていますか？
$(document).ready(function() {
//This code will run after your page loads
function displayTime() {
var current_time = new Date();
var hours = current_time.getHours();
var minutes = current_time.getMinutes();
var seconds = current_time.getSeconds();
var meridiem = "AM"; // default is AM
var day = current_time.getDay();
if(seconds < 10) {
seconds = "0" + seconds;
}
if(minutes < 10) {
minutes = "0" + minutes;
}
// Set the meridiem for a 12hr clock
if(hours > 12) {
hours -= 12;
meridiem = "PM"
} else {
meridiem = "AM"
}
var clock_div = document.getElementById('clock');
clock_div.innerText = hours + ":" + minutes + ":" + seconds + " " + meridiem;
// Depending on the value of 'day', set the corresponding string
var day_div = document.getElementById('day');
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var today = weekday[current_time.getDay()];
day_div.innerText = today;
// Get the date information
var date = current_time.getDate();
// Get the year
var year = current_time.getFullYear();
// Get the month and set the string
var month = new Array(12);
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
var this_month = month[current_time.getMonth()];
// set the string
var date_div = document.getElementById('date');
date_div.innerText = this_month + " " + date + " " + year;
}
function getWeather() {
var api_key = REMOVED; // API key for open weather
var weather_api = "http://api.openweathermap.org/data/2.5/weather?lat=40.115&lon=-88.27&units=imperial&appid=" + api_key;
var weather_div = document.getElementById('weather');
$.getJSON(weather_api).then(function(result){
//alert("City: "+result.city.name);
//alert("Weather: "+ result.list[0].weather[0].description);
weather_div.innerText = "Got Weather";
});
//weather_div.innerText = "Got Weather";
}
// This runs the displayTime function the first time
displayTime();
getWeather();
// This makes the clock "tick" repeatedly by calling it every 1000 ms
setInterval(displayTime, 1000);
setInterval(getWeather, 2000);
});
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Coder</title>
<meta charset="utf-8">
<!-- Standard Coder Includes -->
<script>
var appname = "{{app_name}}"; //app name (id) of this app
var appurl = "{{&app_url}}";
var staticurl = "{{&static_url}}"; //base path to your static files /static/apps/yourapp
</script>
<link href="/static/apps/coderlib/css/index.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/static/common/js/jquery.min.js"></script>
<script src="/static/common/ace-min/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/apps/coderlib/js/index.js"></script>
<script>
Coder.addBasicNav();
</script>
<!-- extra inludes to get weather from OpenWeather -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="js/vendor/jquery-ui.min.js"></script>
<!-- End Coder Includes -->
<!-- This app's includes -->
<link href="{{&static_url}}/css/index.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="{{&static_url}}/js/index.js"></script>
<!-- End apps includes -->
</head>
<body>
<div id='day'></div><br>
<div id='date'></div>
<div id='clock'></div>
<div id='weather'></div>
</body>
</html>
CSS：
body {
background-color: black;
}
#day {
height:100px;
width: 300px;
margin-left: 10px;
padding-top: 50px;
position: fixed;
top: 0px; left: 20px;
font-family: courier, monospace;
text-align: center;
color: white;
font-size: 30px;
font-weight: bold;
}
#date {
height:100px;
width: 300px;
margin-left: 10px;
padding-top: 50px;
position: fixed;
top: 50px; left: 20px;
font-family: courier, monospace;
text-align: center;
color: white;
font-size: 20px;
}
#clock {
height:100px;
width: 300px;
margin-left: 10px;
padding-top: 50px;
position: fixed;
top: 100px; left: 20px;
font-family: courier, monospace;
text-align: center;
color: white;
font-size: 20px;
}