一.概述

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

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

这种功能如何实现的呢

二.实现思路

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

三 .实现过程

1、修改模板

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

2、添加倒计时控制功能

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

代码如下：

 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在控件上添加倒计时功能的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# js  # 控件添加倒计时功能  # JS实现用户注册时获取短信验证码和倒计时功能  # JS实现表单验证功能(验证手机号是否存在  # 验证码倒计时)  # js实现发送验证码后的倒计时功能  # php+js实现倒计时功能  # js实现网页倒计时、网站已运行时间功能的代码3例  # javascript倒计时功能实现代码  # 倒计时  # 不可用  # 小编  # 如下图  # 可查  # 在此  # 给大家  # 几分  # 几点  # 为例  # 自带  # 写在  # 所述  # 给我留言  # 图中  # 感谢大家  # 如何实现  # 几秒  # 过程中  # 某项 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 简历没回改：利用AI润色让你的文字更专业  如何在 Python 中将列表项按字母顺序编号（a.、b.、c. …）  如何确保FTP站点访问权限与数据传输安全？  C++用Dijkstra(迪杰斯特拉)算法求最短路径  微信小程序 require机制详解及实例代码  Laravel怎么配置不同环境的数据库_Laravel本地测试与生产环境动态切换【方法】  html5如何设置样式_HTML5样式设置方法与CSS应用技巧【教程】  php485函数参数是什么意思_php485各参数详细说明【介绍】  Laravel怎么解决跨域问题_Laravel配置CORS跨域访问  详解Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点  如何在 Telegram Web View（iOS）中防止键盘遮挡底部输入框  如何在阿里云通过域名搭建网站？  JavaScript常见的五种数组去重的方式  如何在阿里云部署织梦网站？  php json中文编码为null的解决办法  如何利用DOS批处理实现定时关机操作详解  太平洋网站制作公司,网络用语太平洋是什么意思？  Laravel如何实现多级无限分类_Laravel递归模型关联与树状数据输出【方法】  如何注册花生壳免费域名并搭建个人网站？  高端云建站费用究竟需要多少预算？  html5audio标签播放结束怎么触发事件_onended回调方法【教程】  创业网站制作流程,创业网站可靠吗？  深圳网站制作设计招聘,关于服装设计的流行趋势，哪里的资料比较全面？  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  如何用腾讯建站主机快速创建免费网站？  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办？  HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】  网易LOFTER官网链接 老福特网页版登录地址  edge浏览器无法安装扩展 edge浏览器插件安装失败【解决方法】  android nfc常用标签读取总结  如何确保西部建站助手FTP传输的安全性？  如何在阿里云虚拟主机上快速搭建个人网站？  Windows10电脑怎么查看硬盘通电时间_Win10使用工具检测磁盘健康  如何做网站制作流程,*游戏网站怎么搭建？  Laravel如何生成和使用数据填充？（Seeder和Factory示例）  javascript日期怎么处理_如何格式化输出  浅谈redis在项目中的应用  中山网站推广排名,中山信息港登录入口？  Laravel如何实现多对多模型关联？（Eloquent教程）  Laravel Sail是什么_基于Docker的Laravel本地开发环境Sail入门  Laravel全局作用域是什么_Laravel Eloquent Global Scopes应用指南  手机网站制作与建设方案,手机网站如何建设？  Win11怎么恢复误删照片_Win11数据恢复工具使用【推荐】  js实现点击每个li节点，都弹出其文本值及修改  Laravel怎么实现模型属性的自动加密  香港服务器网站推广：SEO优化与外贸独立站搭建策略  Zeus浏览器网页版官网入口 宙斯浏览器官网在线通道  如何用搬瓦工VPS快速搭建个人网站？  活动邀请函制作网站有哪些,活动邀请函文案？  如何快速查询网址的建站时间与历史轨迹？