效果

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

//js中将一串字符串转换为date类型，主要是先过滤字符，然后分割开

function parseToDate(strTime)

{

    var arr=strTime.split(" ");

    if(arr.length>=2)

    {

        var arr1=arr[0].split("-");

        var arr2=arr[1].split(":");

    }

    else

        return null;

    if(arr1.length>=3 && arr2.length>=3)

    {

        var b=new Date(arr1[0],arr1[1]-1,arr1[2],arr2[0],arr2[1],arr2[2]);//将字符串转换为date类型

        return b;

    }

    else

        return null;

}

注意月份要减一；

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、兼容移动端页面

@media screen and (min-width:1200px){ .nofit{background-image: url(images/bj.jpg); width:auto;height:1008px;}

.content1{margin-top:-230px;margin-left: 96px;position:absolute; }

 .startbutton{background: url(images/startLotteryEn.png); width:480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }

}

 @media screen and (min-width: 960px) and (max-width: 1199px) { .nofit{ background-image: url(images/bj.jpg); width:auto;height:1008px;}

 .content1{margin-top:-230px;margin-left: 96px;position:absolute; }

 .startbutton{background: url(images/startLotteryEn.png); width:480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }

 }

 @media screen and (min-width: 768px) and (max-width: 959px) {.nofit{ background-image: url(images/bj.jpg); width:auto;height:1008px;}

 .content1{margin-top:-230px;margin-left: 96px;position:absolute; }

 .startbutton{background: url(images/startLotteryEn.png); width:480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }

 }

 @media only screen and (min-width: 480px) and (max-width: 767px){ .nofit{background-image: url(images/bj.jpg); width:auto;height:1008px;}

 .content1{margin-top:-230px;margin-left: 96px;position:absolute; }

 .startbutton{background: url(images/startLotteryEn.png); width:480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }

 } 

  @media only screen and (min-width: 321px) and (max-width: 479px){

.nofit { background-image: url(images/bj1.jpg); width:auto;height:523px;}

   .startbutton{background: url(images/startLotteryEn1.png);    width: 162px;    height: 38px;    margin-top: -104px;    margin-left: 20px;position:absolute; }

  .content1 {

    margin-top: -148px;

    margin-left: 43px;position:absolute; }

 } 

@media only screen and (max-width: 320px) { .nofit { background-image: url(images/bj1.jpg); width:auto;height:523px;}

   .startbutton{background: url(images/startLotteryEn1.png);    width: 162px;    height: 38px;    margin-top: -104px;    margin-left: -80px;position:absolute; }

  .content1 {

    margin-top: -148px;

    margin-left: 43px;position:absolute; }

 }

源代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ page isELIgnored="false"%>

<%@ include file="/newver/common/taglibs.inc"%>

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0" />

<meta content="telephone=no" name="format-detection" />

<style type="text/css">

dt {font-size: 20px; color: #fff; margin-top: 40px;}

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;}

.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;}

