81,091
社区成员
发帖
与我相关
我的任务
分享很多网页游戏里面的“训练完成时间倒计时 XX天XX小时XX分钟XX秒” 是怎么完成的？
很多网页游戏里面的“训练完成时间倒计时 XX天XX小时XX分钟XX秒” 是怎么完成的？应该没有用到JS的自动刷新吧。求高手指路。
...全文
请发表友善的回复…
发表回复
blackhumor_7 2010-07-20
- 打赏
- 举报
现在是5楼的问题。timer停止不了。
sherry521 2010-07-20
- 打赏
- 举报
同意楼上的，时间一定是服务器上的，不能是客户端的时间，然后用js做个倒计时就OK了
loveunittesting 2010-07-20
- 打赏
- 举报
总共训练了多长时间，需要的总时间，都记录在服务器上了，每次登录后，从服务器拿到还剩多长时间，然后在页面上用setInterval方法连续刷新页面上的时间就行了。就像3楼的方法
blackhumor_7 2010-07-20
- 打赏
- 举报
timer 一直没停止，关闭了IE，下次打开页面时，还是从上次的时间开始倒计时。停止服务器也是一样。
<%@ page language="java" pageEncoding="GB18030"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
<head>
<html:base />
<title>time.jsp</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
var counter,startTime,normalelapse = 1000,nextelapse = normalelapse,timer = null,start1=null;
var alert_time="00:05:00",finish = "00:00:00";
function run(){
counter = 0;
startTime = new Date().valueOf(); // 初始化开始时间
// nextelapse是定时时间，初始时为1000毫秒
// 注意setInterval函数： 时间逝去nextelapse(毫秒)后，onTimer才开始执行
timer = window.setInterval("onTimer()",nextelapse);
}
function stop() {
window.clearTimeout(timer);} // 停止运行
function onTimer(){ // 倒计时函数
if(document.getElementById("clock").innerText==alert_time) { alert("还有5分钟结束，请做好结束准备！");} //剩余5分钟时，提示警告信息
if (document.getElementById("clock").innerText== finish) { //倒计时结束
window.clearInterval(timer);
alert("倒计时结束!");
return;
}
var hms = new String(document.getElementById("clock").innerText).split(":");
var s = new Number(hms[2]);
var m = new Number(hms[1]);
var h = new Number(hms[0]);
s -= 1;
if (s < 0) { s = 59;m -= 1;}
if (m < 0){ m = 59;h -= 1; }
var ss = s < 10 ? ("0" + s):s;
var sm = m < 10 ? ("0" + m):m;
var sh = h < 10 ? ("0" + h):h;
start = sh + ":" + sm + ":" + ss ; //显示倒计时
document.getElementById("clock").innerText = start;
window.clearInterval(timer); // 清除上一次的定时器
// 自校验系统时间得到时间差，并由此得到下次所启动的新定时器的间隔时间nextelapse
counter++;
var counterSecs = counter *1000;
var elapseSecs = new Date().valueOf() - startTime; //已经经过的秒数
var diffSecs = counterSecs - elapseSecs;
//如果误差在1秒之内，则可以接受
//否则认为客户端用户调整了系统时间，不再进行定时器误差调整，仍使用默认值1000ms
if (Math.abs(diffSecs)<1000) {
nextelapse = normalelapse + diffSecs;
}
else
nextelapse=normalelapse;
// 启动新的定时器
timer = window.setInterval("onTimer()",nextelapse);
}
</script>
</head>
<body onload="javascript:run();" onbeforeunload="stop()">
<%
SimpleDateFormat dfs = new SimpleDateFormat ("yyyy-MM-dd HH:mm:ss");
java.util.Date begin=new Date();
java.util.Date end = dfs.parse("2010-08-19 23:37:00");
long l=end.getTime()-begin.getTime();
long day=l/(24*60*60*1000);
long hour=(l/(60*60*1000));
long hour2=(l/(60*60*1000)-day*24);
long min=((l/(60*1000))-day*24*60-hour2*60);
long s=(l/1000-day*24*60*60-hour2*60*60-min*60);
String interval=hour+":"+min+":"+s;
%>
剩余时间：<span id="clock"><%=interval%></span>
</body>
</html:html>
loading 2010-07-20
- 打赏
- 举报
JS没问题的，可以搜一下
closewbq 2010-07-20
- 打赏
- 举报
1.首先将服务器上的一个时间赋值给一个控件（标签了，隐藏域。。）
2.接着在JS中得到这个时间。（这个肯定会吧。）
3.写倒计时的JS代码。
最简单的方法是将时间放置在windows.name中。
<script type="text/javascript">
windows.name=服务器时间
function tick()
{
var maxTime=windows.name;
将maxTime换算成秒的形式，
IF(maxTime>0)
{
进行--操作
然后将maxTime--后的值付给将要显示的标签
window.setInterval("1000","tick()");//每秒调用一次，这样时间就会开始倒计时
}else
{
alert("嘿嘿，不能训练了，时间到了")
}
}
</script>
思路就是这样的。希望对你有帮助
2.接着在JS中得到这个时间。（这个肯定会吧。）
3.写倒计时的JS代码。
最简单的方法是将时间放置在windows.name中。
<script type="text/javascript">
windows.name=服务器时间
function tick()
{
var maxTime=windows.name;
将maxTime换算成秒的形式，
IF(maxTime>0)
{
进行--操作
然后将maxTime--后的值付给将要显示的标签
window.setInterval("1000","tick()");//每秒调用一次，这样时间就会开始倒计时
}else
{
alert("嘿嘿，不能训练了，时间到了")
}
}
</script>
思路就是这样的。希望对你有帮助
JavPer 2010-07-20
- 打赏
- 举报
js可以的
androidmvc 2010-07-20
- 打赏
- 举报
定时器。。。。定时刷新
你可以百度一下
你可以百度一下
