效果
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>