如何根据日期控件的值进行倒计时【脚本-倒计时】

Q：请问如何根据日期控件的值进行倒计时呢？
A：您好：您可以在平台后台表单的源代码中用javascript去实现这样的功能，类似代码如下：

1. 
   
2. <script>
   
3.   function lxfEndtime(){
   
4.           jQuery(".lxftime").each(function(){
   
5.                 var lxfday=jQuery(this).attr("lxfday");//用来判断是否显示天数的变量
   
6.                 var endtime = new Date(jQuery(this).attr("endtime")).getTime();//取结束日期(毫秒值)
   
7.                 var nowtime = new Date().getTime();        //今天的日期(毫秒值)
   
8.                 var youtime = endtime-nowtime;//还有多久(毫秒值)
   
9.                 var seconds = youtime/1000;
   
10.                 var minutes = Math.floor(seconds/60);
    
11.                 var hours = Math.floor(minutes/60);
    
12.                 var days = Math.floor(hours/24);
    
13.                 var CDay= days ;
    
14.                 var CHour= hours % 24;
    
15.                 var CMinute= minutes % 60;
    
16.                 var CSecond= Math.floor(seconds%60);//"%"是取余运算，可以理解为60进一后取余数，然后只要余数。
    
17.                 if(endtime<=nowtime){
    
18.                         jQuery(".haveday").html("已过期");//如果结束日期小于当前日期就提示过期啦
    
19.                         }else{
    
20.                                 if(jQuery(this).attr("lxfday")=="no"){
    
21.                                         jQuery(".haveday").html("<i>剩余时间：</i><span>"+CHour+"</span>时<span>"+CMinute+"</span>分<span>"+CSecond+"</span>秒");          //输出没有天数的数据
    
22.                                         }else{
    
23.                         jQuery(".haveday").html("<i>剩余时间：</i><span>"+days+"</span><em>天</em><span>"+CHour+"</span><em>时</em><span>"+CMinute+"</span><em>分</em><span>"+CSecond+"</span><em>秒</em>");          //输出有天数的数据
    
24.                                 }
    
25.                         }
    
26.           });
    
27.    setTimeout(function(){lxfEndtime()},1000);
    
28.   };
    
29. window.onload = function(){
    
30.              // var oldHtml =  jQuery(".haveday").html();
    
31.               var endtime =jQuery("input[name='截止时间']").val();//取结束日期(毫秒值)
    
32.               if(endtime != ""){
    
33.                var vyear=endtime.split("-")[0];
    
34.                var vmonth=endtime.split("-")[1];
    
35.                var vday=endtime.split("-")[2].split(" ")[0];
    
36.                var value1=endtime.split("-")[2].split(" ")[1];
    
37.                var endtime1=vmonth+"/"+vday+"/"+vyear+" "+value1;
    
38.                jQuery(".lxftime").attr("endtime",endtime1);
    
39.                lxfEndtime();
    
40.               }
    
41. 
    
42.               jQuery("input[name='截止时间']").focus(function(){
    
43.                 if(jQuery(this).val() != endtime){
    
44.                   endtime = jQuery(this).val()
    
45.                   vyear=endtime.split("-")[0];
    
46.                   vmonth=endtime.split("-")[1];
    
47.                   vday=endtime.split("-")[2].split(" ")[0];
    
48.                   value1=endtime.split("-")[2].split(" ")[1];
    
49.                   endtime1=vmonth+"/"+vday+"/"+vyear+" "+value1;
    
50.                   jQuery(".lxftime").attr("endtime",endtime1);
    
51.                   //oldHtml =  jQuery(".haveday").html();
    
52.                   lxfEndtime();
    
53.                 }
    
54.               });
    
55. }
    
56. </script>
    
57. <div>
    
58. <h1>含有天数的倒计时</h1>
    
59. <div class="lxftime" endtime="12/31/2013 00:00:00">&nbsp;<input id="11e3-66bb-b2ea8c1e-bea1-1b125a02b023" class="cn.myapps.core.dynaform.form.ejb.DateField" value="" name="截止时间" lala="haha" datePattern="YMD_HMS" limit="false" prev_Name="" fieldtype="VALUE_TYPE_DATE" textType="text" refreshOnChanged="false" calculateOnRefresh="false" mobile="true" discript="" editMode="01" processDescription="[];[]" valueScript="" filtercondition="" validateLibs="" validateRule="" hiddenScript="" hiddenValue="" hiddenPrintScript="" printHiddenValue="" readonlyScript="" classname="cn.myapps.core.dynaform.form.ejb.DateField" /></div>
    
60. <div class="haveday">&nbsp;</div>
    
61. </div>
    

复制代码

前台效果图类似如下：