js 定时跳转， 格式化字符串时间

时间：2023-03-09 04:26:56
js 定时跳转， 格式化字符串时间

效果

js 定时跳转， 格式化字符串时间

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>

相关文章