Javascript计数计时器修改-6ren

Javascript计数计时器修改

转载作者：行者123 更新时间：2023-12-02 19:54:06

27

4

我终于找到了一个不错的 javascript 计数计时器，没有多余的装饰。我想启动多个具有不同初始时间的计时器实例来进行计数。到目前为止，我取得的唯一进展就是打破了剧本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript CountUp Timer - Praveen Lobo</title>
<script type="text/javascript">
/**********************************************************************************************
* CountUp script by Praveen Lobo (http://PraveenLobo.com/techblog/javascript-countup-timer/)
* This notice MUST stay intact(in both JS file and SCRIPT tag) for legal use.
* http://praveenlobo.com/blog/disclaimer/
**********************************************************************************************/
function CountUp(initDate, id){
    this.beginDate = new Date(initDate);
    this.countainer = document.getElementById(id);
    this.numOfDays = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
    this.borrowed = 0, this.years = 0, this.months = 0, this.days = 0;
    this.hours = 0, this.minutes = 0, this.seconds = 0;
    this.updateNumOfDays();
    this.updateCounter();
}

CountUp.prototype.updateNumOfDays=function(){
    var dateNow = new Date();
    var currYear = dateNow.getFullYear();
    if ( (currYear % 4 == 0 && currYear % 100 != 0 ) || currYear % 400 == 0 ) {
        this.numOfDays[1] = 29;
    }
    var self = this;
    setTimeout(function(){self.updateNumOfDays();}, (new Date((currYear+1), 1, 2) - dateNow));
}

CountUp.prototype.datePartDiff=function(then, now, MAX){
    var diff = now - then - this.borrowed;
    this.borrowed = 0;
    if ( diff > -1 ) return diff;
    this.borrowed = 1;
    return (MAX + diff);
}

CountUp.prototype.calculate=function(){
    var currDate = new Date();
    var prevDate = this.beginDate;
    this.seconds = this.datePartDiff(prevDate.getSeconds(), currDate.getSeconds(), 60);
    this.minutes = this.datePartDiff(prevDate.getMinutes(), currDate.getMinutes(), 60);
    this.hours = this.datePartDiff(prevDate.getHours(), currDate.getHours(), 24);
    this.days = this.datePartDiff(prevDate.getDate(), currDate.getDate(), this.numOfDays[currDate.getMonth()]);
    this.months = this.datePartDiff(prevDate.getMonth(), currDate.getMonth(), 12);
    this.years = this.datePartDiff(prevDate.getFullYear(), currDate.getFullYear(),0);
}

CountUp.prototype.addLeadingZero=function(value){
    return value < 10 ? ("0" + value) : value;
}

CountUp.prototype.formatTime=function(){
    this.seconds = this.addLeadingZero(this.seconds);
    this.minutes = this.addLeadingZero(this.minutes);
    this.hours = this.addLeadingZero(this.hours);
}

CountUp.prototype.updateCounter=function(){
    this.calculate();
    this.formatTime();
    this.countainer.innerHTML =
        "<strong>" + this.days + "</strong> " +
        "<strong>" + this.hours + "</strong>:" +
        "<strong>" + this.minutes + "</strong>:" +
        "<strong>" + this.seconds + "</strong>";
    var self = this;
    setTimeout(function(){self.updateCounter();}, 1000);
}

window.onload=function(){ new CountUp(new Date(), 'counter'); }

</script>
</head>
<body>
<div id="counter">Contents of this DIV will be replaced by the timer</div>
</body>
</html>

最佳答案

每次按下按钮时，此代码都会向您的 HTML 添加一个新计数器:

var counterNum = 1;    

function addCounter() {
    var div = document.createElement("div");
    div.id = "counter" + counterNum++;
    document.body.appendChild(div);
    var x = new CountUp(new Date(), div.id);
}

使用此 HTML 作为按钮:

<button onclick="addCounter()">Add Counter</button>

在此处查看工作演示:http://jsfiddle.net/jfriend00/NshSf/ .

或者，如果您想要不同的初始时间，您可以这样设置初始时间:

 new CountUp(new Date() - (10*60*60*1000), div.id);   // start 10 minutes ago (time in ms)

您可以see here使用此代码按下按钮添加的计时器从 10 分钟开始。

关于Javascript计数计时器修改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8887510/

27

4

0

文章推荐： hadoop - dfs.blocksize和BlockCapacity的值不同

文章推荐： docker - 在后台运行Docker命令？

