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

一.概述

在有些 报表 需求中，需要为控件添加倒计时功能，限制到某一个时间点后能进行一项操作或不能进行某项操作，比如查询，导出功能等等，又需要人性化地显示还有多少时间，即倒计时功能，比如下图中我们限制这个报表在每天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在控件上添加倒计时功能的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • js实现发送验证码后的倒计时功能

    之前分享过只用js实现倒计时的功能,后来测试时发现,刷新或关闭网页后,倒计时就不能用了.网上也没找到合适的解决方案,所以自己就写了个,这次的算是优化版吧,能满足刷新或重新打开网页后,倒计时依然能用 特别说明: cookie最初创建的有效时间是60秒.也就是说,你如果在倒计时为20的时候,关闭网页.20秒之后再打开,是不会有倒计时显示的;但是,如果倒计时为20时,关闭页面,如果在20秒内重新打开页面,是有倒计时显示的. html代码 <input id="second" type=

  • JS实现用户注册时获取短信验证码和倒计时功能

    JS实现用户注册时获取短信验证码和倒计时功能

    在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时. 效果如下: <div class="user-form"> <form action="{{ path('zm_member_register') }}" method="post"> <div class="form-list"> <label class="register-label"&g

  • JS实现表单验证功能(验证手机号是否存在，验证码倒计时)

    废话不多说直接上代码 html代码: <form method="post" id="form_hroizon" enctype="multipart/form-data" action="/"> <input type="hidden" name="phoneTemplet" id="phoneTemplet"> <input type

  • javascript倒计时功能实现代码

    代码如下: 复制代码 代码如下: /** * 倒计时 * * @author WadeYu * @date 2012-04-20 17:40 * @copyright boyaa.com */ var TimeCountDown = function( initTime ){ var day = 0; var hour = 0; var minute = 0; var second = 0; var timerId = 0; var self = this; var fixInitTime =

  • js实现网页倒计时、网站已运行时间功能的代码3例

    1.jQuery.countdown插件 显示格式:50 周 01 天 07 小时 18 分 41 秒(秒为跑秒)一个页面可以有多个倒计时实例,可以停止和开始,它没有提供太多的功能,但时间格式和输出的尺寸都可以自定义.目前最新版v2.0.2,官方地址http://hilios.github.io/jQuery.countdown/例如: 复制代码 代码如下: <div id="getting-started"></div><script src="

  • php+js实现倒计时功能

    js部分 复制代码 代码如下: setInterval("time_controller()",1000);function time_controller(){    $(".time_val").each(function(){         var time_id = "time_show_"+$(this).attr('for');         var time_val= $(this).attr('value');        

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

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

    一.概述 在有些 报表 需求中,需要为控件添加倒计时功能,限制到某一个时间点后能进行一项操作或不能进行某项操作,比如查询,导出功能等等,又需要人性化地显示还有多少时间,即倒计时功能,比如下图中我们限制这个报表在每天10点后才能查询 当倒计时结束的时候,查询功能可用 这种功能如何实现的呢 二.实现思路 主要原理是利用控件的setEnable(true)/setEnable(false)来进行设置控件的可用与不可用状态,在获取时间的过程中,需要利用到JS中的获取时间,利用JS的定时器函数setInt

  • MFC实现对话框编辑控件上拖拽文件

    本文实例为大家分享了MFC实现对话框编辑控件上拖拽文件的具体代码,供大家参考,具体内容如下 步骤 1.重载CEdit类 2.添加编辑框控件 首先,重载CEdit类,定义一个派生类CDragEdit类,并重载它的WM_CREATE方法,在其中添加DragAcceptFile(TRUE); 方法. // CDragEdit.h #pragma once class CDragEdit : public CEdit { DECLARE_DYNAMIC(CDragEdit) public: CDragE

  • 详解WPF如何在基础控件上显示Loading等待动画

    WPF 如何在基础控件上显示 Loading 等待动画 框架使用.NET4 至 .NET6: Visual Studio 2022; 使用方式需引入命名空间后设置控件的附加属性 wd:Loading.IsShow="true",即可显示默认等待动画效果如下: 如需自定义 Loading 一定要 先设置 wd:Loading.Child 在设置 IsShow="true" . 显示不同 Loading 内容需 wd:Loading.Child ={x:Static w

  • JavaScript判断FileUpload控件上传文件类型

    JavaScript判断FileUpload控件上传文件类型

    为了代码变得更加简捷,笔者使用了正则表达式来获取文件扩展名,如果读者对正则表达式不太了解或者从来没有接触过,请马上恶补一下吧!毕竟它非常重要,大多数的编程语言都支持正则表达式. 大家都知道,后台获取FileUpload扩展名方法: string ext = Path.GetExtension(fu.PostedFile.FileName); JS判断FileUpload控件上传文件的扩展名: <html xmlns="http://www.w3.org/1999/xhtml"&g

  • ASP.NET 页面中动态增加的控件、添加事件第1/2页

    要求:页面上有一个Add按钮,每点击一次该按钮,页面上动态创建一个WebPartZone! 提醒:WebPartZone只能在OnInit或之前才能创建,否则报异常! 大家都知道,按钮的点击事件是在RaisePostbackEvent时触发的,这意味着点击事件在OnLoad阶段之后才执行,远远落后于 OnInit阶段,而且ViewState在OnLoad时才准备好,OnInit以及之前的阶段根本就不能使用ViewState!如果试图在按钮点击事件里面创建WebPartZone等控件,唯一的后果就

  • ASP.NET让FileUpload控件支持浏览自动上传功能的解决方法

    ASP.NET的FileUpload控件默认是不支持服务端的onchange事件的,此时可以用一种变通的方法来实现这一功能. 这就需要借用客户端的onchange事件,调用__doPostBack方法来用LinkButton的OnClick事件模拟一个事件触发的过程,具体代码如下: 客户端: <asp:FileUpload ID="fuPhoto" onchange="javascript:__doPostBack('lbUploadPhoto','')" r

  • 给Repeater控件里添加序号的5种才常见方法介绍

    .net是目前非常热门的一种程序编译语言,在.net培训中的众多知识点中,给Repeater控件里添加序号的5种方法是非常重要的一个.下面就由达内的老师为大家介绍一下这方面的内容. Repeater是我们经常用的一个显示数据集的数据控件,经常我们希望在数据前显示数据的序号,那么我们该怎么为Repeater控件添加序号呢?下面编辑为大家介绍几种常用的为Repeater控件添加序号的方法: 方法一: 利用Container.ItemIndex属性,代码如下: 复制代码 代码如下: <Itemtemp

  • 实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上

    实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上

    一直想实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上,今晚终于有时间实现它.此功能就是当鼠标经过时RadioButtonList或CheckBoxList每一个Item时,让Item有特效显示,离开时,恢复原样.可以看到效果: RadioButtonList效果: CheckBoxList效果: 这资实现数据,Insus.NET准备了五行(Five Phases) 创建一个对象[Five Phases]:FivePhases.

  • Treeview动态添加用户控件传值和取值的实例代码

    Treeview动态添加用户控件传值和取值的实例代码

    主要功能:勾选子节点的checkbox,右边会动态加载该节点的信息,出现TextBox让用户填写节点的值,点击保存按钮将文本框的值保存到对应的节点.里面涉及到了asp执行ascx页面里的事件,并取值.这是前台的代码:CustomXMLmanager.aspx 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CustomXMLmanager.aspx.cs&quo

  • C# GDI在控件上绘图的方法

    本文以在chart控件上和窗体上画矩形为例子讲述了C# GDI在控件上绘图的方法.分享给大家供大家参考.具体方法如下: 具体的实现方法就不多解释了,备注很详细,代码也很简单. 主要功能代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Te

随机推荐