重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
你好,jquery datepick时间格式是可以设置的
创新互联专业为企业提供海伦网站建设、海伦做网站、海伦网站设计、海伦网站制作等企业网站建设、网页设计与制作、海伦企业网站模板建站服务,十年海伦做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
1
2
3
4
5
6
7
8
link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /
script type="text/javascript" src="js/jquery.min.js"/script
script type="text/javascript" src="js/jquery-ui.js"/script
script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"/script
input type="text" id="datetime" name="datetime" value="" /
$("#datetime").datetimepicker(); // 日期+时分秒
$("#datetime").datepicker(); // 日期
$("#datetime").timepicker(); // 时分秒
首先获取当前时间与目标时间的时间差,然后通过定时器更新这个时间差,就实现了倒计时效果。实现上述过程需要以下两个函数:
getTime() // 返回距1970年1月1日之间的毫秒数,这样将时间差(毫秒数)÷3600÷24即为天数,时分秒类似setTimeout(code,millisec); // 在指定的毫秒数后调用函数实例演示如下
创建Html元素
div class="box" span距离2015年国庆节还剩:/spanbr div class="content" input type="text" id="time_d"天input type="text" id="time_h"时input type="text" id="time_m"分input type="text" id="time_s"秒 /div/div设置css样式
div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}div.boxspan{color:#999;font-style:italic;}div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}input[type='text']{width:45px;height:35px;padding:5px 10px;margin:5px 0;border:1px solid #ff9966;}编写jquery代码
$(function(){ show_time();}); function show_time(){ var time_start = new Date().getTime(); //设定当前时间 var time_end = new Date("2015/10/01 00:00:00").getTime(); //设定目标时间 // 计算时间差 var time_distance = time_end - time_start; // 天 var int_day = Math.floor(time_distance/86400000) time_distance -= int_day * 86400000; // 时 var int_hour = Math.floor(time_distance/3600000) time_distance -= int_hour * 3600000; // 分 var int_minute = Math.floor(time_distance/60000) time_distance -= int_minute * 60000; // 秒 var int_second = Math.floor(time_distance/1000) // 时分秒为单数时、前面加零 if(int_day 10){ int_day = "0" + int_day; } if(int_hour 10){ int_hour = "0" + int_hour; } if(int_minute 10){ int_minute = "0" + int_minute; } if(int_second 10){ int_second = "0" + int_second; } // 显示时间 $("#time_d").val(int_day); $("#time_h").val(int_hour); $("#time_m").val(int_minute); $("#time_s").val(int_second); // 设置定时器 setTimeout("show_time()",1000); }观察效果
某个时刻的截图
几秒后的截图
$(".btn").click(function(){
var date = new Date();
console.log(date.getFullYear()+"年"+date.getMonth()+"月"+date.getDay()+"日"+date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒");//控制台打印出当前的时间
});
这样就可以显示了
link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /
script type="text/javascript" src="js/jquery.min.js"/script
script type="text/javascript" src="js/jquery-ui.js"/script
script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"/script
input type="text" id="datetime" name="datetime" value="" /
$("#datetime").datetimepicker(); // 日期+时分秒
$("#datetime").datepicker(); // 日期
$("#datetime").timepicker(); // 时分秒