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