我正在构建天气应用程序，作为使用Express＆ejs进行练习的一种方式。 我正在使用app.get从darkSky的API请求信息。 调用一次即可成功，我也可以在index.ejs文件中呈现它。
我想使用使用setInterval调用的moment.js添加实时时钟功能。 （这是已注释掉的函数'updateTime（）'）
由于我不想每次时钟更新时都调用天气API，因此我认为它必须在app.get调用之外。
我不确定如何设置它，因为似乎我无法使用DOM操作来添加时钟功能。
有没有办法在我的ejs中获得动态内容，这与我的API调用是分开的？
（ps-代码段不会运行，我只是想添加代码以方便参考）
const path = require('path')
const express = require('express')
const request = require('request')
const moment = require('moment')
const app = express();
const publicDirectoryPath = path.join(__dirname, '/public')
app.use(express.static(publicDirectoryPath))
app.set('view engine', 'ejs');
let sush = 'e20fe780791cad1d4d4d7b8484f970a5';
let lat = 39.892692;
let lng = -86.290568;
let apiUrl = `https://api.darksky.net/forecast/${sush}/${lat},${lng}`;
// function updateTime() {
// let dayTime = moment().format("dddd h:mma")
// console.log(dayTime)
// }
// setInterval(updateTime, 5000)
// app.use("/", function (req, res){
let dayTime;
function updateTime() {
dayTime = moment().format("dddd h:mma")
console.log(dayTime)
return dayTime
}
setInterval(updateTime, 5000)
// res.render('index.ejs', {dayTime:dayTime})
// })
app.get('/', function (req, res) {
request(apiUrl, function (error, response, body) {
if (error){
console.log('hey, hi, i didnt work - am i internet?')
}
weather_json = JSON.parse(body);
let dataDayThree = weather_json.daily.data[2].time;
let dataDayFour = weather_json.daily.data[3].time;
let dataDayFive = weather_json.daily.data[4].time
let daytwo = moment.unix(weather_json.daily.data[1].time).format("dddd")
let daythree = moment.unix(dataDayThree).format("dddd")
let dayfour = moment.unix(dataDayFour).format("dddd")
let dayfive = moment.unix(dataDayFive).format("dddd")
let iconCurrentlyOut = weather_json.currently.icon;
let iconTodayOut = weather_json.daily.data[0].icon;
let iconTomorrowOut = weather_json.daily.data[1].icon;
let iconDay3Out = weather_json.daily.data[2].icon;
let iconDay4Out = weather_json.daily.data[3].icon;
let iconDay5Out = weather_json.daily.data[4].icon;
function iconLooper(x){
switch (x) {
case 'rain':
iconCurrently = "https://res.cloudinary.com/raphaeladdile/image/upload/s--lV_oG1pX--/v1515194565/rainy-6_pzlrlc.svg";
break;
case 'snow':
iconCurrently = "https://res.cloudinary.com/raphaeladdile/image/upload/s--EsqjgOhi--/v1515194606/snowy-6_zl9kwx.svg";
break;
case 'clear-day':
iconCurrently = "https://res.cloudinary.com/raphaeladdile/image/upload/s---6vDoixr--/v1515194528/day_shry4k.svg";
break;
case 'clear-night':
iconCurrently = "https://res.cloudinary.com/raphaeladdile/image/upload/s--CxSp0zXi--/v1515194530/night_quuh8p.svg";
break;
case 'sleet':
iconCurrently = "https://res.cloudinary.com/raphaeladdile/image/upload/s--yeTLFcMd--/v1515194570/rainy-7_sdbkyl.svg";
break;
case 'wind':
iconCurrently = "https://res.cloudinary.com/raphaeladdile/image/upload/s--ivgWegRI--/v1515194500/cloudy_vqbnvk.svg"
break;
case 'fog':
iconCurrently = "https://res.cloudinary.com/raphaeladdile/image/upload/s--ivgWegRI--/v1515194500/cloudy_vqbnvk.svg"
break;
case 'cloudy':
iconCurrently = "https://res.cloudinary.com/raphaeladdile/image/upload/s--ivgWegRI--/v1515194500/cloudy_vqbnvk.svg";
break;
case 'partly-cloudy-day':
iconCurrently = "https://res.cloudinary.com/raphaeladdile/image/upload/s--pkzBuC_i--/v1515194500/cloudy-day-1_n3vykl.svg";
break;
case 'snow':
iconCurrently = "https://res.cloudinary.com/raphaeladdile/image/upload/s--DdrT7Iph--/v1515194500/cloudy-night-1_ro8fb5.svg";
break;
default:
console.log('i dont know whats goin on')
iconCurrently = "https://res.cloudinary.com/raphaeladdile/image/upload/s--ivgWegRI--/v1515194500/cloudy_vqbnvk.svg";
defaultTest = "i am an unkno"
}
return iconCurrently
}
///////////////////////////////////////////////////////////////////////////////////////////////
// if default in switch is activated add in what the actual weather is, like 'thunderstorms' //
//////////////////////////////////////////////////////////////////////////////////////////////
// function updateTime() {
// dayTime = moment().format("dddd h:mma")
// console.log(dayTime)
// return dayTime
// }
// setInterval(updateTime, 5000)
let weather = {
// date & time
//dayTime: updateTime(),
date: moment().format("MMM Do. YYYY"),
// current
currentTemp: Math.round(weather_json.currently.temperature),
summary: weather_json.currently.summary,
currentIcon: iconLooper(iconCurrentlyOut),
currentFeelLike: Math.round(weather_json.currently.apparentTemperature),
currentHumidity: Math.round(100 * (weather_json.currently.humidity)),
dailySummary: weather_json.daily.summary,
todayHi: Math.round(weather_json.daily.data[0].temperatureMax),
todayLo: Math.round(weather_json.daily.data[0].temperatureMin),
todayIcon: iconLooper(iconTodayOut),
// tomorrow
dayTwo: daytwo,
dayTwoHi: Math.round(weather_json.daily.data[1].temperatureMax),
dayTwoLo: Math.round(weather_json.daily.data[1].temperatureMin),
dayTwoIcon: iconLooper(iconTomorrowOut),
// day three
dayThree: daythree,
dayThreeHi: Math.round(weather_json.daily.data[2].temperatureMax),
dayThreeLo: Math.round(weather_json.daily.data[2].temperatureMin),
dayThreeIcon: iconLooper(iconDay3Out),
// day four
dayFour: dayfour,
dayFourHi: Math.round(weather_json.daily.data[3].temperatureMax),
dayFourLo: Math.round(weather_json.daily.data[3].temperatureMin),
dayFourIcon: iconLooper(iconDay4Out),
// day five
dayFive: dayfive,
dayFiveHi: Math.round(weather_json.daily.data[4].temperatureMax),
dayFiveLo: Math.round(weather_json.daily.data[4].temperatureMin),
dayFiveIcon: iconLooper(iconDay5Out)
}
let weatherData = {
weather: weather
}
res.render('index', weatherData)
})
});
app.listen(8000);<!DOCTYPE html>
<head>
<title>weatherApp</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="container">
<!-- header
<div class="header">
<button class="refresh-btn" onClick="window.location.reload()">Refresh</button>
</div>
-->
<div class="row">
<!-- icon -->
<div class="column iconColumn">
<img class="currentWeatherIcon" src='<%=weather.currentIcon%>' />
</div>
<!-- descriptions -->
<div class="column description">
<button class="refresh-btn" onClick="window.location.reload()">Refresh</button>
<h5><%=weather.currentTemp%>°F | <%=weather.summary%></h5>
<h5>Feels like <%=weather.currentFeelLike%>° F | humidity <%=weather.currentHumidity%>%</h5>
</div>
</div>
<h6 class="daySummary"><%=weather.dailySummary%></h6>
<!-- table -->
<table>
<th>Today</th>
<th><%=weather.dayTwo%></th>
<th><%=weather.dayThree%></th>
<th><%=weather.dayFour%></th>
<th><%=weather.dayFive%></th>
<tr>
<td>
<img src='<%=weather.todayIcon%>' />
<div class="hi-lo"><%=weather.todayHi%>°-<%=weather.todayLo%>°</div>
</td>
<td>
<img src='<%=weather.dayTwoIcon%>' />
<div class="hi-lo"><%=weather.dayTwoHi%>°-<%=weather.dayThreeLo%>°</div>
</td>
<td>
<img src='<%=weather.dayThreeIcon%>' />
<div class="hi-lo"><%=weather.dayThreeHi%>°-<%=weather.dayThreeLo%>°</div>
</td>
<td>
<img src='<%=weather.dayFourIcon%>' />
<div class="hi-lo"><%=weather.dayFourHi%>°-<%=weather.dayFourLo%>°</div>
</td>
<td>
<img src='<%=weather.dayFiveIcon%>' />
<div class="hi-lo"><%=weather.dayFiveHi%>°-<%=weather.dayFiveLo%>°</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
答案 0 :(得分：0)
为了进行DOM操作，必须像使用CSS一样将JS文件包含到HTML中。将您的<head>更改为此
<head>
<title>weatherApp</title>
<link rel="stylesheet" href="/css/style.css">
<script src="/js/script.js">
</head>
在js和css文件附近创建script.js目录，您可以在ejs模板中执行在其中添加的javascript。
答案 1 :(得分：0)
要使用客户端javascript显示简单的时钟，它与服务器呈现无关。您只需在ejs标记内的script文件内运行javascript代码即可。查看以下简单示例，您可以在https：// www.w3schools.com/js/上找到该示例：
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="startTime()">
<h3> Here is a simple clock.</h3>
<div id="clock"></div>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clock').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
// add zero in front of numbers < 10
function checkTime(i) {
if (i < 10) {i = "0" + i};
return i;
}
</script>
</body>
</html>