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#学习笔记（三）——流程控制
一.布尔逻辑 1.与布尔有关的2元运算符 2.布尔运算符 PS:“&”与“&&“之类的区别 (1)”&“是按位运算,也就是说是将2个数都转换成2进制,然后逐个进行与操作 ...
- P/Invoke .NET调用win32API
项目:无线无源测温软件系统 项目中,用到使用P/Invoke在.NET调用win32API,实现对ini配置文件的读写功能!因为有一些配置信息需要保存下来,以便在下一次启动程序完成初始化,这实际上是一 ...
- 织梦内页读取栏目banner图
<img src="{dede:field name='typeid' runphp='yes'} global $dsql; $typeid = @me; $query = 'SEL ...
- [hive小技巧]使用limit查询变成抽样，而不是全盘扫描
将set hive.limit.optimize.enable=true 时,limit限制数据时就不会全盘扫,而是根据限制的数量进行抽样. 同时还有两个配置项需要注意: 1.hive.limit.r ...
- [LintCode] Permuation Index
Given a permutation which contains no repeated number, find its index in all the permutations of the ...
- 找规律/数位DP HDOJ 4722 Good Numbers
题目传送门 /* 找规律/数位DP:我做的时候差一点做出来了,只是不知道最后的 is_one () http://www.cnblogs.com/crazyapple/p/3315436.html 数 ...
- POJ1780 Code（欧拉路径）
n位密码,要用尽可能短的序列将n位密码的10n种状态的子串都包括,那么要尽量地重合. 题目已经说最短的是10n + n - 1,即每一个状态的后n-1位都和序列中后一个状态的前n-1位重合. 这题是经 ...
- 【Vijos】1431 守望者的逃离
题目链接:https://vijos.org/p/1431 算法:贪心 描述 恶魔猎手尤迪安野心勃勃,他背叛了暗夜精灵,率领深藏在海底的娜迦族企图叛变.守望者在与尤迪安的交锋中遭遇了围杀,被困在一个荒 ...
- 20145302张薇《Java程序设计》实验三报告
20145302张薇<Java程序设计>实验三:敏捷开发与XP实践 实验内容 使用git上传代码 使用git实现代码开发实践 实现代码的重载 使用git上传代码 git init git ...
- PHP 常用到的一些小程序
1.计算两个时间的相差几天 $startdate=strtotime(“2009-12-09”); $enddate=strtotime(“2009-12-05”); 上面的php时间日期函数strt ...