实现页面每分钟刷新一次,显示自增变量且增幅为1,应用response对象实现页面自动刷新功能,程序运行结果如图所示。请根据以上要求写出完整代码。
时间: 2024-10-23 08:14:39 浏览: 11
为了实现在页面上每分钟自动刷新一次,显示自增变量并增加1,我们可以使用JavaScript结合HTML和服务器端的简单操作。下面是一个使用Node.js和Express作为后端服务的例子,假设我们有一个简单的Express应用,并且使用EJS模板引擎来渲染动态内容。
首先,安装必要的依赖:
```bash
npm init -y
npm install express ejs
```
然后创建一个名为`server.js`的文件,编写以下代码:
```javascript
const express = require('express');
const app = express();
const port = 3000;
// 设置静态目录
app.use(express.static('public'));
// 使用EJS模板引擎
app.set('view engine', 'ejs');
let counter = 0; // 自增变量
// 定义每分钟更新计数器的方法
setInterval(() => {
counter++;
app.locals.counter = counter; // 更新模板里的counter变量
}, 60000); // 每分钟更新一次
// 主页路由,返回自增变量值
app.get('/', (req, res) => {
res.render('index', { counter }); // 渲染模板并传递计数器变量
});
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
```
接下来,在项目的`public`目录下创建一个名为`index.ejs`的模板文件:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Auto Refresh Counter</title>
</head>
<body>
<h1>计数器: <%= counter %></h1>
<!-- 这里可以加上一个按钮或者代码片段来触发页面刷新 -->
<script>
function refreshPage() {
location.reload(); // 页面刷新
}
setInterval(refreshPage, 60000); // 每分钟刷新一次页面
</script>
</body>
</html>
```
现在,当你访问`http://localhost:3000`时,你会看到一个不断递增的计数器。每次页面刷新,计数器都会加1。
阅读全文