zoukankan html css js c++ java

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-1200px){ .nofit{background-image: url(images/bj.jpg); auto;height:1008px;} 
.content1{margin-top:-230px;margin-left: 96px;position:absolute; }
 .startbutton{background: url(images/startLotteryEn.png); 480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }
}

 @media screen and (min- 960px) and (max- 1199px) { .nofit{ background-image: url(images/bj.jpg); auto;height:1008px;} 
 .content1{margin-top:-230px;margin-left: 96px;position:absolute; }
 .startbutton{background: url(images/startLotteryEn.png); 480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }
 }

 @media screen and (min- 768px) and (max- 959px) {.nofit{ background-image: url(images/bj.jpg); auto;height:1008px;} 
 .content1{margin-top:-230px;margin-left: 96px;position:absolute; }
 .startbutton{background: url(images/startLotteryEn.png); 480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }
 }

 @media only screen and (min- 480px) and (max- 767px){ .nofit{background-image: url(images/bj.jpg); auto;height:1008px;} 
 .content1{margin-top:-230px;margin-left: 96px;position:absolute; }
 .startbutton{background: url(images/startLotteryEn.png); 480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }
 } 
 
  @media only screen and (min- 321px) and (max- 479px){
.nofit { background-image: url(images/bj1.jpg); auto;height:523px;}

   .startbutton{background: url(images/startLotteryEn1.png);     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- 320px) { .nofit { background-image: url(images/bj1.jpg); auto;height:523px;}

   .startbutton{background: url(images/startLotteryEn1.png);     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- 640px;min- 320px;margin: auto;}
.overspan{color: #0000ff;font-size: 20px;margin-top: 160px;display: block;}
.commitbutton{background-image: url(images/commit.png); 322px;height:92px;margin-top: 80px; }



@media screen and (min-1200px){ .nofit{background-image: url(images/bj.jpg); auto;height:1008px;} 
.content1{margin-top:-230px;margin-left: 96px;position:absolute; }
 .startbutton{background: url(images/startLotteryEn.png); 480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }
}

 @media screen and (min- 960px) and (max- 1199px) { .nofit{ background-image: url(images/bj.jpg); auto;height:1008px;} 
 .content1{margin-top:-230px;margin-left: 96px;position:absolute; }
 .startbutton{background: url(images/startLotteryEn.png); 480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }
 }

 @media screen and (min- 768px) and (max- 959px) {.nofit{ background-image: url(images/bj.jpg); auto;height:1008px;} 
 .content1{margin-top:-230px;margin-left: 96px;position:absolute; }
 .startbutton{background: url(images/startLotteryEn.png); 480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }
 }

 @media only screen and (min- 480px) and (max- 767px){ .nofit{background-image: url(images/bj.jpg); auto;height:1008px;} 
 .content1{margin-top:-230px;margin-left: 96px;position:absolute; }
 .startbutton{background: url(images/startLotteryEn.png); 480px;height:112px;margin-top: -122px;margin-left: -250px;position:absolute; }
 } 
 
  @media only screen and (min- 321px) and (max- 479px){
.nofit { background-image: url(images/bj1.jpg); auto;height:523px;}

   .startbutton{background: url(images/startLotteryEn1.png);     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- 320px) { .nofit { background-image: url(images/bj1.jpg); auto;height:523px;}

   .startbutton{background: url(images/startLotteryEn1.png);     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);     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>

查看全文

相关阅读:
ABP 数据库 -- ABP&EF中的多表、关联查询
 C# List集合基础操作
 C# ABP 允许跨域请求
 异或运算、与运算、或运算运用在多项选择题
 C# ABP 配置连接数据库&创建表
 C# ABP WebApi与Swagger UI的集成
 C# 深入了解泛型
 8、SpringBoot+Mybatis整合------参数取值方式
 7、SpringBoot+Mybatis整合------PageHelper简单分页
 6、SpringBoot+Mybatis整合------参数传递

原文地址：https://www.cnblogs.com/weiqinshian/p/5040834.html

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

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

2、兼容移动端页面

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