JavaScript在控件上添加倒计时功能的实现代码


Posted in Javascript onJuly 04, 2017

一.概述

在有些 报表 需求中,需要为控件添加倒计时功能,限制到某一个时间点后能进行一项操作或不能进行某项操作,比如查询,导出功能等等,又需要人性化地显示还有多少时间,即倒计时功能,比如下图中我们限制这个报表在每天10点后才能查询 

JavaScript在控件上添加倒计时功能的实现代码

JavaScript在控件上添加倒计时功能的实现代码

当倒计时结束的时候,查询功能可用 

JavaScript在控件上添加倒计时功能的实现代码

这种功能如何实现的呢

二.实现思路

主要原理是利用控件的setEnable(true)/setEnable(false)来进行设置控件的可用与不可用状态,在获取时间的过程中,需要利用到JS中的获取时间,利用JS的定时器函数setInterval(function(){},time)来进行定时取得倒时时,并判断倒计时是否结束。

三 .实现过程

1、修改模板

以自带的gettingstarted.cpt模板为例,设置初始化时查询按钮不可用,如下图  

JavaScript在控件上添加倒计时功能的实现代码

2、添加倒计时控制功能

为了简化控制流程,把JS代码直接写在查询按钮的初始化后事件中,如下图

JavaScript在控件上添加倒计时功能的实现代码

代码如下:

var h= 10 ; //限制几点可查询 
 var m= 00 ; //限制几分可查询 
 var s= 00 ; //限制几秒可查询 
 //格式化时间 
 function timeToString(a){ 
  //小时 
  var s= '还有' 
  s+=parseInt(a/ 3600 )+ '时' ; 
  //分 
  s+=parseInt(a % 3600 / 60 )+ '分' ; 
  //秒 
  s+=parseInt(a % 60 )+ '秒可查' ; 
  return s; 
 } 
 var date1= new Date(); 
 var date2= new Date(); 
 //设置预置可查时间 
 date1.setHours(h); 
 date1.setMinutes(m); 
 date1.setSeconds(s); 
 //比如时间 
 var d=(date1-date2)/ 1000 ; 
 //如果初始化时可用,就启用按钮 
 if (d< 0 ){ 
  this .setValue( '查询' ); 
  this .setEnable( true ); 
 } else {  
  var btn= this ;  
  //显示倒计时时间 
  btn.setValue(timeToString(d)); 
  //设置不可用 
  btn.setEnable( false );  
  //定时器函数 
  setInterval(function(){ 
   //重新设置时间 
   date1= new Date();  
   date2= new Date(); 
   date1.setHours(h); 
   date1.setMinutes(m); 
   date1.setSeconds(s); 
   //重新当前时间与设定时间的时间差 
   d=(date1-date2)/ 1000 ; 
   if (d< 0 ){ 
   btn.setValue( '查询' ); 
   btn.setEnable( true ); 
   } else {  
   btn.setValue(timeToString(d)); 
   btn.setEnable( false );  
   } 
  }, 1000 ); 
 }

以上所述是小编给大家介绍的JavaScript在控件上添加倒计时功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
拥抱模块化的JavaScript
Mar 07 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
JS实现前端缓存的方法
Sep 21 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
js中如何完美的解析数据
Mar 18 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 #Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 #Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 #Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 #Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 #Javascript
详解node如何让一个端口同时支持https与http
Jul 04 #Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 #Javascript
You might like
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
有关php运算符的知识大全
2011/11/03 PHP
php curl_init函数用法
2014/01/31 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
php文件缓存类汇总
2014/11/21 PHP
jQuery 位置插件
2008/12/25 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
python正则表达式中的括号匹配问题
2014/12/14 Python
python中正则的使用指南
2016/12/04 Python
python3 线性回归验证方法
2019/07/09 Python
python 实现dict转json并保存文件
2019/12/05 Python
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
你常见到的runtime exception
2016/09/05 面试题
秋季婚礼证婚词
2014/01/11 职场文书
国培教师自我鉴定
2014/02/12 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
会议通知
2015/04/15 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
python小程序之飘落的银杏
2021/04/17 Python
我的收音机情缘
2022/04/05 无线电
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL