1

我有一个倒计时时钟，它工作得非常好。现在的问题是我可以将图像显示为数字而不是 html。我似乎无法弄清楚我将如何处理它的逻辑。我真的不想为此使用插件，所以这真的不是一个选择。

时钟的 JS 是这个

setInterval(function(){
    var future = new Date("Jan 20 2014 21:15:00 GMT+0200");
    var now = new Date();
    var difference = Math.floor((future.getTime() - now.getTime()) / 1000);

    var seconds = fixIntegers(difference % 60);
    difference = Math.floor(difference / 60);

    var minutes = fixIntegers(difference % 60);
    difference = Math.floor(difference / 60);

    var hours = fixIntegers(difference % 24);
    difference = Math.floor(difference / 24);

    var days = difference;

    $(".seconds").text(seconds + "s");
    $(".minutes").text(minutes + "m");
    $(".hours").text(hours + "h");
    $(".days").text(days + "d");
}, 1000);

function fixIntegers(integer)
{
    if (integer < 0)
        integer = 0;
    if (integer < 10)
        return "0" + integer;
    return "" + integer;
}

我已将图像存储在一个数组中

var linkCons = 'http://soumghosh.com/otherProjects/Numbers/'

var num = [];
var linkCons = "http://soumghosh.com/otherProjects/Numbers/";
for(var i = 0; i < 10; i++) {
    num.push(linkCons + "nw" + i + ".png");
}

感谢堆栈溢出人员帮助我清理阵列。真的很欣赏

这是工作小提琴 http://jsfiddle.net/sghoush1/wvbPq/3/

4

2 回答 2

2

你可以只使用一个精灵图像和我创建的这段代码来做到这一点：

在此处输入图像描述

jQuery(function($) { // DOM ready shorthand

  // CLOCK
  
  // Just a date in the future... Say 5 days from now
  var fut = new Date().setDate(new Date().getDate() + 5); 
  
  // Number splitter
  function intSpl(i) {
    i = Math.floor(i);
    return [Math.floor(i / 10), i % 10]; // 37=[3,7] // 5=[0,5] // 0=[0,0] 
  }
  
  var obj = {}; // {d:[7,7], h:[1,9], .....}

  function drawTime() {
    var now = new Date().getTime();
    var dif = now < fut ? Math.floor((fut - now) / 1000) : 0;
    obj.s = intSpl(dif % 60);
    obj.m = intSpl(dif / 60 % 60);
    obj.h = intSpl(dif / 60 / 60 % 24);
    obj.d = intSpl(dif / 60 / 60 / 24);

    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        for (var i = 0; i < 2; i++) { // get el ID number (0,1)
          $('#' + key + i).css({
            backgroundPosition: -obj[key][i] * 50
          });
        }
      }
    }
  }
  drawTime();
  setInterval(drawTime, 1000);

});
#clock span {
  display: inline-block;
  width: 50px;
  height: 85px;
  background: url('http://i.imgur.com/uBTxTTD.jpg');
  background-position: 0 0;
}

#clock span:nth-child(even) {
  margin-right: 15px;
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<div id="clock">

  <span id="d0"></span>
  <span id="d1"></span>

  <span id="h0"></span>
  <span id="h1"></span>

  <span id="m0"></span>
  <span id="m1"></span>

  <span id="s0"></span>
  <span id="s1"></span>

</div>

解释这个想法：

  • 创建元素，每个元素将保存当前 2 位值的一位；
  • span给CSS中的所有s设置一个共同的bg图片
  • 每秒将每个元素的背景图像向左移动-(witdh * number)px

虽然上面列出的似乎是逻辑的，但您可以在这里看到的第一个问题是如何单独检索 JS 时间编号（1 位或 2 位数字）并在需要时保持前导零，并引用每个数字以定位 HTML 中的正确元素？

让我们从拆分数字开始：

35 == 3, 5 /// 0 == 0, 0 // this is an example of what we need.

var n  = 35;        // Set any 1 or 2 digit number.
var n1 = ~~(n/10);  // 3 //// ~~ "Double Bitwise NOT"
                                 // just instead of parseInt(time/10, 10).
var n2 = n%10;      // 5 //// %  "Mudulus operator" (reminder).

示例游乐场

JS 分组

现在，如何将这两个分开的数字分组并说：“嘿，你们两个是我的时钟秒数！” ?
只需将它们放入数组中！[3, 5], 因为我们还有分钟、小时和天 - 让我们简单地将所有这些数组放入一个Object并分配一个键名，这将产生一个像这样的对象：

obj = {d:[7,4], h:[1,9], m:[2,9], s:[0,7]}

参考 HTML

拥有该对象并知道在for...in循环中我们可以检索键名和数组值，例如：obj['d'][0] === 7 obj['d'][5] === 4

意味着我们需要一个for循环来检索0和1获取数组位置中的值，所有这些值[pos0, pos1]
都在一个for...in循环中，该循环将获取 KEY 名称：d, h, m, s

2pos x 4keyNames = 8 个元素迭代/秒

意味着现在我们将能够定位一个 ID 元素，例如：#s0并且#s1
我们现在需要的是检索该值并通过以下方式为该元素背景设置动画
-width * digit

于 2013-11-07T01:16:20.753 回答
0

好吧，您可以使用另一种方法来解决相同的问题。以下是步骤。首先，我为每个图像位置编写了一个 CSS 类选择器。

.list-group-item .digit-display{
  display:inline-block;
  width:50px;
  height:85px;
  background:url('http://i.imgur.com/uBTxTTD.jpg');
}

.position-0 {
  background-position: 0 0;
}

.position-1 {
  background-position: -50px 0px !important;
}

然后我编写了一个 JavaScript 函数，它接受一个数字作为输入，并返回该数字的 CSS 类选择器，如下所示。

  displayDigit(digit) {
    const baseSelector = "digit-display position-";
    return `${baseSelector}${digit}`;
  }

最后，这个函数在 JSX 元素内部被调用，如下所示。

<span className = {this.displayDigit(remainingTime["h"].charAt(0))}></span>

这解决了这个问题。

但是，如果有人真的需要使用上面指定的基于 jquery 的方法，我们仍然可以将相同的代码压缩如下。

  secondsToTime(secs) {
    let hours = `${constants.ZERO}${Math.floor(secs / (60 * 60))}`.slice(-2);

    let divisorForMinutes = secs % (60 * 60);
    let minutes = `${constants.ZERO}${Math.floor(divisorForMinutes / 60)}`.slice(-2);

    let divisorForSeconds = divisorForMinutes % 60;
    let seconds = `${constants.ZERO}${Math.ceil(divisorForSeconds)}`.slice(-2);

    let obj = {
      "h": hours,
      "m": minutes,
      "s": seconds
    };
    return obj;
  }

handleFlipClockImage = () => {
     var myObj = this.secondsToTime(seconds);

     Object.keys(myObj).forEach(key => {
     let obj = myObj[key];
     var digits = obj.split(constants.EMPTY_SPACE_CHAR);
     digits.forEach((digit, index) => {
        jquery(`#${this.state.label}${key}${index}`).css({backgroundPosition: -digit*50 });
        });
     });
}
于 2017-05-05T12:53:13.477 回答