文章推荐： c# - JavaScript 从 C# 代码隐藏中确认

php 计数 vs sql 计数 vs 计数字段？演出
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improve
javascript 计数
我有点卡在 JavaScript 逻辑上来完成这个任务。基本上如果我给出一个数字(比如 30) 我想在两边都显示 5。所以 25 26 27 28 29 30 31 32 33 34 35 这部
你能发现这段代码中的逻辑错误吗？计数
我编写的程序有问题。我无法获得输入字符串的正确字数，但我获得了正确的最长字符数。我不知道为什么，但这是我的代码。我正在做的是将一个字符串传递给一个函数，该函数将字符串中的所有字母大写。然后，该函数逐个
Android错误循环 "for"计数
我有功能 public ArrayList vyberNahodnaPismena() { String[] seznamPismen = {"A", "Á", "B", "C", "Č",
postgresql 计数
这可以在 PGSQL 中完成吗？我有一个我创建的 View ，其中主机名、ip 和数据中心来自一个表，ifdesc 和 if stats 来自另一个表。 View 输出如下所示: hostname |
mysql查询左连接+计数
我想要一组来自订单文件的数据，这些数据可以为我提供客户编号、订单编号、产品、数量、价格以及每个订单的订单详细信息文件中的行数。我在最后一部分遇到问题。 Select Header.CustNo, He
sql查询问题/计数
我有属于街道的房子。一个用户可以买几套房子。我如何知道用户是否拥有整条街道？ street table with columns (id/name) house table with columns
Mongodb如何聚合不同值的出现次数(计数)？
我有一套有 200 万个主题标签。然而，只有大约 200k 是不同的值。我想知道哪些主题标签在我的数据中重复得更多。我用它来查找每个主题标签在我的数据集上重复了多少次: db.hashtags.ag
Mongodb同时在多个字段上聚合(计数)
我有如下文件: { "_id" : "someuniqueeventid", "event" : "event_type_1", "date" : ISODate("2014-
使用多重连接的 SQL 计数
我有以下三个相互关联的表: 主持人(有多个 session ) session (有多个进程) 过程表结构如下: 主机表 - id, name session 表 - id, host_id, na
每个类别的 SQL 计数
我需要根据 2 个字段对行进行计数以进行分组。动物(一) id group_id strain_id death_date death_cause status --
从加入组中的 LINQ 计数
我有一个 LINQ 语句，我正在努力改正，所以可能这一切都错了。我的目标是查询一个表并加入另一个表以获取计数。地点标识、显示 ProfilePlaces ID、PlaceID、通话、聆听基本上P
Excel:计数 "Not equal to"
我无法编写 Countifs 来完成我想要的。我每个月都会运行一份 claim 报告，其中包含大量按列组织的数据，并每月将其导出到 Excel 中。在一个单独的选项卡上，我有引用此数据复制到的选项卡的
sql - 根据列值对行进行排名/计数
我有一些数据采用此 sqlfilddle 中描述的格式:http://sqlfiddle.com/#!4/b9cdf/2 基本上，一个包含用户 ID 和事件发生时间的表。我想做的是根据用户发生事件的时
SQL 计数 where 子句
我有以下 SQL 语句: SELECT [l.LeagueId] AS LeagueId, [l.LeagueName] AS NAME, [lp.PositionId] FROM
SQL 平均(计数(*))？
我试图找出一个值在列中出现的平均次数，根据另一列对其进行分组，然后对其进行计算。我有 3 张 table ，有点像这样 DVD ID | NAME 1 | 1 2 | 1 3
SQL - 用 Where 计数
我有一个非常简单的 SQL 问题。我有一个包含以下列的数据库表: 零件号销售类型(为简单起见，称之为销售类型 1、2、3、4、5) 我希望编写一个包含以下三列的查询: 零件号 Sales Type
包含零值的 SQL 计数
我创建了以下存储过程，用于计算选定位置的特定范围之间每天的记录数: [dbo].[getRecordsCount] @LOCATION as INT, @BEGIN as datetime, @END
日期列的 SQL 计数
我有一个包含一组列的表，其中一个是日期列。我需要计算该列的值引用同一个月的次数。如果一个月内，该计数的总和超过 3，则返回。例如: ____________________ | DATE |
XML 计数 TXT
看XXX数据如下: lala XXX = EL String [XXX] | TXT String | MMS String 为此，XXX数据yppz是由 lala

首页

博学

6Ren·AI

商城

Javascript计数计时器修改