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 ...
随机推荐
- c++工程vs导入工程时发生LNK1207
I have installed VS 2012 , but i have VS 2010 also. After I open VS 2010 projects with VS 2012 and ...
- hdu 1181 变形课
变形课 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)Total Submis ...
- Python实践：开篇
一.概述 Python实践 是应用Python解决实际问题的案例集合,这些案例中的Python应用通常 功能各异.大小不一. 该系列文章是本人应用Python的实践总结,会不定期更新. 二.目录 Py ...
- ZOJ1655 Transport Goods（Floyd）
利用Floyd的DP状态转移方程. #include<cstdio> #include<cstring> #include<queue> #include<a ...
- extjs grid
Ext.onReady(function() { Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif'; Ext.QuickTips.in ...
- 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 ...
- Google Code Jam 2009 Qualification Round Problem C. Welcome to Code Jam
本题的 Large dataset 本人尚未解决. https://code.google.com/codejam/contest/90101/dashboard#s=p2 Problem So yo ...
- CentOS 下安装无线哥的老爷机DELL的无线驱动
使用命令检测网卡 lspci | grep Network 为“0c:00.0 Network controller: Broadcom Corporation BCM4312 802.11b/g ...
- Struts2_ValueStack,OGNL详解
一.ValueStack 1.ValueStack是一个接口,在struts2中使用OGNL(Object-Graph Navigation Language)表达式实际上是使用实现了Value ...
- VTK 6 和 VTK 5 的不同
Overview Replacement of SetInput() with SetInputData() and SetInputConnection() Removal of GetProduc ...