再弱弱的问一个问题,如何做一个计时器
发布于 11 年前 作者 zlfdtc1983 5255 次浏览 最后一次编辑是 8 年前

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

20 回复

前台实现用 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<=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,用了下,估计是用的方法不对,还是不行。

不就是显示当前时间么?

@zlfdtc1983 你要显示时间用new Date().getTime()的方式不行吗,写在updateContent()中,你的UI操作怎么做你自己的事了,$().html(“时间”)不行吗?

@zlfdtc1983 搜一下 javascript 显示当前时间,这根nodejs没关系

@huanghaiyang 貌似明白了,哈哈

@ringtail 呵呵。当时有点糊涂,貌似控件的显示完全是前端的事情,和nodejs没什么关系。谢了哈

@huanghaiyang 再问一下,在javascript 有document这个对象,在html中用document.conName.value就能改变控件的值x.现在我在nodejs中的ejs文件里面,运行,他说没有document这个对象。呵呵

@zlfdtc1983 木有事,我常有脑容量不足的时候…

@ringtail 再问一下,在javascript 有document这个对象,在html中用document.conName.value就能改变控件的值x.现在我在nodejs中的ejs文件里面运行,他说没有document这个对象。 你知道在ejs文件里面有没有类似的方法吗? 理论上ejs文件里<% %>之间的代码也应该是javascript,不知道为啥不行。

@zlfdtc1983 你没有明白这个过程,ejs最后要渲染为html文件,这个时候dom树才是建立的,也就是说你需要待你要操作的dom树建立了之后再进行操作。

@ringtail 啊,这样啊。我再补补基础知识。哈哈,多谢了。

@zlfdtc1983 没有对象的原因大概是你的js运行时,ejs还没有解析完毕,可以这样做:window.onload=function(){ document.getElementById(’’) … }

@zlfdtc1983 没事,共同进步

@huanghaiyang 嘿嘿,再打扰下,我window.onload这个是直接写在ejs文件里面还是写在render那个ejs文件的js文件里。 之前我调用的那个函数是ejs文件<% %>中的setTimeout里调用的。

@zlfdtc1983 ejs就是个html模板,写在ejs里 js都写在<script></script>里

@huanghaiyang 好的。多谢。

回到顶部