[JavaScript]常用的页面倒计时
倒计时是web开发中比较常用的，以下列出常用的几个倒计时方法，仅供参考：
一 ：页面倒计时 原理一般都是通过 setTimeout 或 setInterval 函数实现，下面是一个最简单的倒计时
<script type="text/javascript">
var second=10;
var timer;
function change()
{
second--;
if(second>-1)
{
document.getElementById("second").innerHTML=second;
timer = setTimeout('change()',1000);//调用自身实现
}
else
{
clearTimeout(timer);
}
}
timer = setTimeout('change()',1000);
</script>
二：用于页面显示服务器时间，或本地时间(每秒钟读取当前时间再以指定的格式显示)
<script type=text/javascript>
var now = new Date();
function CurentTime(){
var mm = now.getMinutes();
var ss = now.getTime() % 60000;
ss = (ss - (ss % 1000)) / 1000;
var clock = now.getHours() +':';
if (mm < 10) clock += '0';
clock += mm+':';
if (ss < 10) clock += '0';
return(clock + ss);
}
function showTime(){
document.getElementById("clock").innerHTML = now.getYear()+"."+(now.getMonth()+1)+"."+now.getDate()+" "+ CurentTime();now.setSeconds(now.getSeconds()+1);}
window.onload=start;
function start(){
setInterval(showTime,1000);
}
</script>
现在时间：<body><span id="clock"></span></body>
三:由玩家提交数据的倒计时，或者是服务器返回一个剩余的秒数，比如玩家升级了某个建筑，需要2个小时，
前台从2*3600开始计时，同时保存当前数据，玩家下次刷新页面时便读取剩余的秒数。下面这个倒计时是 从 游戏<中国故事>中改写的，
这个游戏中有大量的倒计时，函数event_timer 实际有2个参数，他将每个建筑或单位标志一个唯一的id来计时的
<html>
<script type="text/javascript">
function start_event_timer(){
document.getElementById('showTime').style.display = '';
var val =document.getElementById('val_text').value;
event_timer(val);
}
//开始计时
function event_timer(time_remain) {
//由页面提交的时间与服务器时间一般都有2~4秒的差值
rt = parseInt(time_remain) + 4;s
var eventid=document.getElementById('event_time_remain');
var senond_remain=document.getElementById('senond_remain');
if (rt == 0) {
alert("timeover");
window.location.reload();
}else {
eventid.innerHTML = time_format(rt);
senond_remain.innerHTML = rt;
time_remain = time_remain - 1;
setTimeout("event_timer('" + time_remain + "')",1000);
}
}
// 以hh:mm:ss格式化时间，可以根据需要 定义格式
function time_format(s) {
var t;
if(s > -1){
hour = Math.floor(s/3600);
min = Math.floor(s/60) % 60;
sec = s % 60;
day = parseInt(hour / 24);
if (day > 0) {
hour = hour - 24 * day;
t = day + "天," + hour + ":";
}
else t = hour + ":";
if(min < 10){t += "0";}
t += min + ":";
if(sec < 10){t += "0";}
t += sec;}
else
{t = "0:00:0x";}
return t;
}
</script>
<body>
<center>
输入计时的秒数：<input type="text" id="val_text" size="5"/>
<input type ="button" onclick="start_event_timer();" value ="start"/>
<div style="display:none" id="showTime">
<p class="event_class" style="color: blue;">倒计时: <span id="event_time_remain"></span>
剩余<span id="senond_remain"></span>秒
</div>
</center>
</body>
</html>
四，网上的一个无刷新的倒计时，这个所谓的'无刷新'，就是将剩余的秒数保存到 浏览器对象
window.name中，只要窗口未关闭，值就在。个人感觉没有实际的用途，刷新就是要重新读服务器数据，实时更新的
不是在做静态页面...
<SCRIPT LANGUAGE="JavaScript">
<!--
var maxtime;
alert(window.name);
if(window.name==''){
maxtime = 60*60;
}else{
maxtime = window.name;
}
function CountDown(){
if(maxtime>=0){
minutes = Math.floor(maxtime/60);
seconds = Math.floor(maxtime%60);
msg = "还有"+minutes+"分"+seconds+"秒";
document.all["timer"].innerHTML = msg;
--maxtime;
window.name = maxtime;
}
else{
clearInterval(timer);
alert("time over");
}
}
timer = setInterval("CountDown()",1000);
//-->
</SCRIPT>
<div id="timer" style="color:red"> </div>
[JavaScript]常用的页面倒计时的更多相关文章
- Javascript之实现页面倒计时效果
本文将从需求实现的角度,逐步讲解如何在页面上实现倒计时效果,其中部分涉及到的知识会做拓展讲解,最后将所有代码封装,适用于不同情况下倒计时功能的实现. 效果图 一.分析需求 要实现倒计时效果,可拆解为以 ...
- javascript 常用获取页面宽高信息 API
在页面的构建中 常常会需要获取页面的一些宽高信息,例如实现 惰性加载图片 需要获取页面的可见区域高度 和 已滚动区域的高度,以判断图片所在位置是否可见来决定加载图片的时间, 花点时间整理了一下,获取页 ...
- 第二篇、JavaScript常用的API
下面是我整理的一些JavaScript常用的API清单. 目录 元素查找 class操作 节点操作 属性操作 内容操作 css操作 位置大小 事件 DOM加载完毕 绑定上下文 去除空格 Ajax JS ...
- javascript常用代码大全
http://caibaojian.com/288.html 原文链接 jquery选中radio //如果之前有选中的,则把选中radio取消掉 $("#tj_cat .pro_ca ...
- Javascript 常用函数【3】
jquery选中radio //如果之前有选中的,则把选中radio取消掉 $("#tj_cat .pro_category").each(function() { if ($(t ...
- 【javascript】javascript常用函数大全
javascript函数一共可分为五类: •常规函数 •数组函数 •日期函数 •数学函数 •字符串函数 1.常规函数 javascript常规函数包括以下9个函数: ( ...
- 页面倒计时跳转页面效果，js倒计时效果
页面倒计时跳转页面效果,js倒计时效果 >>>>>>>>>>>>>>>>>>>> ...
- 【前端】javaScript 常用技巧总结
javaScript 常用技巧总结 1. 彻底屏蔽鼠标右键 oncontextmenu="window.event.returnValue=false" <table b ...
- javascript 常用手势 分析
javascript 常用手势, 个人觉得有3个 tap,swipe(swipeLeft,swipeRight,swipeTop,swipeRight),hold tap 是轻击 判断的原则是,在to ...
随机推荐
- Python内置函数之len()
len(s)用来判断对象的长度. 需要说明的是,整型,布尔等是没有长度这一说法的.字符串.字典.列表和元组都有长度. 例子: >>> len() Traceback (most re ...
- Java对象类型的判断
instanceof 判断某个对象是否是某个类的实例或者某个类的子类的实例.它的判断方式大概是这样的: public<T> boolean function(Object obj, Cla ...
- object is not an instance of declaring class
错误原因:invoke方法的时候,应该是类的实例对象,而不是类本身 解决方法:把 PowerMockito.doReturn(index_expect).when(IndexController.cl ...
- iOS开发探索-图片压缩处理
介绍: 压: 指文件体积变小,但是像素数不变,长宽尺寸不变,那么质量可能下降.缩: 指文件的尺寸变小,也就是像素数减少,而长宽尺寸变小,文件体积同样会减小. 应用: 在实际开发中,我们经常会对图片进行 ...
- StoryBoard不使用AutoLayout情况下 按比例快速兼容适配iPhone6/6 Plus教程【转载】
StoryBoard不使用AutoLayout情况下 按比例快速兼容适配iPhone6/6 Plus教程[转] 声明:本文章是为了后期快速兼容6和6Plus的按比例放大方法,对于部分读者来说可能觉得该 ...
- 锂电池电流单位C5A
C5A是一起的,是一个单位!C5A是描述一个电池本身容量标准中一个放电电流的单位,具体是直观意义是这电池在充满电状态下放电到2.75或者3V,用C5A这么大的电流,能放电5小时,那么C5A就代表的是这 ...
- configure: error: Cannot find OpenSSL's libraries
在Ubuntu 12.4.1 X64 位下编译安装PHP时提示 configure: error: Cannot find OpenSSL's libraries 确认已安装过 openssl.lib ...
- [已解决]pycharm报错:AttributeError: module 'pip' has no attribute 'main'
> 更新pip后,pycharm更新模块报错,经过一番查找,现提供两种解决办法. 报错片段信息如下: AttributeError: module 'pip' has no attribute ...
- 基础的 Web Services 平台是 XML + HTTP。
HTTP 协议是最常用的因特网协议. XML 提供了一种可用于不同的平台和编程语言之间的语言. Web services 平台的元素: SOAP (简易对象访问协议) UDDI (通用描述.发现及整合 ...
- 持续集成 解决 Jenkins 中无法展示 HTML 样式的问题
对于测试报告来说,除了内容的简洁精炼,样式的美观也很重要.常用的做法是,采用HTML格式的文档,并搭配CSS和JS,实现自定义的样式和动画效果(例如展开.折叠等). 在Jenkins中要展示HTML文 ...