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版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
随机推荐
- 《精通Spring4.X企业应用开发实战》读后感第四章（BeanFactory和ApllicationContext）
- SLAM细碎内容积累_来自各种技术交流群_持续更新
imu标定 工具包:imu_utils, imu_tk, kalibr 用kalibr做标定,相机和imu的采样频率要求:相机20,imu100.kalibr也可以做鱼眼相机+imu的联合标定 ...
- c 无回显读取字符/不按回车即获取字符
最近课程设计要使用各种有趣的函数,这是其中一个 #include <conio.h> 使用方法 char c; c=getch(); 这样按下输入一个字符不按回车就ok了
- 快速部署Kubernetes集群管理
这篇文章介绍了如何快速部署一套Kubernetes集群,下面就快速开始吧! 准备工作 //关闭防火墙 systemctl stop firewalld.service systemctl disabl ...
- CI框架中，扩展验证码类。
使用CI框架的朋友,应该都知道CI框架的的验证码辅助函数,不太好用.它需要写入到数据库中,然后再进行比对. 大家在实际项目中,好像不会这样去使用,因为会对数据库造成一定的压力. 所以,我们还是利用se ...
- OrderBy和OrderByDescending排序
昨天有练习对数字阵列进行排序,<C#阵列Array排序>https://www.cnblogs.com/insus/p/10825174.html 其实一切都弄得很复杂,array已经有2 ...
- 用MATLAB进行数据分析
- Unity开发Android应用优化指南（下）
http://forum.china.unity3d.com/thread-27044-1-1.html 在Unity开发Android应用优化指南(上)一文中,从游戏性能,脚本等方面进行了分析和总结 ...
- Python之for循环和while循环
Python中有两种循环,分别为:for 循环和 while 循环. 循环语句就是在某种条件下,循环的执行某段代码块,并在符合条件的情况下跳出该段循环, 其目的是处理想要进行处理的相同任务.它的关键词 ...
- 人民网慕课联手FISCO BCOS开源社区上线“区块链学院”
FISCO BCOS是完全开源的联盟区块链底层技术平台,由金融区块链合作联盟(深圳)(简称金链盟)成立开源工作组通力打造.开源工作组成员包括博彦科技.华为.深证通.神州数码.四方精创.腾讯.微众银行. ...