WdatePicker设置时间与倒计时

  之前苦于jQuery的datetimepicker插件不知道如何设置秒数,用了同学推荐的WdatePicker,真心好用。

  相关文档用法可以上http://www.my97.net/dp/index.asp看详细介绍。

  页面显示只需要<input type="text" id="datetimepicker1" onfocus="WdatePicker({dateFmt:‘yyyy-MM-dd HH:mm:ss‘})" class="Wdate" style="width:300px"/>,dateFmt:‘‘可以随意设置格式。取值为:$(‘#id名‘).val(),日期值为:new Date($(‘#id名‘).val()).

  

  我的页面是这样的,输入了courseName,start-time,end-time后,点击橙色"Set Time"按钮,将这三个值传入后台,存入数据库。

  这里使用ajax传值,点击"Set Time"触发。

      $(function(){
                 $("#datetime").click(function(){
                     $.ajax( {
                        type : "POST",
                        url : "function/gettime",
                        async:false,
                        data : "starttime="+$(‘#datetimepicker1‘).val()+"&endtime="+$(‘#datetimepicker2‘).val()+"&course="+$(‘#course‘).val(),
                        dataType: "json",
                        success : function() {
                            alert("success");
                            int = window.setInterval(function(){ShowCountDown(‘divdown1‘);}, interval);
                        }
                    });
                 });
             });

  传值成功后,每隔1000ms,即1s则调用ShowCountDown()方法,进行倒计时。

  

  var interval = 1000;
    var int = 0;
    function ShowCountDown(divname)
    {
        var now = new Date();
        var endDate = new Date($(‘#datetimepicker2‘).val());
        var leftTime=endDate-now;
        var leftsecond = parseInt(leftTime/1000);
        var day1=Math.floor(leftsecond/(60*60*24));
        var hour=Math.floor((leftsecond-day1*24*60*60)/3600);
        var minute=Math.floor((leftsecond-day1*24*60*60-hour*3600)/60);
        var second=Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60);
        var cc = document.getElementById(divname);
             if (new Date()>=new Date($(‘#datetimepicker1‘).val())){
                 if (second==0) window.clearInterval(int);
                    cc.innerHTML = second+"seconds left!";
            }
    } 

  若当前时间晚于设定的starttime,则在成功"Set Time"之后进行倒计时,若当前时间早于starttime,则等到starttime那个时候再倒计时。

  倒计时的秒数为设定的endtime-此时时间,若秒数second==0,则说明此时时间已到结束时间,则停止倒计时。

时间: 2024-10-10 07:36:22

WdatePicker设置时间与倒计时的相关文章

【非凡程序员】 OC第十六节课 初识OS X开发二(设置时间和定闹钟练习)

设置时间和定闹钟练习: ViewController.h文件:#import <Cocoa/Cocoa.h> @interface ViewController : NSViewController- (IBAction)shezhijian:(id)sender;@property (weak) IBOutlet NSTextField *Song;@property (weak) IBOutlet NSTextField *ShiJian;@property (nonatomic,stro

返回/设置时间方法

返回/设置时间方法 get/setTime() 返回/设置时间,单位毫秒数,计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数. 如果将目前日期对象的时间推迟1小时,代码如下: <script type="text/javascript"> var mydate=new Date(); document.write("当前时间:"+mydate+"<br>"); mydate.setTime(mydate

汇编实验课程设计1之设置时间半成品

;    感觉双休就想睡觉,这鬼天气,一直下雨.设置时间未完成,只是加了一个所谓的主界面;   display system time. press f1 to change the color displayed, press esc to return main list. f3 exit;    clear_screen 清空屏幕assume cs:codesgstacksg segment    dw 128 dup(0)stacksg endscodesg segment      

设置时间&amp;时区

设置时间之前要先了解一件事,时间分为系统时间与硬件时间 如果硬件时间与系统时间不相同的话,经常会发现自己写的程序时间可能对不上 首先修改硬件时间 1)修改时区 输入命令: tzselect 按照指示选择就好 选完后有个提示,其实可以直接用命令:  TZ='Asia/Shanghai'; export TZ 修改时区 2)修改时间 输入命令: sudo hwclock --set --date="11/18/16 17:59:25" 时间格式是 --date="month/da

linux设置时间服务器

对多个linux服务器,时间保持一致是很必要的.根据精确度要求,应该有相应的时间间隔进行时间同步.如果不进行时间同步,时间久了就会差别很大,遇到问题时定位就很困难.因为多台设备的配合,log之间可能有前因后果,时间是同步事件的先后的重要依据. 一般来说,对一个机房内的设备,可以设置一台时间服务器,由它定期从一个标准的时间服务器上获取时间.其他的服务器可以通过内网的连接从这台服务器进行同步.这样不仅时间会一致,而且照顾到一些没有公网的设备. 本文测试系统: [[email protected] ~

JS 显示时间与倒计时练习

显示时间与倒计时 HTML 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>显示系统时间</title> 6 <link rel="stylesheet" href="css/style.css"> 7 </head> 8 9 <body> 10 &

MySQL 创建表时,设置时间字段自己主动插入当前时间

MySQL 创建表时,设置时间字段自己主动插入当前时间 DROP TABLE IF EXISTS `CONTENT`; CREATE TABLE `CONTENT` ( `ID` char(20) NOT NULL, `CURRENT_TIME` timestamp not null default current_timestamp, PRIMARY KEY (`ID`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

javascript Date对象 之 设置时间

之前对js的date对象总是感觉熟悉,而不愿细细深究其所以然,所以每当自己真正应用起来的时候,总会糊里糊涂的,今日花费2个小时的时间仔细钻研了一下,感觉 豁然开朗,故,以此记录,一来 供以后查阅,二来 给跟我有同感的同志们 供参考(代码copy到本地即可测试): javascript Date对象 --> 设置时间: 测试代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&

JavaScript 逼真图片倒计时实现代码 js时间图片倒计时

JavaScript 逼真图片倒计时实现代码   js时间图片倒计时 效果图: <!doctype html> <html> <head> <meta charset="utf-8"> <head> <title>逼真图片倒计时</title> <style type="text/css"> .time{width:200px;height:25px;border:1px