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>
js 定时跳转， 格式化字符串时间的更多相关文章
- js定时跳转
在项目中有时会用到定时跳转,自己收藏了一个比较好用的 js写的,不依赖jQuery <script type="text/javascript"> function c ...
- mssql 格式化字符串 /时间 年月日时分秒
比如:1 想格式化 000001,100 格式化为000100: 思路是这样的 1000000 +格式化的数字 取后6位: select right(cast(power(10,6) as var ...
- 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 ...
- js 倒计时 跳转
1. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code ...
- [javascript]各种页面定时跳转(倒计时跳转)代码总结
(1)使用setTimeout函数实现定时跳转(如下代码要写在body区域内) <script type="text/javascript"> //3秒钟之后跳转到指定 ...
- js正则格式化日期时间自动补0
原文 js正则格式化日期时间自动补0 背景 时间日期格式化的需求很常见,也有很多工具类转换方法,比如需要将2022-3-4这种日期格式转化为2022-03-04,也就是实现个位数月份或天数日期自动前置 ...
- JS定时刷新页面及跳转页面
JS定时刷新页面及跳转页面 Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history ...
- Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例
Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...
- JS 字符串转日期格式 日期格式化字符串
/** * @author 陈维斌 http://www.cnblogs.com/Orange-C/p/4042242.html%20 3 * 如果想将日期字符串格式化,需先将其转换为日期类型Date ...
随机推荐
- SU Demos-04Deconvolution-02Wiener_Levinson
本Demo共有4个脚本,我只看了第一个,后面的3个不熟悉,就不往这里贴图了,望谅解. 不足之处,欢迎批评指正. 先看readme 生成数据所需的c程序 make上述c程序时需要的makefile(本人 ...
- jquery.validate.js使用说明——后台添加用户邮箱功能：非空、不能重复、格式正确
重点内容为: jQuery验证控件jquery.validate.js使用说明+中文API[http://www.tuicool.com/articles/iABvI3] 简单教程可以参考[jQue ...
- A jubeat
Time Limit:1000MS Memory Limit:65535K 题型: 编程题 语言: 无限制 描述 jubeat是一款由日本KONAMI倾心打造的体感音乐游戏,该作在日韩.香港等地 ...
- ural 1155. Troubleduons
1155. Troubleduons Time limit: 0.5 secondMemory limit: 64 MB Archangel of the Science is reporting:“ ...
- BZOJ1767 : [Ceoi2009]harbingers
设d[i]表示i到1的距离 f[i]=w[i]+min(f[j]+(d[i]-d[j])*v[i])=w[i]+d[i]*v[i]+min(-d[j]*v[i]+f[j]) 对这棵树进行点分治,每次递 ...
- HDU 1011 (树形DP+背包）
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1011 题目大意:树上取点,先取父亲,再取儿子.每个点,权为w,花费为cost,给定m消费总额,求最大 ...
- intro.js 页面引导简单用法
下载地址:http://pan.baidu.com/share/link?shareid=1894002026&uk=1829018343 <!DOCTYPE HTML PUBLIC & ...
- 【BZOJ】1862: [Zjoi2006]GameZ游戏排名系统 & 1056: [HAOI2008]排名系统（treap+非常小心）
http://www.lydsy.com/JudgeOnline/problem.php?id=1862 http://www.lydsy.com/JudgeOnline/problem.php?id ...
- kernel里面出现了类似isegfault at xxx ip 错误
今天同时碰到了错误如下,但是没有core,当时通过代码审查解决了问题,后续再查的时候发现可以使用addr2line 查找代码行, segfault at 10000 ip b7f0f48a sp bf ...
- linux 好用的程序
来自 http://www.cnblogs.com/skyseraph/archive/2010/10/30/1865280.html * Shell: bash.我使用 bash 的 vi 命令 ...