效果

1、js中将一字符串表示的系统时间转换为Date时间对象

  1. //js中将一串字符串转换为date类型，主要是先过滤字符，然后分割开
  2. function parseToDate(strTime)
  3. {
  4.     var arr=strTime.split(" ");
  5.     if(arr.length>=2)
  6.     {
  7.         var arr1=arr[0].split("-");
  8.         var arr2=arr[1].split(":");
  9.     }
  10.     else
  11.         return null;
  12.     if(arr1.length>=3 && arr2.length>=3)
  13.     {
  14.         var b=new Date(arr1[0],arr1[1]-1,arr1[2],arr2[0],arr2[1],arr2[2]);//将字符串转换为date类型
  15.         return b;
  16.     }
  17.     else
  18.         return null;
  19. }

注意月份要减一；

  1. January(Jan.)一月， February(Feb.)二月，March(Mar.)三月， April(Apr.)四月， May(May)五月，June(Jun.)六月；，July(Jul.)七月，August(Aug.)八月， September(Sept.)九月， October(Oct.)十月， November(Nov.)十一月， December(Dec.)十二月。     周一：Monday；
    周二：Tuesday；
    周三：Wednesday；
    周四：Thursday；
    周五：Friday；
    周六：Saturday；
    周日：Sunday

2、兼容移动端页面

  1. @media screen and (min-width:1200px){ .nofit{background-image: url(images/bj.jpg); width:auto;height:1008px;}
  2. .content1{margin-top:-230px;margin-left: 96px;position:absolute; }
  3.  .startbutton{background: url(images/startLotteryEn.png); width:480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }
  4. }
  5.  
  6.  @media screen and (min-width: 960px) and (max-width: 1199px) { .nofit{ background-image: url(images/bj.jpg); width:auto;height:1008px;}
  7.  .content1{margin-top:-230px;margin-left: 96px;position:absolute; }
  8.  .startbutton{background: url(images/startLotteryEn.png); width:480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }
  9.  }
  10.  
  11.  @media screen and (min-width: 768px) and (max-width: 959px) {.nofit{ background-image: url(images/bj.jpg); width:auto;height:1008px;}
  12.  .content1{margin-top:-230px;margin-left: 96px;position:absolute; }
  13.  .startbutton{background: url(images/startLotteryEn.png); width:480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }
  14.  }
  15.  
  16.  @media only screen and (min-width: 480px) and (max-width: 767px){ .nofit{background-image: url(images/bj.jpg); width:auto;height:1008px;}
  17.  .content1{margin-top:-230px;margin-left: 96px;position:absolute; }
  18.  .startbutton{background: url(images/startLotteryEn.png); width:480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }
  19.  } 
  20.  
  21.   @media only screen and (min-width: 321px) and (max-width: 479px){
  22. .nofit { background-image: url(images/bj1.jpg); width:auto;height:523px;}
  23.  
  24.    .startbutton{background: url(images/startLotteryEn1.png);    width: 162px;    height: 38px;    margin-top: -104px;    margin-left: 20px;position:absolute; }
  25.  
  26.   .content1 {
  27.     margin-top: -148px;
  28.     margin-left: 43px;position:absolute; }
  29.  } 
  30.  
  31. @media only screen and (max-width: 320px) { .nofit { background-image: url(images/bj1.jpg); width:auto;height:523px;}
  32.  
  33.    .startbutton{background: url(images/startLotteryEn1.png);    width: 162px;    height: 38px;    margin-top: -104px;    margin-left: -80px;position:absolute; }
  34.  
  35.   .content1 {
  36.     margin-top: -148px;
  37.     margin-left: 43px;position:absolute; }
  38.  }

