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 ...
随机推荐
- BZOJ 1821 JSOI2010 部落划分 Group prim
Description 聪聪研究发现,荒岛野人总是过着群居的生活,但是,并不是整个荒岛上的所有野人都属于同一个部落,野人们总是拉帮结派形成属于自己的部落,不同的部落之间则经常发生争斗.只是,这一切都成 ...
- GridView实现一个图片加多个文本框
GridView的使用是很简单的,API Demo中有例子,但是要实现复杂的GridView,就需要自定义了. 今天我们要实现如下的效果: 先说它的布局,它是由gridview和grid_item两部 ...
- 判断checkbox是否被选中事件
第一种////////////////////////////////////////////////////////<input type="checkbox" value ...
- asp.net控件开发基础(1)（转）原文更多内容
asp.net本身提供了很多控件,提供给我们这些比较懒惰的人使用,我认为控件的作用就在此,因为我们不想重复工作,所以要创建它,这个本身便是一个需求的关系,所以学习控件开发很有意思. wrox网站上有本 ...
- DP VK Cup 2012 Qualification Round D. Palindrome pairs
题目地址:http://blog.csdn.net/shiyuankongbu/article/details/10004443 /* 题意:在i前面找回文子串,在i后面找回文子串相互配对,问有几对 ...
- 中文版Windows 7下设置日语格式布局的键盘
那么在一台使用日文键盘的PC上安装了中文版Windows 7后,该如何设置键盘布局呢? Windows 7的安装界面有一个很容易让人疑惑的选项.在第一个界面,安装程序就可以让你选择“键盘和输入方法”. ...
- Distributed RPC —— 分布式RPC
This tutorial showed how to do basic stream processing on top of Storm. There's lots more things you ...
- new在c#方法中的使用
new在c#中有三种用法: 1.实例化对象 2.泛型约束 3.用在方法前.new和override的区别在于:override用于重写父类的方法:new用于隐藏方法,它调用的方法来自于申明的类,如果申 ...
- "504 Gateway Time-out"
"504 Gateway Time-out”是什么意思? 意思为:网关超时!
- win95+ie3-win10+ie11 浏览器执行漏洞
alliedve.htm <!doctype html><html><meta http-equiv="X-UA-Compatible" conten ...