JavaScipt实现倒计时方法总结
JavaScript中提供了两种实现计时、延时的方法,分别如下:
一、 t = setTimeout(“function()", millisecond) 与 clearTimeout(t) 方法配套使用。
t = setTimeout(“function()", millisecond) 方法中,function()函数里定义想要定时调用的代码,millisecond参数代表想要延迟的计时时间,t 是函数返回的ID值。此函数仅根据时间周期调用function()函数一次。但是可以通过递归调用,实现多次循环计时。
clearTimeout(t)函数可以清除setTimeout()函数的计时信息,停止计时。
60秒倒计时代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head> <body onload="CountTime()">
<div id = "timeBar" style="font-size:22px;" align="center"></div> <script type = "text/javascript" src = "CountTime.js"></script>
</body>
</html>
time = 60; function CountTime()
{
document.getElementById("timeBar").innerHTML = time;
time = time - 1;
if ( time == -1)
{
clearTimeout(t);
}
else
{
t = setTimeout("CountTime()",1000);
} }
二、t= setInterval(”function()“,millisecond)方法与setTimeout()使用方法类似,但是该函数是以设置的时间为周期,周期性的调用function()函数执行代码。
clearInterval(t)方法是用来清除计时信息,终止计时程序。
可实现60秒倒计时代码如下(Html代码共用第一部分):
time = 60;
function SetText()
{
document.getElementById("timeBar").innerHTML = time;
time = time - 1;
if ( time == -1)
{
clearInterval(t);
}
}
function CountTime()
{
t = setInterval("SetText()",1000);
}
以上两种方法均可实现倒计时的功能。
JavaScipt实现倒计时方法总结的更多相关文章
- jquery 60秒倒计时(方法二)
<script type="text/javascript">var wait=60;document.getElementById("btn"). ...
- [转]Android实现计时与倒计时(限时抢购)的几种方法
在购物网站的促销活动中一般都有倒计时限制购物时间或者折扣的时间,这些都是如何实现的呢? 在一个安卓客户端项目中恰好遇到了类似的问题,一开始使用的是Timer与 TimerTask, 虽然此方法通用,但 ...
- Android实现计时与倒计时(限时抢购)的几种方法
在购物网站的促销活动中一般都有倒计时限制购物时间或者折扣的时间,这些都是如何实现的呢? 在一个安卓客户端项目中恰好遇到了类似的问题,一开始使用的是Timer与 TimerTask, 虽然此方法通用,但 ...
- 原生JavaScript时间倒计时的方法
这个思路是来源用%的方法来做的: 以前用%做过转秒的 现在用来做倒计时方法: 需要用到的方法是getTime:获取距离1970年1月1日午夜00:00之间的毫秒差: var targetTime=ne ...
- ios 简单的倒计时验证码数秒过程实现
timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(timerFireMethod:) ...
- BZOJ4230: 倒计时
4230: 倒计时 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 20 Solved: 12[Submit][Status][Discuss] De ...
- Android 计时与倒计时
方法一 Timer与TimerTask(Java实现) [java] view plain copy print ? public class timerTask extends Activit ...
- js原生倒计时
倒计时是2019年6月7号10点开始的 代码粘贴过去直接运行即可 <!DOCTYPE html> <html lang="en"> <head> ...
- 微信小程序——倒计时功能
做小程序项目中,需要做一个倒计时功能,如下图: 记录一下实现步骤: 1.考虑到这个功能可能会有多处用到,所以把倒计时的函数写在utils.js里面: const formatNumber = n =& ...
随机推荐
- iOS下移除按钮原生样式
按钮样式,在 Android 手机浏览器中显示正常,但在 iOS Safari 浏览器中会看到按钮显示为圆角样式,设置 border-radius:0; 也不好使. 这是因为iPhone.iPad 设 ...
- javascript 常用函数
//获取元素的样式值. function getStyle(elem,name){ if(elem.style[name]){ return elem.style[name]; }else if(el ...
- Delphi中TFlowPanel实现滚动条效果
由于TFlowPanel中没有设置滚动条的相关属性.所以我们只好另辟溪径.再加一个tscrollbox来实现. 具体操作如下: 1,先添加一个Tscrollbox,设置其align为alclient. ...
- (10)Xamarin.Android - 储存数据于Windows Azure
原文 Xamarin.Android - 储存数据于Windows Azure 如何将Xamarin.Android 与Windows Azure做结合,将Android APP上的数据丢到云端去储存 ...
- [LeetCode][Python]String to Integer (atoi)
# -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com'https://oj.leetcode.com/problems/string- ...
- oracle导入导出exp,imp
exp dadifilm/oracle@dg file=/tmp/dadi.dmp full=y imp u_data/321@dg1 file=/dadi_desc.dmp Import: Rel ...
- 【转】stdin, stdout, stderr 以及重定向
详细见: http://my.oschina.net/qihh/blog/55308 stdin是标准输入文件,stdout是标准输出文件,stderr标准出错文件. 程序按如下方式使用这些文件: 标 ...
- lighttpd配置虚拟主机/php等WEB环境
lighttpd(1.4.37)配置如下 server.document-root = "/var/www/lighttpd/" server.port = 8888 server ...
- Crisis of HDU(母函数)
Crisis of HDU Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tot ...
- iOS 8.0正式公布啦
从昨晚開始,苹果新版移动操作系统iOS 8.0開始提供免费下载服务.新版操作系统提供有数百个新功能,当中包含相机功能中添加了延时摄影模式,能够使用其它厂商开发的输入法.购买的App应用程序能够与最多6 ...