再弱弱的问一个问题，如何用Nodejs做一个计时器

再弱弱的问一个问题，如何用Nodejs做一个计时器

做一个计时器，让时间在一个控件上显示出来。setInterval可以定时，只是如何定时的时候在控件上显示呢？不刷新页面用ajax可以吗？那又怎么实时改变控件内容呢？我只知道在render的时候通过加载.ejs等文件做到。刚开始看nodejs的菜鸟,请大家帮忙。最好有个实例代码我直接运行下就更好了。呵呵。先谢了哈

8 回复

当然可以！以下是如何使用 Node.js 和一些常见的库（如 Express 和 EJS）来实现一个简单的计时器，并在网页上实时显示时间。

实现思路

  1. 后端：使用 Node.js 和 Express 创建一个简单的 HTTP 服务器。
  2. 前端：使用 EJS 模板引擎来渲染页面，并通过 AJAX 请求从后端获取更新的时间数据。
  3. 定时更新：使用 setInterval 定期更新时间，并通过 AJAX 将新的时间发送到客户端。

示例代码

1. 安装必要的依赖

首先，确保你已经安装了 Node.js。然后，在项目目录中初始化一个新的 Node.js 项目并安装所需的依赖：

npm init -y
npm install express ejs axios

2. 创建服务器和路由

创建一个名为 server.js 的文件，并编写以下代码：

const express = require('express');
const app = express();
const port = 3000;

// 设置模板引擎为 EJS
app.set('view engine', 'ejs');

// 静态文件目录
app.use(express.static('public'));

// 主页路由
app.get('/', (req, res) => {
    res.render('index');
});

// 获取当前时间的 API 路由
app.get('/time', (req, res) => {
    const currentTime = new Date().toLocaleTimeString();
    res.send(currentTime);
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}/`);
});

3. 创建前端页面

创建一个名为 views 的目录，并在其中创建一个 index.ejs 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计时器</title>
</head>
<body>
    <h1>当前时间:</h1>
    <div id="current-time">Loading...</div>

    <script src="/axios.min.js"></script>
    <script>
        function updateTime() {
            axios.get('/time')
                .then(response => {
                    document.getElementById('current-time').innerText = response.data;
                })
                .catch(error => {
                    console.error("Error fetching time:", error);
                });
        }

        // 初始加载
        updateTime();

        // 每秒更新一次
        setInterval(updateTime, 1000);
    </script>
</body>
</html>

4. 运行服务器

在命令行中运行以下命令启动服务器：

node server.js

现在，你可以打开浏览器访问 http://localhost:3000，你应该能看到一个不断更新的计时器。

解释

  • 后端：我们使用 Express 创建了一个简单的 HTTP 服务器，并设置了一个 /time 路由来返回当前时间。
  • 前端：我们使用 EJS 渲染了一个 HTML 页面，并使用 Axios 发送 AJAX 请求来获取时间。通过 setInterval 每秒更新一次时间。

这样，你就可以实现实时更新计时器的功能了。希望这个示例对你有帮助！


前台实现用 HTML ＋ JAVASCRIPT

正巧有一个短信倒计时的例子给你： function Timer(){ //singleton pattern; if(typeof Timer.instance ===“object”){ return Timer.instance; } Timer.instance = this;

        //private var
        var _MAX_TIME = 0
            ,currentTime=0
            ,clock=null
            ,state = false;

    //public function 
    this.initial = function(MAX_TIME){
      _MAX_TIME=MAX_TIME;
      return this;
    }

    this.start = function(){
        state = true;
        currentTime=_MAX_TIME;
        clearInterval(clock);
        clock = setInterval(function(){
                currentTime--;
                updateContent();
                if(currentTime&lt;=0){
                  currentTime = _MAX_TIME;
                  state=false;
                  clearInterval(clock);
                }
        },1000);
    }

    this.stop = function(){
        currentTime = _MAX_TIME;
        state= false;
        clearInterval(clock);
        return this;
    }

    //private function 
    function updateContent(){
        //update the content;
        console.log(currentTime);
    }
  }

使用方式： var timer = new Timer(); timer.initial(60)//设定60秒倒计时 timer.start();//开始倒计时，可以控制台看

自己重写updateContent()方法或者做继承，你自己选吧

控制台下面的程序我也能实现，关键是想显示在一个页面上不知道怎么做。理论上可以在setInterval的函数中每次post，然后重新render这个页面，让那个控件重新显示传入的值。但是那样会不会性能很慢？有没有不刷新页面，而只修改单个控件内容的方法？多谢了！

求demo，一直不知道怎么做。我能想到的办法就是在setInterval的函数中，每次post一下，然后重新render页面。但是那样性能估计会很慢吧。应该有不重新render而能改变某个控件的办法吧。有人说用ajax，用了下，估计是用的方法不对，还是不行。

不就是显示当前时间么？

是啊

为了实现一个计时器，并在网页上实时显示计时结果，我们可以使用Node.js结合Express框架来搭建后端服务，并使用EJS模板引擎渲染前端页面。此外，我们还可以利用setInterval函数来周期性地更新计时器的时间，并使用AJAX技术实现实时更新页面内容。

以下是一个简单的实现示例：

  1. 安装依赖： 确保你的项目中已经安装了express和ejs：

    npm install express ejs

  2. 创建服务器端代码 (server.js)：

    const express = require('express');
const app = express();
const port = 3000;

// 设置视图引擎为 EJS
app.set('view engine', 'ejs');

let timePassed = 0;

// 每秒更新时间
setInterval(() => {
  timePassed++;
}, 1000);

app.get('/', (req, res) => {
  res.render('index', { time: timePassed });
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

  3. 创建前端页面 (views/index.ejs)：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Timer</title>
</head>
<body>
    <h1 id="timer">Time Passed: <%= time %> seconds</h1>
    <script>
        // 使用 setInterval 来每秒更新时间
        setInterval(() => {
            fetch('/')
                .then(response => response.text())
                .then(data => {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(data, "text/html");
                    document.getElementById('timer').innerText = `Time Passed: ${doc.querySelector('#timer').innerText.split(': ')[1]} seconds`;
                });
        }, 1000);
    </script>
</body>
</html>

以上代码实现了基本的计时器功能，每秒钟更新一次页面上的时间。前端通过fetch请求从服务器获取最新的计时信息，并更新页面内容。

你可以将上述代码分别保存到对应的文件中（例如，server.js和views/index.ejs），然后运行node server.js启动服务，访问http://localhost:3000即可看到效果。

回到顶部