JS实现为控件添加倒计时功能
来源:互联网 发布:淘宝宝贝口袋在哪 编辑:程序博客网 时间:2024/05/29 03:19
一.概述
在有些报表需求中,需要为控件添加倒计时功能,限制到某一个时间点后能进行一项操作或不能进行某项操作,比如查询,导出功能等等,又需要人性化地显示还有多少时间,即倒计时功能,比如下图中我们限制这个报表在每天10点后才能查询
当倒计时结束的时候,查询功能可用
这种功能如何实现的呢
二.实现思路
主要原理是利用控件的setEnable(true)/setEnable(false)来进行设置控件的可用与不可用状态,在获取时间的过程中,需要利用到JS中的获取时间,利用JS的定时器函数setInterval(function(){},time)来进行定时取得倒时时,并判断倒计时是否结束。
三.实现过程
1、修改模板
以自带的gettingstarted.cpt模板为例,设置初始化时查询按钮不可用,如下图
2、添加倒计时控制功能
为了简化控制流程,把JS代码直接写在查询按钮的初始化后事件中,如下图
代码如下:
1. var h=10;//限制几点可查询
2. var m=00;//限制几分可查询
3. var s=00;//限制几秒可查询
4. //格式化时间
5. function timeToString(a){
6. //小时
7. var s='还有'
8. s+=parseInt(a/3600)+'时';
9. //分
10. s+=parseInt(a % 3600 /60)+'分';
11. //秒
12. s+=parseInt(a % 60)+'秒可查';
13. return s;
14. }
15. var date1=new Date();
16. var date2=new Date();
17. //设置预置可查时间
18. date1.setHours(h);
19. date1.setMinutes(m);
20. date1.setSeconds(s);
21. //比如时间
22. var d=(date1-date2)/1000;
23. //如果初始化时可用,就启用按钮
24. if(d<0){
25. this.setValue('查询');
26. this.setEnable(true);
27. } else {
28. var btn=this;
29. //显示倒计时时间
30. btn.setValue(timeToString(d));
31. //设置不可用
32. btn.setEnable(false);
33. //定时器函数
34. setInterval(function(){
35. //重新设置时间
36. date1=new Date();
37. date2=new Date();
38. date1.setHours(h);
39. date1.setMinutes(m);
40. date1.setSeconds(s);
41. //重新当前时间与设定时间的时间差
42. d=(date1-date2)/1000;
43. if(d<0){
44. btn.setValue('查询');
45. btn.setEnable(true);
46. } else {
47. btn.setValue(timeToString(d));
48. btn.setEnable(false);
49. }
50. },1000);
51. }
3.预览
最终效果如上图.
- JS实现为控件添加倒计时功能
- js实现倒计时功能
- js实现倒计时功能
- js实现倒计时功能
- js实现倒计时功能
- js实现倒计时功能
- Js实现倒计时功能
- 用JS实现倒计时功能
- 为年度评选活动添加倒计时功能
- 使用开源库控件实现倒计时功能
- php和js一起实现倒计时功能
- cocos2d-js 倒计时功能。
- MFC为控件添加ToolTips提示功能
- 为控件添加Tip提示功能CToolTipCtrl
- 简单的JS实现按钮触发倒计时功能
- JS 添加收藏 设为首页功能
- 实现倒计时功能
- JavaScript实现倒计时功能
- 气象自动监测站QT程序设计(二):串口通信与数据处理
- F1V3.0-图形-本地自成图jar类库安装到本地仓库及私服
- Notepad++快捷键运行Python
- Linux通过SSH访问中文乱码问题(以secureCRT为例)
- spring-mvc jsp表单提交 不同POJO的相同属性[同名参数]
- JS实现为控件添加倒计时功能
- Eclipse取消或者关闭tomcat所有自动发布(部署)方法
- WMS GetFeatureInfo (Layers)——WMS获取要素信息(图层)
- Common Beanutils的简易理解
- HTML5 -img video flash等 在table 的td中有空隙问题
- idea 使用快捷键
- iOS响应式架构
- 损失函数 center_loss triplet loss
- zookeeper的启动方式