为年度评选活动添加倒计时功能

背景:前几天,老总说为年度优秀员工评选活动(活动放在公司的OA上面,使用asp.net+MySql开发)添加一个倒计时功能,想想没什么难度,不过是计算一下年月日时分秒而已,用javascript能够简单搞定啦!

步骤:

  1、传入活动结束时间;

  2、获取当前时间;

   3、计算时间戳的差值;

4、通过判断差值并计算出剩余的时间

分享:

            var tid;     -- 当前时间 时间间隔周期调用函数的标记
            var NowTime; -- 当前时间
            var t;       --  时间戳差值
            var EndTime = new Date($("#hidEnd").val().replace(eval("/-/gi"), ‘/‘));  -- $("#hidEnd").val() 记录活动结束时间的隐藏域 获取的时间格式 yyyy-MM-dd HH:mm:ss 需要将‘-‘替换为‘/‘
            function getRTime() {
                NowTime = new Date();
                t = EndTime.getTime() - NowTime.getTime();
                if (t > 0) {
                    var d = Math.floor(t / 1000 / 60 / 60 / 24);  -- 计算剩余天数
                    var h = Math.floor(t / 1000 / 60 / 60 % 24);  -- 计算剩余小时数
                    var m = Math.floor(t / 1000 / 60 % 60);       -- 计算剩余分钟数
                    var s = Math.floor(t / 1000 % 60);            -- 计算剩余秒数
                    document.getElementById("rt").innerHTML = "离活动结束还有:<br/>" + d + "天" + h + "时" + m + "分" + s + "秒";   -- rt 剩余时间所在span的ID
                }
                else {
                    clearInterval(tid);                -- 活动结束 清除计算
                    //document.getElementById("rt").innerHTML = "活动结束";
                }
            }
            tid = setInterval(getRTime, 1000);         -- 开始计算 间隔1S           

总结:看起来简单吧,不过还是经过我一番调试搜索才搞定的,因为以前我压根不知道javascript中的时间格式的限定只能用‘/‘,而平时用的时间格式也是 yyyy-MM-dd,真是“书到用时方恨少啊”。

时间: 2024-10-14 16:48:55

为年度评选活动添加倒计时功能的相关文章

JS实现为控件添加倒计时功能

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

图文详解-如何用Axure做一个倒计时功能按钮

本篇主要给大家讲一下如何用Axure巧妙简单的实现一个倒计时功能. demo地址: http://pan.baidu.com/s/1jI4IRzC 密码: 8ghd 需要更详细学习的同学可以看下面文章.偷懒的同学可以直接在demo里复制出想要的部分即可使用了. 1.把主要元素进行排版设计: 这里每个人有每个人的习惯,没有一个标准,只是将主要元素进行组织后加以排版.大家发现并没有获取验证码按钮,这是我们的关键.下一步开始进行添加 2.添加一个Dynamic Panel(动态面板)命名为getCod

跟陈湾来完善C++(2), 添加属性功能

上面几篇文章中,我们添加了名称空间优化,添加事件功能.这些对我来说其实已经够了.但还可以加一个属性功能. 当我们在C++中更改一个属性时,平常都是Get函数加上Set函数,但是这样,没有直接写一个成员变量方便.例如: a.SetValue(a.GetValue() + 1); 没有 a.Value = a.Value + 1; 方便. 但是这种方便只有在调用有属性功能的对象时才能使用.在创建属性的时候我还是用老套路,写一个Get和Set函数,该干啥还是干啥.我的属性功能其实就是在类中添加一个共有

【转】为Android应用添加搜索功能

为Android应用添加搜索功能 为Android应用增加搜索功能:增加搜索建议

自己封装的一个简单的倒计时功能

因为平常工作中很常用到该功能,所以就利用这次国庆假期,重新梳理与对原有代码进行改善,再集成一个常用的功能,最终封装出这个“简单倒计时”功能. 该倒计时方法具有以下该功能: 1. 根据指定日期与当前的电脑时间进行匹配 2. 通过指定一个数组参数,来设置在每一天内不同的时间段进行倒计时. * 该方法还未通过实际工作的检测,稳定性未知(如果实际工作通过,会删除这段话) 1 function countDown(date,target,filter){ 2 3 var setTime = new Dat

修复Bug是重点 iOS9将不注重添加新功能

苹果iOS7系统时发生了界面风格的巨大改变,目前的iOS8也在延续之前的风格,只是进行了功能补充,那么iOS9是否还会继续保持这样的风格呢?据外媒消息,iOS9的确不会再次对风格进行大修大改,而是着重改进稳定性和系统优化. iOS9将不注重添加新功能(图片来自MacWorld) 据外媒从苹果内部工程师处获知,iOS9的主要工作是修复漏洞.保持系统的稳定性,并增强系统性能,并不会特别注重对新功能的开发. 另外,近期苹果因iOS8系统固件体积过大而多次被用户告上法庭,看来是起到了一定效果.据称苹果将

Android倒计时功能的实现(CountDownTimer)

以前编程的时候,遇到倒计时的功能时,经常自己去写,但其实Android已经帮封装好了一个倒计时类CountDownTimer,其实是将后台线程的创建和Handler队列封装成为了一个方便的类调用. 说明: CountDownTimer timer = new CountDownTimer(30000, 1000)中,第一个参数表示总时间,第二个参数表示间隔时间. 意思就是每隔一秒会回调一次方法onTick,然后30秒之后会回调onFinish方法. package com.androidcoun

Android基础之——CountDownTimer类,轻松实现倒计时功能

在发现这个类之前,一直是用的handler,子线程发消息,UI线程进行倒计时的显示工作.前几天在做一个倒计时显示的时候发现了这个类,用起来很方便 翻看了下源码,内部已经帮我们实现了handler的子线程操作 CountDownTimer这个类用起来很简单,两个参数,几句代码搞定,如下: CountDownTimer(long millisInFuture, long countDownInterval) 构造函数有两个参数,第一个millisInFuture是指要倒计时的总时间,单位是long

java-第十四章-代参的方法(二)-实现MyShopping系统的添加会员功能

 package com.wxws.sms; public class Customer {  int No;  int integarl; } package com.wxws.sms; public class Customers {  Customer[] customers = new Customer[100];  public void add(Customer cust){   for (int i = 0; i <customers.length; i++) {    if (c