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版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
随机推荐
- [zoj3195]Design the city(LCA)
解题关键:求树上三点间的最短距离. 解题关键:$ans = (dis(a,b) + dis(a,c) + dis(b,c))/2$ //#pragma comment(linker, "/S ...
- nodejs链接mysql
使用mysql连接池:1.安装mysql支持npm install mysql 2.安装node.js的mysqlpool模块npm install -g node-mysql //-g表全局 3.直 ...
- js基础（补10.10）
1.内嵌式: <html> <head> <title></title> </head> <body> <a href=& ...
- codeforces1081G Mergesort Strikes Back【期望dp+脑洞】
首先看这样做的特点,就是分到最后小块里的点合并上去的时候相对顺序不变,所以先加上块内逆序对的期望 合并的时候一定是一边卡住一个大值,另一边跳指针,所以把一个值向右直到有大于它的值位置的一段区间看作一段 ...
- 洛谷P1005 矩阵取数游戏
P1005 矩阵取数游戏 题目描述 帅帅经常跟同学玩一个矩阵取数游戏:对于一个给定的n*m的矩阵,矩阵中的每个元素aij均为非负整数.游戏规则如下: 1.每次取数时须从每行各取走一个元素,共n个.m次 ...
- Exception inside CORBA when accessing a remote bean
http://stackoverflow.com/questions/23291520/exception-inside-corba-when-accessing-a-remote-bean
- 洛谷P1002 过河卒
关于蒟蒻的我,刚刚接触DP.... 那么就来做一道简单DP吧.... 首先先看题: 题目描述 棋盘上AA点有一个过河卒,需要走到目标BB点.卒行走的规则:可以向下.或者向右.同时在棋盘上CC点有一 ...
- Hexo写作系列(3) - 文章标题含有双引号"导致页面渲染失败无法打开
问题 在用Hexo写文章时,如果文章标题含有双引号",也就是说如果在文件头里的title出现双引号,如下: --- title: Hexo - 文章标题含有双引号"导致页面渲染失败 ...
- js 创建方法
贴个代码先: function O(user,pwd){ //use constructor this.user=user; this.pwd=pwd; this.get=get; return th ...
- Floyd判圈法
---恢复内容开始--- http://blog.csdn.net/ruoruo_cheng/article/details/53100656 ---恢复内容结束---