javascript - 从倒计时器中删除天数和小时数-6ren

javascript - 从倒计时器中删除天数和小时数

转载作者：行者123 更新时间：2023-12-03 23:04:16

我正在使用此 jQuery 文件中的倒计时器，但我想从中删除天数和小时数，以便它只显示分钟和秒。谁能帮我吗？这些数字是从 png 文件中显示的，该文件在显示倒计时时会创建翻转板效果。

jQuery.fn.countdown = function(userOptions)
{
  // Default options
  var options = {
    stepTime: 60,
    // startTime and format MUST follow the same format.
    // also you cannot specify a format unordered (e.g. hh:ss:mm is wrong)
    format: "dd:hh:mm:ss",
    startTime: "01:12:32:55",
    digitImages: 6,
    digitWidth: 53,
    digitHeight: 77,
    timerEnd: function(){},
    image: "digits.png"
  };
  var digits = [], interval;

  // Draw digits in given container
  var createDigits = function(where) 
  {
    var c = 0;
    // Iterate each startTime digit, if it is not a digit
    // we'll asume that it's a separator
    for (var i = 0; i < options.startTime.length; i++)
    {
      if (parseInt(options.startTime[i]) >= 0) 
      {
        elem = $('<div id="cnt_' + i + '" class="cntDigit" />').css({
          height: options.digitHeight * options.digitImages * 10, 
          float: 'left', background: 'url(\'' + options.image + '\')',
          width: options.digitWidth});
        digits.push(elem);
        margin(c, -((parseInt(options.startTime[i]) * options.digitHeight *
                              options.digitImages)));
        digits[c].__max = 9;
        // Add max digits, for example, first digit of minutes (mm) has 
        // a max of 5. Conditional max is used when the left digit has reach
        // the max. For example second "hours" digit has a conditional max of 4 
        switch (options.format[i]) {
          case 'h':
            digits[c].__max = (c % 2 == 0) ? 2: 9;
            if (c % 2 == 0)
              digits[c].__condmax = 4;
            break;
          case 'd': 
            digits[c].__max = 9;
            break;
          case 'm':
          case 's':
            digits[c].__max = (c % 2 == 0) ? 5: 9;
        }
        ++c;
      }
      else 
        elem = $('<div class="cntSeparator"/>').css({float: 'left'})
                .text(options.startTime[i]);

      where.append(elem)
    }
  };
  
  // Set or get element margin
  var margin = function(elem, val) 
  {
    if (val !== undefined)
      return digits[elem].css({'marginTop': val + 'px'});

    return parseInt(digits[elem].css('marginTop').replace('px', ''));
  };

  // Makes the movement. This is done by "digitImages" steps.
  var moveStep = function(elem) 
  {
    digits[elem]._digitInitial = -(digits[elem].__max * options.digitHeight * options.digitImages);
    return function _move() {
      mtop = margin(elem) + options.digitHeight;
      if (mtop == options.digitHeight) {
        margin(elem, digits[elem]._digitInitial);
        if (elem > 0) moveStep(elem - 1)();
        else 
        {
          clearInterval(interval);
          for (var i=0; i < digits.length; i++) margin(i, 0);
          options.timerEnd();
          return;
        }
        if ((elem > 0) && (digits[elem].__condmax !== undefined) && 
            (digits[elem - 1]._digitInitial == margin(elem - 1)))
          margin(elem, -(digits[elem].__condmax * options.digitHeight * options.digitImages));
        return;
      }

      margin(elem, mtop);
      if (margin(elem) / options.digitHeight % options.digitImages != 0)
        setTimeout(_move, options.stepTime);

      if (mtop == 0) digits[elem].__ismax = true;
    }
  };

  $.extend(options, userOptions);
  this.css({height: options.digitHeight, overflow: 'hidden'});
  createDigits(this);
  interval = setInterval(moveStep(digits.length - 1), 1000);
};

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Countdown that doesn't sucks</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(function(){
        $('#counter').countdown({
          image: 'img/digits.png',
          startTime: '00:00:05:00'
        });

      });
    </script>
    
    <style type="text/css">
      br { clear: both; }
      .cntSeparator {
        font-size: 54px;
        margin: 10px 7px;
        color: #000;
      }
      .desc { margin: 7px 3px; }
      .desc div {
        float: left;
        font-family: Arial;
        width: 70px;
        margin-right: 65px;
        font-size: 13px;
        font-weight: bold;
        color: #000;
      }
    </style>
  </head>
<body>

最佳答案

更改开始时间和格式以使用 mm:ss 格式对我有用。如果您需要隐藏数字，同时仍然需要倒计时天和小时，则可以使用 style=overflow:hidden;左:-50%

