同一页面可多次使用的倒计时js代码

今天由于需要做一个一个页面多个倒计时这样一个功能,但是网上找了很久只看见jquery有些已经写好了的插件。
但是我的项目不能用jquery(原因太多了,比如和系统库冲突),还有就是为了这么一个功能就引入80K的大小的jquery库,
也有点浪费,还得加上插件库,就更加大了,
迫于无赖,就找ecshop的一个js修改成了一个页面多个倒计时,虽然不是很完善,但是基本可以用
留给那些需要的人吧;

 

/**
修改为一个页面可以显示多个倒计时

调用方式:
onload_leftTime(开始时间戳,结束时间戳, 显示的ID);
如:

onload_leftTime(1322603631,1352793600,’leftTime’);
onload_leftTime(1322603631,1352793600,’leftTime1′);
onload_leftTime(1322603631,1352793600,’leftTime2′);

**/

 代码如下 复制代码

var timerRunning = [];
var timerID = [];
var auctionDate = [];
var startTime = [];
var showTimeId = [];

function showtime() {
var _day = ‘天’;
var _hour = ‘小时’;
var _minute = ‘分’;
var _second = ‘秒’;
var _end = ‘结束’;
var dateLeft = 0;
var hourLeft = 0;
var minuteLeft = 0;
var secondLeft = 0;
var hourZero = ”;
var minuteZero = ”;
var secondZero = ”;

var c = auctionDate.length;

for ( var i = 0, j = auctionDate.length; i < j; i++) {

if (auctionDate[i] == null) {
c–;
continue;
}
now = new Date();
var ts = parseInt((startTime[i] – now.getTime()) / 1000) + auctionDate[i];

if (ts < 0) {
ts = 0;
CurHour = 0;
CurMinute = 0;
CurSecond = 0;
} else {
dateLeft = parseInt(ts / 86400);
ts = ts – dateLeft * 86400;
hourLeft = parseInt(ts / 3600);
ts = ts – hourLeft * 3600;
minuteLeft = parseInt(ts / 60);
secondLeft = ts – minuteLeft * 60;
}

if (hourLeft < 10) {
hourZero = ’0′;
}
if (minuteLeft < 10) {
minuteZero = ’0′;
}
if (secondLeft < 10) { secondZero = ’0′; } if (dateLeft > 0) {
Temp = dateLeft + _day + hourZero + hourLeft + _hour + minuteZero + minuteLeft + _minute + secondZero + secondLeft + _second;
} else {
if (hourLeft > 0) {
Temp = hourLeft + _hour + minuteZero + minuteLeft + _minute + secondZero + secondLeft + _second;
} else {
if (minuteLeft > 0) {
Temp = minuteLeft + _minute + secondZero + secondLeft + _second;
} else {
if (secondLeft > 0) {
Temp = secondLeft + _second;
} else {
Temp = ”;
}
}
}
}

if (ts Temp = "<strong>" + _end + "</strong>";
auctionDate[i] = null;
}

if (document.getElementById(showTimeId[i])) {
document.getElementById(showTimeId[i]).innerHTML = Temp;
}

timerRunning[i] = true;

}

if (c > 0) {
timerID = setTimeout("showtime()", 1000);
}

}

function stopclock(timerRunning, timerID) {
if (timerRunning) {
clearTimeout(timerID);
}
timerRunning = false;
}

function onload_leftTime(now_time, gmt_end_time, showTime) {

var auctionDate_tmp = 0;
var _GMTEndTime = 0;

var cur_date = new Date();

_GMTEndTime = gmt_end_time;

if (_GMTEndTime > 0) {
if (now_time == undefined) {
var tmp_val = parseInt(_GMTEndTime)
- parseInt(cur_date.getTime() / 1000
+ cur_date.getTimezoneOffset() * 60);
} else {
var tmp_val = parseInt(_GMTEndTime) – now_time;
}

if (tmp_val > 0) {
auctionDate_tmp = tmp_val;
}

}

timerRunning[timerRunning.length] = false;
timerID[timerID.length] = null;
auctionDate[auctionDate.length] = auctionDate_tmp;
startTime[startTime.length] = cur_date.getTime();
showTimeId[showTimeId.length] = showTime;

showtime();

}