源代码：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <%@ page isELIgnored="false"%>
  4. <%@ include file="/newver/common/taglibs.inc"%>
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8. <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0" />
  9. <meta content="telephone=no" name="format-detection" />
  10. <style type="text/css">
  11. dt {font-size: 20px; color: #fff; margin-top: 40px;}
  12. dd {font-size: 25px;color:#fff;margin-top: 10px;background-image: url(images/noselect.png);background-repeat: no-repeat; height: 90px;background-position:center; text-align: center; line-height:90px;}
  13. .body {background-image: url(images/annual.png); background-repeat: no-repeat; background-position:center; text-align: center; max-width: 640px;min-width: 320px;margin: auto;}
  14. .overspan{color: #0000ff;font-size: 20px;margin-top: 160px;display: block;}
  15. .commitbutton{background-image: url(images/commit.png); width:322px;height:92px;margin-top: 80px; }
  16.  
  17. @media screen and (min-width:1200px){ .nofit{background-image: url(images/bj.jpg); width:auto;height:1008px;}
  18. .content1{margin-top:-230px;margin-left: 96px;position:absolute; }
  19.  .startbutton{background: url(images/startLotteryEn.png); width:480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }
  20. }
  21.  
  22.  @media screen and (min-width: 960px) and (max-width: 1199px) { .nofit{ background-image: url(images/bj.jpg); width:auto;height:1008px;}
  23.  .content1{margin-top:-230px;margin-left: 96px;position:absolute; }
  24.  .startbutton{background: url(images/startLotteryEn.png); width:480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }
  25.  }
  26.  
  27.  @media screen and (min-width: 768px) and (max-width: 959px) {.nofit{ background-image: url(images/bj.jpg); width:auto;height:1008px;}
  28.  .content1{margin-top:-230px;margin-left: 96px;position:absolute; }
  29.  .startbutton{background: url(images/startLotteryEn.png); width:480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }
  30.  }
  31.  
  32.  @media only screen and (min-width: 480px) and (max-width: 767px){ .nofit{background-image: url(images/bj.jpg); width:auto;height:1008px;}
  33.  .content1{margin-top:-230px;margin-left: 96px;position:absolute; }
  34.  .startbutton{background: url(images/startLotteryEn.png); width:480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }
  35.  } 
  36.  
  37.   @media only screen and (min-width: 321px) and (max-width: 479px){
  38. .nofit { background-image: url(images/bj1.jpg); width:auto;height:523px;}
  39.  
  40.    .startbutton{background: url(images/startLotteryEn1.png);    width: 162px;    height: 38px;    margin-top: -104px;    margin-left: 20px;position:absolute; }
  41.  
  42.   .content1 {
  43.     margin-top: -148px;
  44.     margin-left: 43px;position:absolute; }
  45.  } 
  46.  
  47. @media only screen and (max-width: 320px) { .nofit { background-image: url(images/bj1.jpg); width:auto;height:523px;}
  48.  
  49.    .startbutton{background: url(images/startLotteryEn1.png);    width: 162px;    height: 38px;    margin-top: -104px;    margin-left: -80px;position:absolute; }
  50.  
  51.   .content1 {
  52.     margin-top: -148px;
  53.     margin-left: 43px;position:absolute; }
  54.  }
  55.  
  56. /*   .startbutton{background: url(images/startLotteryEn1.png);    width: 162px;    height: 38px;    margin-top: -104px;    margin-left: -20px;position:absolute; }
  57. */
  58.  
  59. </style>
  60. <script  type="text/JavaScript">
  61. function funLoad()//页面加载执行此函数
  62. {
  63.     /*     var wjb51=screen.width;
  64.     var hjb51=screen.height;
  65.     alert("经系统检测，你的屏幕分辨率为 " + wjb51+"*"+ hjb51 + "by 脚本之家jb51.net");  */
  66.  
  67.     checkDate();
  68.     if("true"=="${empty requestScope.questionlist}")//如果没有邀请码，就不显示 抽奖画面
  69.      {
  70.         document.getElementById("HomePage").style.display="none";
  71.      }
  72.  
  73. }
  74. function countdown ()
  75. {
  76.     var oldDate ="${prize.startTime}";//获取系统  开始  答题 时间
  77.     var end=parseToDate(oldDate);// new Date(Date.parse(oldDate.replace(/-/g, "/")));
  78.  
  79.     var now = new Date ();
  80.  
  81.     var m = Math.round ((end - now) / 1000);
  82.     var day = parseInt (m / 24 / 3600);
  83.     var hours = parseInt ((m % (3600 * 24)) / 3600);
  84.     var minutes = parseInt ((m % 3600) / 60);
  85.     var seconds = m % 60;
  86.     if (m < 0)//时间到了，可以抽奖
  87.     {
  88.         if(screen.width<541)
  89.             {
  90.             document.getElementById('startbutton').style.background="url(images/startLottery1.png)";
  91.             }
  92.         else
  93.             {
  94.             document.getElementById('startbutton').style.background="url(images/startLottery.png)";
  95.             }
  96.  
  97.         document.getElementById("content1").innerHTML="时间到了赶快抽奖吧！";
  98.         document.getElementById('startbutton').addEventListener('click', showQuestion);
  99.         return ;
  100.     }
  101.     document.getElementById("content1").innerHTML="时间还没有到，不能开始抽奖,离开始还剩" + day + "天" + hours + "小时" + minutes + "分钟" + seconds
  102.             + "秒";
  103.  
  104.     setTimeout ('countdown()', 1000);
  105.  
  106. }
  107.  
  108. function checkDate()
  109. {
  110.     var oldDate ="${prize.startTime}";//获取系统  开始  答题 时间
  111.     var startTime=parseToDate(oldDate); //new Date(Date.parse(oldDate.replace(/-/g, "/")));  //抽奖开始 时间  兼容 火狐浏览器
  112.     var newTime=new Date();//此刻时间
  113.     if(newTime-startTime>=0)//如果，现在的时间比 抽奖开始时间大，就可以开始抽奖了
  114.     {
  115.         //时间到了，可以抽奖
  116.         document.getElementById("HomePage").style.display="block";
  117.  
  118.         if(screen.width<541)
  119.         {
  120.         document.getElementById('startbutton').style.background="url(images/startLottery1.png)";
  121.         }
  122.       else
  123.         {
  124.         document.getElementById('startbutton').style.background="url(images/startLottery.png)";
  125.         }
  126.  
  127.         document.getElementById('startbutton').addEventListener('click', showQuestion);
  128.     }
  129.     else//时间还没有到，不能开始抽奖
  130.     {
  131.         document.getElementById("HomePage").style.display="block";
  132.         countdown ();//倒计时函数
  133.     }
  134.  
  135. }
  136. //js中将一串字符串转换为date类型，主要是先过滤字符，然后分割开  兼容火狐浏览器
  137. function parseToDate(strTime)
  138. {
  139.     var arr=strTime.split(" ");
  140.     if(arr.length>=2)
  141.     {
  142.         var arr1=arr[0].split("-");
  143.         var arr2=arr[1].split(":");
  144.     }
  145.     else
  146.         return null;
  147.     if(arr1.length>=3 && arr2.length>=3)
  148.     {
  149.         var b=new Date(arr1[0],arr1[1]-1,arr1[2],arr2[0],arr2[1],arr2[2]);//将字符串转换为date类型
  150.         return b;
  151.     }
  152.     else
  153.         return null;
  154. }
  155.  
  156. function showQuestion()//显示 抽奖问题
  157. {
  158.     document.getElementById("HomePage").style.display="none";
  159.     var div=document.getElementById("div_all");
  160.     var divs=div.getElementsByTagName("div");
  161.     if(divs.length > 0)
  162.     {
  163.         for(var i=0;i<divs.length;i++)
  164.         {
  165.             if(i == 0)
  166.             {
  167.                 divs.item(i).style.display="block";
  168.             }
  169.         }
  170.     }
  171. }
  172.  
  173. function funTouch(obj,index,isTrue)
  174. {
  175.     if(isTrue == 1)
  176.     {
  177.         obj.style.backgroundImage="url(images/selecttrue.png)";
  178.         var div=document.getElementById("div_all");
  179.         var divs=div.getElementsByTagName("div");
  180.         divs.item(index).style.display="none";
  181.         if(divs.length > (index + parseInt(1)))
  182.         {
  183.             divs.item(index + 1).style.display="block";
  184.         }
  185.         else
  186.         {
  187.             var commit=document.getElementById("commit");
  188.             commit.style.display="block";
  189.         }
  190.     }
  191.     else
  192.     {
  193.         obj.style.backgroundImage="url(images/selectfalse.png)";
  194.     }
  195. }
  196.  
  197. function commitResult()
  198. {
  199.     window.location.href="/wap/wap!apiCommitAnswer.html2?prizeId=" + ${prizeId};
  200. }
  201.  
  202. </script>
  203. <title>年会抽奖 - 药小二-手机版</title>
  204. <link type="text/css" rel="stylesheet" href="/wap/css/main.css" />
  205. </head>
  206. <body class="body" onload="funLoad();">
  207.     <header class="header clearfix">
  208.         <div class="goback fl">
  209.             <a href="/wap/wap!member.html2"><img
  210.                 src='/wap/images/icon_back.png' width="12" /></a>
  211.         </div>
  212.         <div class="logo">${prize.prizeName} 答题有奖</div>
  213.     </header>
  214.  
  215.     <div id="div_all">
  216.         <c:if test="${!empty requestScope.questionlist}">
  217.             <c:forEach var="item" items="${requestScope.questionlist}"
  218.                 varStatus="st">
  219.                 <div id="block" style="display:none;">
  220.  
  221.                         <dt>
  222.                             <c:out value="${item.questionContent}" />
  223.                         </dt>
  224.  
  225.                         <dd style="margin-top: 20px;" onclick="funTouch(this,${st.index},${item.answers[0].isTrue});">
  226.                             <c:out value="${item.answers[0].answerContent}" />
  227.                         </dd>
  228.  
  229.                         <dd  onclick="funTouch(this,${st.index},${item.answers[1].isTrue});">
  230.                             <c:out value="${item.answers[1].answerContent}" />
  231.                         </dd>
  232.  
  233.                         <dd  onclick="funTouch(this,${st.index},${item.answers[2].isTrue});">
  234.                             <c:out value="${item.answers[2].answerContent}" />
  235.                         </dd>
  236.  
  237.                         <dd  onclick="funTouch(this,${st.index},${item.answers[3].isTrue});">
  238.                             <c:out value="${item.answers[3].answerContent}" />
  239.                         </dd>
  240.  
  241.                         <c:if test="${item.answerCount eq 5} }">
  242.                          <dd   onclick="funTouch(this,${st.index},${item.answers[4].isTrue});">
  243.                             <c:out value="${item.answers[4].answerContent}" />
  244.                         </dd>
  245.                         </c:if>
  246.  
  247.                 </div>
  248.             </c:forEach>
  249.         </c:if>
  250.     </div>    
  251.  
  252.     <div id="commit" style="display:none;">
  253.       <span class="overspan">恭喜完成答题</span>
  254.       <br/>
  255.       <button class="commitbutton" onclick="commitResult();"></button>
  256.     </div>
  257.  
  258.         <c:if test="${empty requestScope.questionlist}"><!--  没有问题 答了，显示此div-->
  259.                     <div class="nofit"  style="color: #fff;"></div>
  260.                     <button class="startbutton" onclick="startbutton();"></button>
  261.                     <div class="content1">${errMessage}</div>
  262.         </c:if>
  263.         <div id="HomePage" style="display:none;">
  264.         <div  class="nofit"  style="color: #fff;"></div>
  265.         <button id="startbutton" class="startbutton" ></button>
  266.         <div id="content1" class="content1">${errMessage}</div>
  267.         </div>
  268. </body>
  269. </html>

js 定时跳转， 格式化字符串时间的更多相关文章

  1. js定时跳转

    在项目中有时会用到定时跳转,自己收藏了一个比较好用的 js写的,不依赖jQuery <script type="text/javascript"> function c ...

  2. mssql 格式化字符串 /时间 年月日时分秒

    比如:1 想格式化 000001,100 格式化为000100: 思路是这样的 1000000 +格式化的数字 取后6位: select   right(cast(power(10,6) as var ...

  3. JS定时跳转URL并输出剩余秒数

    1. [代码][JavaScript]代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <scrip ...

  4. js 倒计时 跳转

    1. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code ...

  5. [javascript]各种页面定时跳转(倒计时跳转)代码总结

    (1)使用setTimeout函数实现定时跳转(如下代码要写在body区域内) <script type="text/javascript"> //3秒钟之后跳转到指定 ...

  6. js正则格式化日期时间自动补0

    原文 js正则格式化日期时间自动补0 背景 时间日期格式化的需求很常见,也有很多工具类转换方法,比如需要将2022-3-4这种日期格式转化为2022-03-04,也就是实现个位数月份或天数日期自动前置 ...

  7. JS定时刷新页面及跳转页面

    JS定时刷新页面及跳转页面 Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history ...

  8. Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...

  9. JS 字符串转日期格式 日期格式化字符串

    /** * @author 陈维斌 http://www.cnblogs.com/Orange-C/p/4042242.html%20 3 * 如果想将日期字符串格式化,需先将其转换为日期类型Date ...

随机推荐

  1. WPF/Silverlight Template使用及总结（转）

    WPF/Silverlight 中的控件都有Style和Template两种属性.前者解释为样式,是用来改变控件原有属性的,比如 Button 控件的(Width,Height,Background ...

  2. js:语言精髓笔记9--函数式语言特征

    形式化运算系统的研究: 图灵:提出图灵机形式系统,通过0,1运算系统来解决复杂问题: 冯诺依曼:提出了冯诺依曼体系:即通过修改内存反映运算结果: 阿隆左.丘奇:提出新的运算范型Lambda演算,计算机 ...

  3. 在visual studio中使用git版本系统(zz)

    第一部分: 安装 git 开发工具 如果要使用 git 进行版本管理,其实使用 git 命令行工具就完全足够了,图形化工具(无论是 git extentions ,还是TortoiseGit),都只不 ...

  4. ！ cocos2d 同一个sprite的触控问题

    如果对一个A sprite添加触控,然后在一个场景中创建四个A的实例,那么1234逐个添加的话,只有最后一个会被点击到.其他的将不会响应.

  5. 【wikioi】1250 Fibonacci数列（矩阵乘法）

    http://wikioi.com/problem/1250/ 我就不说这题有多水了. 0 1 1 1 矩阵快速幂 #include <cstdio> #include <cstri ...

  6. jpeglib使用指南

    您可以到http://www.ijg.org/网站下载libjpeg的源码, IJG JPEG Library就是jpeg压缩库,是以源码的形式提供给软件开发人员的,当然在软件包里也有编译好的库文件, ...

  7. linux中shell变量$#,$@,$*,$?,$$,$!,$_,$0,$1,$2的含义解释

    变量说明:    $$    Shell本身的PID(ProcessID)    $!    Shell最后运行的后台Process的PID    $?    最后运行的命令的结束代码(返回值)    ...

  8. ZXing二维码的生成和解析

    Zxing是Google提供的关于条码(一维码.二维码)的解析工具,提供了二维码的生成与解析的方法, 现在我简单介绍一下使用Java利用Zxing生成与解析二维码 注意: 二维码的生成需要借助辅助类( ...

  9. FLTK 1.1.10 VS2010 Configuration 配置

    Download FLTK 1.1.10 at here. Download VS2010 Download CMake 2.8.12 I assume you've already installe ...

  10. JS让input按钮不能点击

    <input value="开通" type="button" id="tijiao" class="button" ...