做页面需要两个时间输入框一个显示当前时间，一个显示之前的时间，并且需要一个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控制计算时间差的更多相关文章

  1. js实时获取并显示当前时间的方法

  2. 前端开发自学之JavaScript——显示当前时间

    <html> <head> <title>JavaScript</title> <script language="javascript ...

  3. js显示当前时间

    闲着没事在闪存里看到有人需要js显示当前时间,就一时兴起写了个. 输出格式:“2013年12月18日 星期三 上午9:05:00 ”. <script type="text/javas ...

  4. JS实现以日历形式显示当前时间

    效果图: <script language="Javascript"> var datelocalweek=new Array("星期日", &qu ...

  5. 自己封装的一个js方法用于获取显示的星期和日期时间

    自己封装的一个js方法用于获取显示的星期和日期时间 /** * 获取用于显示的星期和日期时间 * @param date * @returns {string} */ function getWeek ...

  6. datetimepicker bootstrap的时间插件显示位置问题及其他配置

    位置问题: 在bootstrap中用 datetimepicker 时默认是在输入框下面弹出的, 但是遇到输入框在屏幕最下面时,日期选择框会有一部分在屏幕下面,显示不了,因此需要能够从上面弹出. 可以 ...

  7. 基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  8. jQuery Tags Input 插件显示选择记录

    利用jQuery Tags Input 插件显示选择记录 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采 ...

  9. 原生js版分页插件

    之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...

随机推荐

  1. 转：使用 VisualVM 进行性能分析及调优

    使用 VisualVM 进行性能分析及调优 VisualVM 是一款免费的\集成了多个 JDK 命令行工具的可视化工具,它能为您提供强大的分析能力,对 Java 应用程序做性能分析和调优.这些功能包括 ...

  2. SQL 分组获取产品 前两条记录

    select * from ( select *, ROW_NUMBER() over(partition by IPAddress order by recordtime desc) as rowN ...

  3. Jodd发送邮件

    public static void main(String[] args) { Email email = Email.create().from("xxx") .to(&quo ...

  4. 【异步编程】Part1：await&async语法糖让异步编程如鱼得水

    前导 Asynchronous programming Model(APM)异步编程模型以BeginMethod(...) 和 EndMethod(...)结对出现. IAsyncResult Beg ...

  5. python 之 函数 内置函数

    5.15 内置函数 方法 含义 备注 abs(-1) 求绝对值 1 all ([1,'a',True]) 列表中所有元素的布尔值为真,最终结果才为真 True all ('') 传给all的可迭代对象 ...

  6. java基础第十一篇之Date、Math、自动装箱和拆箱

    Date类 表示一个瞬间,就是一个时刻 * * 构造方法: * public Date();//创建一个表示当前系统时间的Date对象 * public Date(long time);//毫秒值,距 ...

  7. Table 自定义设置边框线

    table上添加:border-collapse: collapse;//设置表格边框分开显示就可以设置tr td的边框线

  8. C# 文件异步操作

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  9. easyui的datagrid用js插入数据等编辑功能的实现

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. Codeforces Round #561 (Div. 2) C. A Tale of Two Lands

    链接:https://codeforces.com/contest/1166/problem/C 题意: The legend of the foundation of Vectorland talk ...