.overspan{color: #0000ff;font-size: 20px;margin-top: 160px;display: block;}

.commitbutton{background-image: url(images/commit.png); width:322px;height:92px;margin-top: 80px; }

@media screen and (min-width:1200px){ .nofit{background-image: url(images/bj.jpg); width:auto;height:1008px;}

.content1{margin-top:-230px;margin-left: 96px;position:absolute; }

 .startbutton{background: url(images/startLotteryEn.png); width:480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }

}

 @media screen and (min-width: 960px) and (max-width: 1199px) { .nofit{ background-image: url(images/bj.jpg); width:auto;height:1008px;}

 .content1{margin-top:-230px;margin-left: 96px;position:absolute; }

 .startbutton{background: url(images/startLotteryEn.png); width:480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }

 }

 @media screen and (min-width: 768px) and (max-width: 959px) {.nofit{ background-image: url(images/bj.jpg); width:auto;height:1008px;}

 .content1{margin-top:-230px;margin-left: 96px;position:absolute; }

 .startbutton{background: url(images/startLotteryEn.png); width:480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }

 }

 @media only screen and (min-width: 480px) and (max-width: 767px){ .nofit{background-image: url(images/bj.jpg); width:auto;height:1008px;}

 .content1{margin-top:-230px;margin-left: 96px;position:absolute; }

 .startbutton{background: url(images/startLotteryEn.png); width:480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }

 } 

  @media only screen and (min-width: 321px) and (max-width: 479px){

.nofit { background-image: url(images/bj1.jpg); width:auto;height:523px;}

   .startbutton{background: url(images/startLotteryEn1.png);    width: 162px;    height: 38px;    margin-top: -104px;    margin-left: 20px;position:absolute; }

  .content1 {

    margin-top: -148px;

    margin-left: 43px;position:absolute; }

 } 

@media only screen and (max-width: 320px) { .nofit { background-image: url(images/bj1.jpg); width:auto;height:523px;}

   .startbutton{background: url(images/startLotteryEn1.png);    width: 162px;    height: 38px;    margin-top: -104px;    margin-left: -80px;position:absolute; }

  .content1 {

    margin-top: -148px;

    margin-left: 43px;position:absolute; }

 }

/*   .startbutton{background: url(images/startLotteryEn1.png);    width: 162px;    height: 38px;    margin-top: -104px;    margin-left: -20px;position:absolute; }

*/

</style>

<script  type="text/JavaScript">

function funLoad()//页面加载执行此函数

{

    /*     var wjb51=screen.width;

    var hjb51=screen.height;

    alert("经系统检测，你的屏幕分辨率为 " + wjb51+"*"+ hjb51 + "by 脚本之家jb51.net");  */

    checkDate();

    if("true"=="${empty requestScope.questionlist}")//如果没有邀请码，就不显示 抽奖画面

     {

        document.getElementById("HomePage").style.display="none";

     }

}

function countdown ()

{

    var oldDate ="${prize.startTime}";//获取系统  开始  答题 时间

    var end=parseToDate(oldDate);// new Date(Date.parse(oldDate.replace(/-/g, "/")));

    var now = new Date ();

    var m = Math.round ((end - now) / 1000);

    var day = parseInt (m / 24 / 3600);

    var hours = parseInt ((m % (3600 * 24)) / 3600);

    var minutes = parseInt ((m % 3600) / 60);

    var seconds = m % 60;

    if (m < 0)//时间到了，可以抽奖

    {

        if(screen.width<541)

            {

            document.getElementById('startbutton').style.background="url(images/startLottery1.png)";

            }

        else

            {

            document.getElementById('startbutton').style.background="url(images/startLottery.png)";

            }

        document.getElementById("content1").innerHTML="时间到了赶快抽奖吧！";

        document.getElementById('startbutton').addEventListener('click', showQuestion);

        return ;

    }

    document.getElementById("content1").innerHTML="时间还没有到，不能开始抽奖,离开始还剩" + day + "天" + hours + "小时" + minutes + "分钟" + seconds

            + "秒";

    setTimeout ('countdown()', 1000);

}

function checkDate()

{

    var oldDate ="${prize.startTime}";//获取系统  开始  答题 时间

    var startTime=parseToDate(oldDate); //new Date(Date.parse(oldDate.replace(/-/g, "/")));  //抽奖开始 时间  兼容 火狐浏览器

    var newTime=new Date();//此刻时间

    if(newTime-startTime>=0)//如果，现在的时间比 抽奖开始时间大，就可以开始抽奖了

    {

        //时间到了，可以抽奖

        document.getElementById("HomePage").style.display="block";

        if(screen.width<541)

        {

        document.getElementById('startbutton').style.background="url(images/startLottery1.png)";

        }

      else

        {

        document.getElementById('startbutton').style.background="url(images/startLottery.png)";

        }

        document.getElementById('startbutton').addEventListener('click', showQuestion);

    }

    else//时间还没有到，不能开始抽奖

    {

        document.getElementById("HomePage").style.display="block";

        countdown ();//倒计时函数

    }

}

//js中将一串字符串转换为date类型，主要是先过滤字符，然后分割开  兼容火狐浏览器

function parseToDate(strTime)

{

    var arr=strTime.split(" ");

    if(arr.length>=2)

    {

        var arr1=arr[0].split("-");

        var arr2=arr[1].split(":");

    }

    else

        return null;

    if(arr1.length>=3 && arr2.length>=3)

    {

        var b=new Date(arr1[0],arr1[1]-1,arr1[2],arr2[0],arr2[1],arr2[2]);//将字符串转换为date类型

        return b;

    }

    else

        return null;

}

function showQuestion()//显示 抽奖问题

{

    document.getElementById("HomePage").style.display="none";

    var div=document.getElementById("div_all");

    var divs=div.getElementsByTagName("div");

    if(divs.length > 0)

    {

        for(var i=0;i<divs.length;i++)

        {

            if(i == 0)

            {

                divs.item(i).style.display="block";

            }

        }

    }

}

function funTouch(obj,index,isTrue)

{

    if(isTrue == 1)

    {

        obj.style.backgroundImage="url(images/selecttrue.png)";

        var div=document.getElementById("div_all");

        var divs=div.getElementsByTagName("div");

        divs.item(index).style.display="none";

        if(divs.length > (index + parseInt(1)))

        {

            divs.item(index + 1).style.display="block";

        }

        else

        {

            var commit=document.getElementById("commit");

            commit.style.display="block";

        }

    }

    else

    {

        obj.style.backgroundImage="url(images/selectfalse.png)";

    }

}

function commitResult()

{

    window.location.href="/wap/wap!apiCommitAnswer.html2?prizeId=" + ${prizeId};

}

</script>

<title>年会抽奖 - 药小二-手机版</title>

<link type="text/css" rel="stylesheet" href="/wap/css/main.css" />

</head>

<body class="body" onload="funLoad();">

    <header class="header clearfix">

        <div class="goback fl">

            <a href="/wap/wap!member.html2"><img

                src='/wap/images/icon_back.png' width="12" /></a>

        </div>

        <div class="logo">${prize.prizeName} 答题有奖</div>

    </header>

    <div id="div_all">

        <c:if test="${!empty requestScope.questionlist}">

            <c:forEach var="item" items="${requestScope.questionlist}"

                varStatus="st">

                <div id="block" style="display:none;">

                        <dt>

                            <c:out value="${item.questionContent}" />

                        </dt>

                        <dd style="margin-top: 20px;" onclick="funTouch(this,${st.index},${item.answers[0].isTrue});">

                            <c:out value="${item.answers[0].answerContent}" />

                        </dd>

                        <dd  onclick="funTouch(this,${st.index},${item.answers[1].isTrue});">

                            <c:out value="${item.answers[1].answerContent}" />

                        </dd>

                        <dd  onclick="funTouch(this,${st.index},${item.answers[2].isTrue});">

                            <c:out value="${item.answers[2].answerContent}" />

                        </dd>

                        <dd  onclick="funTouch(this,${st.index},${item.answers[3].isTrue});">

                            <c:out value="${item.answers[3].answerContent}" />

                        </dd>

                        <c:if test="${item.answerCount eq 5} }">

                         <dd   onclick="funTouch(this,${st.index},${item.answers[4].isTrue});">

                            <c:out value="${item.answers[4].answerContent}" />

                        </dd>

                        </c:if>

                </div>

            </c:forEach>

        </c:if>

    </div>    

    <div id="commit" style="display:none;">

      <span class="overspan">恭喜完成答题</span>

      <br/>

      <button class="commitbutton" onclick="commitResult();"></button>

    </div>

        <c:if test="${empty requestScope.questionlist}"><!--  没有问题 答了，显示此div-->

                    <div class="nofit"  style="color: #fff;"></div>

                    <button class="startbutton" onclick="startbutton();"></button>

                    <div class="content1">${errMessage}</div>

        </c:if>

        <div id="HomePage" style="display:none;">

        <div  class="nofit"  style="color: #fff;"></div>

        <button id="startbutton" class="startbutton" ></button>

        <div id="content1" class="content1">${errMessage}</div>

        </div>

</body>

</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. Grunt上手指南<转>

    原文链接:http://www.hulufei.com/post/grunt-introduction 安装 如果之前有装过grunt,卸载之 npm uninstall -g grunt 安装gru ...

  2. nmon性能监控工具总结

    一.nmon工具介绍 nmon 是一个分析aix和linux性能的免费工具(主要是ibm为自己的aix操作系统开发的,但是也可以用在linux操作系统),而nmon_analyser是nmon的一个工 ...

  3. UVa10779 Collectors Problem（最大流）

    很容易想到源点向所类型有贴纸连边,容量为Bob一开始有的数量:然后贴纸向汇点连边,容量为1. 接下来就是交换部分的连边了.注意交换一次一次进行,每次只能交换一张. 交换,是对于两种贴纸而言,仅会发生在 ...

  4. android studio ndk 调试

    一: 先看看用 ndk-gdb 手动调试 这种方法只适用于手动编写 Android.mk 的情况,因为我们要手动 build debug 版本的 .so 文件.具体可以参考我的前一篇文章. 1 And ...

  5. bug 修改心得

    我在做一个项目的时候,分页无法显示,于是我就开始进行各种修改. 最后我发现竟然是因为配置文件写错了,结果页面跳到别的页面, 跳转到了单项详细页面.

  6. 详细讲解css单位px,em和rem的含义以及它们之间的区别

    一.首先介绍一下px px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现! 可但是!但可是!如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚 ...

  7. TYVJ P1016 装箱问题 Label：01背包 DP

    做题记录:2016-08-15 23:07:04 背景 太原成成中学第2次模拟赛 第三道 描述 有一个箱子容量为v(正整数,o≤v≤20000),同时有n个物品(o≤n≤30),每个物品有一个体积 ( ...

  8. COJ500 杨老师的路径规划（MST） （我是认真的）

    用LCT来维护生成树,动态加边(s,t,w)时,新建节点x,权值为边权w. 1.若s与t不连通,则连接s-x,x-t,答案+w 2.若s与t连通,找出s-t路径上的最大权w2,若w<w2,删除w ...

  9. 基于Berkeley DB实现的持久化队列

    转自:http://guoyunsky.iteye.com/blog/1169912 队列很常见,但大部分的队列是将数据放入到内存.如果数据过多,就有内存溢出危险,而且长久占据着内存,也会影响性能.比 ...

  10. Oracle中Clob类型处理解析

    最近利用NHibernate映射类型为Clob字段在插入数据时发现当字符的字节数(一个半角字符一个字节,一个全角字符两个字节)在2000-4000之间时报错(ORA-01461:仅可以插入LONG列的 ...