js使用my97插件显示当前时间，且select控制计算时间差
做页面需要两个时间输入框一个显示当前时间，一个显示之前的时间，并且需要一个select下拉框控制两个时间输入框之间的差,效果如下图：
这里使用的是My97DatePicer,简单方便,引入my97插件，设置input时间框的格式，这里设置的时间最大是当前时间，开始时间框不能比结束时间框的时间大
<script src="lib/date/WdatePicker.js"></script>
<body>
选择时间范围：<select name="selectDate" id="sDate">
<option value="1">一天</option>
<option value="2">两天</option>
<option value="3">三天</option>
<option value="7">一周</option>
<option value="14">二周</option>
<option value="21">三周</option>
</select>
<br/>
开始时间：<input type="text" id="startTime" class="Wdate" onFocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'#F{$dp.$D(\'endTime\')}'&&'%y-%M-%d'})">
<br/>
结束时间：<input type="text" id="endTime" class="Wdate" onFocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'startTime\')}',maxDate:'%y-%M-%d'})">
</body>
弄完这些，就可以点出时间了，但需要的是进入页面就显示当时时间，原理就是获取当前时间值再输入到时间框里
获取当时时间,因为获得的月份是从0-11，所以获得月份加一，才是真实月份
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hour = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
将获得的时间拼成字符串，因为考虑到获取的时间数字小于10时，格式是这样的2017-9-1 10:1:8,所以小于10时拼接一下，更符合习惯
var endTimeStr,startTimeStr;
var str1,str2,str3,str4,str5;
if(month<10){
str1='-0';
}else {
str1='-'
} if(day<10){
str2='-0';
}else{
str2='-';
} if(hour<10){
str3=' 0';
}else {
str3=' ';
}
if(minutes<10){
str4=':0';
}else {
str4=':';
}
if(seconds<10){
str5=':0';
}else {
str5=':';
} endTimeStr = year+str1+month+str2+day+str3 +hour+str4+minutes+str5+seconds;
这得到的是结束时间的，因为select下拉框控制的范围是到当前时间的，开始时间受下拉框限制，我们需要找出时间差
这是当前时间的毫秒数 var time = date.getTime();
这是下拉框控制的时间范围，转化为毫秒数
var cTime = $('#sDate').val()*24*3600*1000;
当前时间-下拉框时间=开始时间，再将开始时间转化为标准的格式
var dif = time-cTime;
var nTime = new Date(dif); var year1 = nTime.getFullYear();
var month1 = nTime.getMonth()+1; var day1 = nTime.getDate(); var hour1 = nTime.getHours();
var minutes1 = nTime.getMinutes();
var seconds1 = nTime.getSeconds();
var str11.str12,str13,str14,str15; if(month1<10){
str11='-0';
}else {
str11='-'
} if(day1<10){
str12='-0';
}else{
str12='-';
} if(hour1<10){
str13=' 0';
}else {
str13=' ';
}
if(minutes1<10){
str14=':0';
}else {
str14=':';
}
if(seconds1<10){
str15=':0';
}else {
str15=':';
} startTimeStr = year1+str11+month1+str12+day1+str13 +hour1+str14+minutes1+str15+seconds1;
得到开始时间和结束时间将它们输入到时间输入框即可
$('#endTime').val(endTimeStr);
$('#startTime').val(startTimeStr);
可将以上js写成一个函数，select控制函数执行控制时间范围,完整如下
function timeSet(){
var date = new Date();
var time = date.getTime();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hour = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var endTimeStr,startTimeStr;
var str1,str2,str3,str4,str5;
if(month<10){
str1='-0';
}else {
str1='-'
}
if(day<10){
str2='-0';
}else{
str2='-';
}
if(hour<10){
str3=' 0';
}else {
str3=' ';
}
if(minutes<10){
str4=':0';
}else {
str4=':';
}
if(seconds<10){
str5=':0';
}else {
str5=':';
}
endTimeStr = year+str1+month+str2+day+str3 +hour+str4+minutes+str5+seconds;
//求时间差，
var cTime = $('#sDate').val()*24*3600*1000;
var dif = time-cTime;
var nTime = new Date(dif);
var year1 = nTime.getFullYear();
var month1 = nTime.getMonth()+1;
var day1 = nTime.getDate();
var hour1 = nTime.getHours();
var minutes1 = nTime.getMinutes();
var seconds1 = nTime.getSeconds();
var str11.str12,str13,str14,str15;
if(month1<10){
str11='-0';
}else {
str11='-'
}
if(day1<10){
str12='-0';
}else{
str12='-';
}
if(hour1<10){
str13=' 0';
}else {
str13=' ';
}
if(minutes1<10){
str14=':0';
}else {
str14=':';
}
if(seconds1<10){
str15=':0';
}else {
str15=':';
}
startTimeStr = year1+str11+month1+str12+day1+str13 +hour1+str14+minutes1+str15+seconds1;
$('#endTime').val(endTimeStr);
$('#startTime').val(startTimeStr);
}
timeSet();
$('#sDate').on('change',function(){
timeSet();
});
js使用my97插件显示当前时间，且select控制计算时间差的更多相关文章
- js实时获取并显示当前时间的方法
- 前端开发自学之JavaScript——显示当前时间
<html> <head> <title>JavaScript</title> <script language="javascript ...
- js显示当前时间
闲着没事在闪存里看到有人需要js显示当前时间,就一时兴起写了个. 输出格式:“2013年12月18日 星期三 上午9:05:00 ”. <script type="text/javas ...
- JS实现以日历形式显示当前时间
效果图: <script language="Javascript"> var datelocalweek=new Array("星期日", &qu ...
- 自己封装的一个js方法用于获取显示的星期和日期时间
自己封装的一个js方法用于获取显示的星期和日期时间 /** * 获取用于显示的星期和日期时间 * @param date * @returns {string} */ function getWeek ...
- datetimepicker bootstrap的时间插件显示位置问题及其他配置
位置问题: 在bootstrap中用 datetimepicker 时默认是在输入框下面弹出的, 但是遇到输入框在屏幕最下面时,日期选择框会有一部分在屏幕下面,显示不了,因此需要能够从上面弹出. 可以 ...
- 基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录
最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...
- jQuery Tags Input 插件显示选择记录
利用jQuery Tags Input 插件显示选择记录 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采 ...
- 原生js版分页插件
之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
随机推荐
- win+apache网站打开很慢的解决笔记
为了图方便,直接把wamp的vhost配置文件复制到新apache2.2.25上,结果打开静态页速度都非常慢. <VirtualHost *:> ServerAdmin www.fuck2 ...
- 多进程小例子--fork+pipe
1 #include<stdio.h> 2 #include<unistd.h> 3 4 #define m 6 5 int main() 6 { 7 ...
- 文档公式编辑神器-Snip
最近在重新学习统计学的一些基础知识,整理笔记的时候需要输入一些数学公式.从学校毕业之后,就没有在文档中插入过公式了.按照以前的经验,我把输入公式的方式分成两类. 所见即所得的方式,常见的就是微软wor ...
- 【异步编程】Part3:取消异步操作
在.Net和C#中运行异步代码相当简单,因为我们有时候需要取消正在进行的异步操作,通过本文,可以掌握 通过CancellationToken取消任务(包括non-cancellable任务). 早期 ...
- 用 _tcscmp 替代 strcmp 或 wcscmp
转自:http://blog.csdn.net/eickandy/article/details/50081537 好处:是可以不管是用unicode 编码还是其他 ,代码都不用改. C++标准库函数 ...
- 洛谷P3110 [USACO14DEC]驮运Piggy Back
P3110 [USACO14DEC]驮运Piggy Back 题目描述 贝西和她的妹妹艾尔斯白天在不同的地方吃草,而在晚上他们都想回到谷仓休息.聪明的牛仔,他们想出了一个计划,以尽量减少他们在步行时花 ...
- 基于 Laravel Route 的 ThinkSNS+ Component
这里是传送门: <ThinkSNS+ 基于 Laravel master 分支,从 1 到 0,再到 0.1[ThinkSNS+研发日记系列一]> <基于 Laravel 开发 Th ...
- 使用echo命令向文件写入内容
0.前言 本文总结如何使用echo命令向文件中写入内容,例如使用echo指令覆盖文件内容,使用echo指令向文件追加内容,使用echo指令往文件中追加制表符. echo向文件中输出内容 ...
- 062 Unique Paths 不同路径
机器人位于一个 m x n 网格的左上角, 在下图中标记为“Start” (开始).机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角,在下图中标记为“Finish”(结束).问有多少条不 ...
- Yahoo!团队实践分享：网站性能优化的34条黄金守则
(一)内容 Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各种工具.写了大量的文章和博客并在各种会议上参与探讨.最佳实 ...