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版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
随机推荐
- linux下gsoap的初次使用 -- c风格加法实例
摘自: http://blog.csdn.net/jinpw/article/details/3346844 https://www.cnblogs.com/dkblog/archive/2011/0 ...
- 自定义log4j的appender写es日志
本篇和大家分享的是自定义log4j的appender,用es来记录日志并且通过kibana浏览es记录:就目前互联网或者一些中大型公司通常会用到第三方组合elk,其主要用写数据到es中,然后通过可视化 ...
- 卸载/安装ubuntu系统教程
卸载ubuntu 1.修复Mbr 1.下载软件MbrFix,地址:https://www.softpedia.com/get/System/Hard-Disk-Utils/MBRFix.shtml 2 ...
- codevs1553 互斥的数
1553 互斥的数
- 洛谷P1447 [NOI2010]能量采集（容斥）
传送门 很明显题目要求的东西可以写成$\sum_{i=1}^{n}\sum_{j=1}^m gcd(i,j)*2-1$(一点都不明显) 如果直接枚举肯定爆炸 那么我们设$f[i]$表示存在公因数$i$ ...
- PJzhang:谷歌在中国大陆可以使用的部分服务
猫宁!!! 参考链接:https://lusongsong.com/reed/170.html https://www.williamlong.info/archives/2124.html http ...
- C 语言实例 - 循环输出26个字母
C 语言实例 - 循环输出26个字母 循环输出 个字母. 实例 #include <stdio.h> int main() { char c; for(c = 'A'; c <= ' ...
- vue路由的四种传值
第一种:props 配置: 组件内定义: props: ['id'] 路由映射配置,开启props:true : { path: '/user/:id', component: User, props ...
- JQuery序列化表单serialize() 以及 serializeArray()
都是利用form表单传递数据的 1.serialize()方法 描述:序列化表单内容为字符串,用于Ajax请求. 数据类似于这种: FirstName=Bill&LastName=Gates ...
- Jmeter4.0----录制脚本（4）
1.前言 Jmeter录制脚本有两种方式.1.通过第三方工具录制比如:Badboy,然后转化为jmeter可用的脚本:2.使用jmeter本身自带的录制脚本功能. 对于测试小白来说可用先使用jmete ...