时间: 2024-10-03 02:59:26

同一页面可多次使用的倒计时js代码的相关文章

简单易用的倒计时js代码_javascript技巧

<!doctype html> <html> <head> <meta charset="utf-8"> <title>简单易用的倒计时js代码</title> <style> *{ margin:0; padding:0; list-style:none;} body{ font-size:18px; text-align:center;} .time{ height:30px; padding:20

点击隐藏页面左栏或右栏实现js代码_javascript技巧

点击隐藏页面左栏或右栏(同一TABLE中) 复制代码 代码如下: <style type="text/css"> <!-- .navPoint {COLOR: white; CURSOR: hand; FONT-FAMILY: Webdings; FONT-SIZE: 9pt} .STYLE1 {FONT-FAMILY: Webdings; FONT-SIZE: 9pt; cursor: hand;} --> </style> <script&

在页面预览客户端本地图片的js代码(兼容FF IE)_图象特效

请问:怎么样在ajax中异步调用页面并执行调用页里的JS

问题描述 众说周知 A页面使用AJAX的xmlHttp 异步调用另外一个页面B,是把B页的前端代码(包括HTML,CSS,JS等)是以字符串的形式存储在data里所以在A页面中显示的结果是HTML 但是JS等不体现也不执行请问 怎么样才能使 A页面调用B页面的似乎 也执行其中的JS代码呢? 解决方案 依照ext的做法,先提取返回值中的js代码(包括<script src>和<script></script>2种),针对<script src="**&qu

js代码实现点击按钮出现60秒倒计时_javascript技巧

比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果. 此例子用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能. 例子1:Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果 <input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascrip

JS实现可调整倒计时间代码分享_javascript技巧

这是一款基于javascript实现可调整倒计时间的代码,我们可以手动调整倒计时间,可以精确到"天.时.分.秒",而且样式布局也很新颖. 先上运行效果图: 效果演示     源码下载 为大家分享的可调整倒计时间的JS代码如下(浏览器中如果不能正常运行,可以尝试切换浏览模式). <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g

js 倒计时-移动端web页面倒计时 js 由于手机锁屏失效问题?

问题描述 移动端web页面倒计时 js 由于手机锁屏失效问题? 这是一个web站点提供的倒计时页面. 程序思路: setInterval("timer()", 1000) function timer() { //倒计时代码,并在页面显示 时间--; } 问题:在PC端正常,但移动端用微信打开或者手机浏览打开,如果手机锁屏或者切换到其他app就会出现倒计时比预计的变慢了. 我的方案:1.使用异步去时时判断现在的倒计时是否正常,但这样不好: 2.网上仅找到一个,就是使用visibilit

javascript点击按钮倒计时特效代码

看一个注册获取验证倒计时效果   在手机或邮件获取验证码常用例子  代码如下 复制代码 <input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascript"> var wait=60; function time(o) {         if (wait == 0) {             o.removeA

在页面中输出当前客户端时间javascript实例代码_javascript技巧

时间对象(Date())比较简单,本文旨在为初学者入门使用,大牛可略过! 本文承接基础知识实例,说一下实例的要求: 在页面中输出当前客户端时间(2015年1月1日星期一10:10:10这样的格式),每过一秒中页面不刷新,但是时间自动更新(用两种定时器方法都可以实现),鼠标点击时间,如果原先运动则停止,如果停止则继续运动: 要求基本上可分为2部分:一是不刷新自动更新时间,二是点击时间停止或更新时间 好,那我们还是老规矩,一步一步来,既然是时间,那就会用到时间对象 new Date(); var n