jQuery.fn.countdown = function(userOptions)
{
  // Default options
  var options = {
    stepTime: 60,
    // startTime and format MUST follow the same format.
    // also you cannot specify a format unordered (e.g. hh:ss:mm is wrong)
    format: "dd:hh:mm:ss",
    startTime: "01:12:32:55",
    digitImages: 6,
    digitWidth: 53,
    digitHeight: 77,
    timerEnd: function(){},
    image: "digits.png"
  };
  var digits = [], interval;

  // Draw digits in given container
  var createDigits = function(where) 
  {
    var c = 0;
    // Iterate each startTime digit, if it is not a digit
    // we'll asume that it's a separator
    for (var i = 0; i < options.startTime.length; i++)
    {
      if (parseInt(options.startTime[i]) >= 0) 
      {
        elem = $('<div id="cnt_' + i + '" class="cntDigit" />').css({
          height: options.digitHeight * options.digitImages * 10, 
          float: 'left', background: 'url(\'' + options.image + '\')',
          width: options.digitWidth});
        digits.push(elem);
        margin(c, -((parseInt(options.startTime[i]) * options.digitHeight *
                              options.digitImages)));
        digits[c].__max = 9;
        // Add max digits, for example, first digit of minutes (mm) has 
        // a max of 5. Conditional max is used when the left digit has reach
        // the max. For example second "hours" digit has a conditional max of 4 
        switch (options.format[i]) {
          case 'h':
            digits[c].__max = (c % 2 == 0) ? 2: 9;
            if (c % 2 == 0)
              digits[c].__condmax = 4;
            break;
          case 'd': 
            digits[c].__max = 9;
            break;
          case 'm':
          case 's':
            digits[c].__max = (c % 2 == 0) ? 5: 9;
        }
        ++c;
      }
      else 
        elem = $('<div class="cntSeparator"/>').css({float: 'left'})
                .text(options.startTime[i]);

      where.append(elem)
    }
  };
  
  // Set or get element margin
  var margin = function(elem, val) 
  {
    if (val !== undefined)
      return digits[elem].css({'marginTop': val + 'px'});

    return parseInt(digits[elem].css('marginTop').replace('px', ''));
  };

  // Makes the movement. This is done by "digitImages" steps.
  var moveStep = function(elem) 
  {
    digits[elem]._digitInitial = -(digits[elem].__max * options.digitHeight * options.digitImages);
    return function _move() {
      mtop = margin(elem) + options.digitHeight;
      if (mtop == options.digitHeight) {
        margin(elem, digits[elem]._digitInitial);
        if (elem > 0) moveStep(elem - 1)();
        else 
        {
          clearInterval(interval);
          for (var i=0; i < digits.length; i++) margin(i, 0);
          options.timerEnd();
          return;
        }
        if ((elem > 0) && (digits[elem].__condmax !== undefined) && 
            (digits[elem - 1]._digitInitial == margin(elem - 1)))
          margin(elem, -(digits[elem].__condmax * options.digitHeight * options.digitImages));
        return;
      }

      margin(elem, mtop);
      if (margin(elem) / options.digitHeight % options.digitImages != 0)
        setTimeout(_move, options.stepTime);

      if (mtop == 0) digits[elem].__ismax = true;
    }
  };

  $.extend(options, userOptions);
  this.css({height: options.digitHeight, overflow: 'hidden'});
  createDigits(this);
  interval = setInterval(moveStep(digits.length - 1), 1000);
};

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Countdown that doesn't sucks</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(function(){
        $('#counter').countdown({
          image: 'https://i.ibb.co/5hvG3DY/digits.png',
          startTime: '05:00',
          format: "mm:ss"
        });

      });
    </script>
    
    <style type="text/css">
      br { clear: both; }
      .cntSeparator {
        font-size: 54px;
        margin: 10px 7px;
        color: #000;
      }
      .desc { margin: 7px 3px; }
      .desc div {
        float: left;
        font-family: Arial;
        width: 70px;
        margin-right: 65px;
        font-size: 13px;
        font-weight: bold;
        color: #000;
      }
    </style>
  </head>
<body>
<div id="counter"></div>
</body>
</html>

关于javascript - 从倒计时器中删除天数和小时数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61961217/

文章推荐： javascript - 页面滚动时更改标题

文章推荐： javascript - 从 jQuery 中的所有元素中获取属性值

文章推荐： jquery - 使用 Jquery 将评论回复表单插入页面

文章推荐： Jquery $.ajax 异步奇怪行为

