之前苦于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,则说明此时时间已到结束时间,则停止倒计时。

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

  1. WdatePicker设置时间区间时,对开始时间和结束时间限制

    <input id="startDate" name="startDate"  type="text" readonly=" ...

  2. [Jquery 插件]活动倒计时,可同步服务器时间,倒计时格式随意设置

    活动倒计时,可同步服务器时间,倒计时格式随意设置 使用说明 /* #活动倒计时,可同步服务器时间 startTime:起始时间 endTime:结束时间 format_str:字符模板 speed:倒 ...

  3. Unity日常记录-本地保存未来时间实现倒计时

    本地保存未来时间实现倒计时 TimeTool工具类:获取当前时间.未来时间.两时间差 using System; using UnityEngine; public class TimeTool { ...

  4. 设置时间&时区

    设置时间之前要先了解一件事,时间分为系统时间与硬件时间 如果硬件时间与系统时间不相同的话,经常会发现自己写的程序时间可能对不上 首先修改硬件时间 1)修改时区 输入命令: tzselect 按照指示选 ...

  5. WdatePicker 设置日期第一个比第二个的日期小

    WdatePicker 设置日期第一个比第二个的日期小 可以设置,日期只显示某一天的,比如只显示周一,和周日 <input id="Text1" class="Wd ...

  6. JS 显示时间与倒计时练习

    显示时间与倒计时 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  7. centos修改时区,设置时间

    在我们使用CentOS系统的时候,也许时区经常会出现问题,有时候改完之后还是会出错,下面我们就来学习一种方法来改变这个状况.如果没有安装,而你使用的是 CentOS系统 那使用命令 yum insta ...

  8. Java json设置时间格式,Jackson设置时间格式,json设置单引号

    Java json设置时间格式,Jackson设置时间格式,json设置单引号 >>>>>>>>>>>>>>> ...

  9. PreparedStatement设置时间

    程序代码里面需要用PreparedStatement来设置时间过滤参数,时间参数中带有时分秒,用ps.setDate来设置的时候,会丢失时间部分,只有日期,用setTimestamp来设置参数,既有日 ...

随机推荐

  1. JSON工具类的构建(后端版本)

    前言 在前后端交互的选择上,之前一直采用的是模板引擎(因为我只负责后端). 而这次的一个算是作业吧,前后端都是我,所以就研究了一下JSON交互在java web的应用(主要是前端). 优缺点 前后端耦 ...

  2. Python-02 生成器表达式,列表推导式

    列表推导式和生成器表达式 列表推导式,生成器表达式1,列表推导式比较直观,占内存2,生成器表达式不容易看出内容,省内存. [ 变量(加工后的数据) for  变量i  in 可迭代的数据类型 ] 列表 ...

  3. 16-python基础-字典

    1.字典的定义 dictionary(字典)是除列表以外python之中最灵活的数据类型. 字典同样可以存储多个数据. 通常用于存储一个物体的相关信息. 和列表的区别 列表是有序的对象集合 字典是无序 ...

  4. 归并排序(Merge_Sort)

    基本思想 建立在归并操作上的一种有效的排序算法.该算法是采用分治法(Divide and Conquer)的一个非常典型的应用. 算法原理 归并操作指的是将两个已经排序的序列合并成一个序列的操作,归并 ...

  5. SpringMVC学习(4):数据绑定1 @RequestParam

    在系列(3)中我们介绍了请求是如何映射到一个action上的,下一步当然是如何获取到请求中的数据,这就引出了本篇所要讲的内容-数据绑定. 首先看一下都有哪些绑定数据的注解: 1.@RequestPar ...

  6. 浅析php-fpm和fastcgi的关系

    先讲讲CGI吧 浏览器向web server发起请求的时候,要有url,header,params等等吧,为什么有这些数据呢,这就是CGI的事了,CGI就规定了,传哪些数据,用什么样的格式传输 web ...

  7. 更新view是可以update到表的

    视图不是表,视图里面的数据是通过sql语句去表中查询得到的.当表中的数据发送更改之后,视图里的数据也会发生相应的更改.所以我么一般有两种方式更新视图里面的数据:一是更新表中的数据,从而间接地更新视图中 ...

  8. 请问如何实现字符串UTF8->BIG5,BIG5->UTF8。保证送分。-Java/JavaSE

    请问如何实现字符串UTF8-> BIG5,BIG5-> UTF8. ------回答--------- ------其他回答(100分)--------- public String BI ...

  9. 【Luogu】【关卡2-14】 树形数据结构(2017年10月)【AK】

    任务说明:由一个根节点分叉,越分越多,就成了树.树可以表示数据之间的从属关系 P1087 FBI树 给一个01字符串,0对应B,1对应I,F对应既有0子节点又有1子节点的根节点,输出这棵树的后序遍历. ...

  10. Java中有几种类型的流?

    (1)字节流 InputStream/OutputStream ①FileInputStream/FileOutputStream:文件字节流,用于文件的读写操作 ②BufferedInputStre ...