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 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
BootStrap TreeView使用实例详解
Nov 01 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
js实现二级联动简单实例
Jan 11 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
javascript URL锚点取值方法
2009/02/25 Javascript
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
Python验证码识别的方法
2015/07/10 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
python os.rename实例用法详解
2020/12/06 Python
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
班组长安全生产职责
2013/12/16 职场文书
安全生产检讨书
2014/01/21 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
求职自荐信怎么写
2014/03/06 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
寻找成龙观后感
2015/06/12 职场文书
中秋联欢会主持词
2015/07/04 职场文书
一年级语文教学随笔
2015/08/14 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书