jquery - 计时器？
我需要在文档就绪触发后 5 秒调用我的函数 abc()。这在 jQuery 中可能吗？ $(document).ready(function () { //Wait 5 seconds then
PowerShell 计时器/秒表准确性
我发现 System.Diagnostics.Stopwatch 类即使在很短的时间段(即 20 秒)内似乎也存在可测量的不准确性。对于编码为运行 20 秒的进程，我的进程显示耗时为 20.3+ 秒:
angular - 安排本地闹钟/计时器
我正在使用 Ionic Framework 使用 Angular 构建一个 Android/iPhone 食谱应用程序。功能之一应该是每个成分/步骤的警报/计时器。我猜 Ionic 是基于 Apa
具有不同图像的 Javascript 计时器
我有一个 JS 计时器脚本，从 20 秒开始倒计时 var count = 0; var speed = 1000; countdown = setInterval( function
Javascript 计时器，带停止按钮
我的 JavaScript 计时器有一个大问题。一切正常，除了 1 个按钮:停止!我不知道如何停止计数器上的所有内容(例如重置每个输入和计数器)。有什么想法可以解决这个问题吗？
Java 计时器 - 调用的函数未完成!
所以我有一个 TimerTask 任务在其 run() 中调用函数 onTimerComplete() onTimerComplete() 看起来像这样: private void onTimerC
java - 如何停止该线程内的线程/计时器？
我在 Eclipse 中的 windowbuilder 创建的 run() 方法中有计时器。我不知道如何通过另一种方法停止该计时器。例如通过添加 if(MenuWindow.gameStarted
按下按钮时的 Java 计时器
我对java很陌生，我试图在按下按钮时启动计时器，但无法启动它。我尝试了几行代码，但似乎没有任何效果。我已经声明了我的标签、文本字段和计时器: private JTextField JTFHours
当前实例上的 java 计时器
import java.util.Scanner; import java.util.Timer; import java.util.TimerTask; public class Boggle {
Javascript 计时器 - 检查还剩多长时间
我正在尝试在 JavaScript 中获取计时器的值，因此当计时器为零时它会显示不同的内容； var local_t = new Date(); local_t.setSeconds(local_t.
Jquery slider 计时器
我需要使用 jquery 为网站创建自定义 slider 。到目前为止，如果我单击按钮，我已经设法让它按照我想要的方式运行，但我想实现一个自动计时器，以便幻灯片在 5 秒后切换。这是我的 JS 代码
javascript - 个人最佳记分员/计时器
我正在制作一个计时器，记录点击“通过”按钮上的“确定”时的最长时间(个人最好成绩)。我似乎无法弄清楚如何让计数器回到 0，我确信有一种方法可以只用 2 个按钮(开始 + 通过)来完成。我希望计时器在我
当且仅当任务排队时防止关闭的 Java 计时器
我有一个 java.util.Timer 用于限制电子邮件发送(如果最近发送了状态电子邮件，那么现在不要发送，而是创建一个计时器任务以稍后发送任何新状态)。我想要的是确保最终发送所有排队的电子邮件，
用于在线考试的 Javascript 计时器
我已经建立了一个在线考试门户，允许学生使用网络浏览器在线参加考试。现在我还开发了计时器功能，用户必须在规定的时间范围内完成考试。我遇到的麻烦是，当我刷新页面时，计时器再次从新开始，例如 40 分钟。
java - 计时器 - 异步任务或线程
我想知道在一定时间内禁用按钮的最佳方法是什么。当用户使用其他按钮转到其他页面时，定时器不会被重置，按钮仍将被禁用。我读过很多关于异步任务、线程的不同方法。但是我非常不确定哪种方法最好。我希望计时器
android - 计时器 - 计时
我正在制作一个测验应用程序，我想在其中显示用户在玩游戏时所用的时间。它应该采用 HH:MM:SS 格式，从 00:00:00 开始，直到他选择答案。当用户每秒播放时，计时器应该每秒更新一次。另外，我想
服务中的 Android 计时器
您好，计划为该 Activity 开发 android 倒数计时器应用程序，当用户单击开始按钮时显示计时器倒计时并显示计时器倒计时，用户将转到剩余 Activity ，即使计时器在后台运行，如果用户单
数据库中的 PHP 计时器
我想知道是否有一种简单的方法可以使用 PHP 在数据库中创建计时器，我想在数据库中创建该行 30 分钟后将其删除。如果这不够具体，我很抱歉，但我不知道如何在其中提供更多细节，请随意发表评论，以便我可以
带对象的 Javascript 计时器
我试图制作一种与我的计时器一起使用的对象。问题是，当我只有裸函数(不在对象中)时，它就可以工作。但是当我把它放在对象内部时它不起作用。使用此代码我只能看到 00:01 当我只使用函数本身时，它工作正
带逗号的 JavaScript 计时器
这个问题已经有答案了: How to format numbers as currency strings (67 个回答) 已关闭 9 年前。我想显示从 1 到 2500 的美元计时器。当计时器增

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 从倒计时器中删除天数和小时数