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 ...
随机推荐
- loj 1011(状态压缩+记忆化搜索)
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=25837 思路:状态压缩+记忆化搜索. #include<io ...
- MATLAB信号与系统分析（五）——连续时间信号的频谱分析
一.实验目的: 1.掌握傅立叶级数(FS),学会分析连续时间周期信号的频谱分析及MATLAB实现: 2.掌握傅立叶变换(FT),了解傅立叶变换的性质以及MATLAB实现. 二.利用符号运算求傅里叶级数 ...
- struts乱码问题
我觉得很有必要记录一下,在我搜便了网上乱码问题的解决方案无果之后几乎绝望. 一定要在提交的form 加上 methd = post
- Android 返回键双击退出程序
/** * 菜单.返回键响应 */ @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == K ...
- SCU3109 Space flight（最大权闭合子图）
嗯,裸的最大权闭合子图. #include<cstdio> #include<cstring> #include<queue> #include<algori ...
- 洛谷 P1541 乌龟棋 Label：O（n^4）的dp
题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N格是终点,游戏要求玩家控制一个乌龟棋子从起 ...
- 【BZOJ】3809: Gty的二逼妹子序列
http://www.lydsy.com/JudgeOnline/problem.php?id=3809 题意:n个元素(1<=n<=100000)每个元素有一权值<=n.q个询问, ...
- hilbert
hilbert 难度级别: A: 编程语言:不限:运行时间限制:1000ms: 运行空间限制:131072KB: 代码长度限制:102400B 试题描述 图1为1阶Hilbert曲线,它由3条长度为1 ...
- BZOJ3676 [Apio2014]回文串
Description 考虑一个只包含小写拉丁字母的字符串s.我们定义s的一个子串t的“出 现值”为t在s中的出现次数乘以t的长度.请你求出s的所有回文子串中的最 大出现值. Input 输入只有一行 ...
- ajax无刷新获取php后台数据
$.ajax({ url:"result.php", //data:{"page":i}, dataType:"json", beforeS ...