Question

我一直想为我的网站创建一个计时器，并以一定的间隔显示警报。所以，它从0开始，当用户按下按钮时向上计数。从那里，它将以一定的间隔显示一个自定义警报...（例如4分钟）...在该间隔之前45秒，我需要将数字更改为黄色，并在该间隔之前10秒，我需要更改红色......然后在通过该间隔时恢复正常颜色。

我有一个基本的计时器代码，但我不知道该怎么做其余的。我对此很陌生。有帮助吗？非常感谢提前。

＆＃13;

var pad = function(n) { return (''+n).length<4?pad('0'+n):n; };

jQuery.fn.timer = function() {
    var t = this, i = 0;
    setInterval(function() {
        t.text(pad(i++));
    }, 1000);
};
                
$('#timer').timer();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='timer'></div>

＆＃13;

Answer 1

这样的事情应该有效：

这是一个jsFiddle DEMO

的jQuery

$.fn.timer = function (complete, warning, danger) {

var $this = $(this);
var total = 0;

$this.text(total);

var intervalComplete = parseInt(complete, 10);
var intervalWarning = parseInt(intervalComplete - warning, 10);
var intervalDanger = parseInt(intervalComplete - danger, 10);

var clock = setInterval(function () {

    total += 1;

    $this.text(total);

    if (intervalWarning === total) {
        // set to YELLOW:
        $this.addClass('yellow');
    }

    if (intervalDanger === total) {
        // set to RED:
        $this.removeClass('yellow').addClass('red');
    }

    if (intervalComplete === total) {
        // reset:
        clearInterval(clock);
        $this.removeClass();
        alert('COMPLETE!');
    }

}, 1000);

};

$(function () {
   $('#timer').timer(240, 45, 10);
 });

CSS

.red {
background-color: red;
}

.yellow {
    background-color: yellow;
}

另外一点：

您应该在函数中进行一些错误验证，以确保您的计数器完成时间大于警告和危险时间间隔。

Answer 2

你可以做这样的事情

var pad = function (n) {
    return ('' + n).length < 4 ? pad('0' + n) : n;
};

jQuery.fn.timer = function () {
    var t = this,
        i = 0;
    setInterval(function () {
        t.text(pad(i++));
        checkTime(i, t);
    }, 1000);
};

$('#timer').timer();

checkTime = function (time, t) {
    switch (time -1) {
        case 10:
            t.css('color','red');
            break;
        case 20:
            t.css('color','yellow');
            break;
        case 30:
            t.css('color','green');
            break;
        case 40:
            t.css('color','black');
            break;
        default:
    }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='timer'></div>

Answer 3

您可以尝试这样的事情：

JSFiddle

这是一个纯JS计时器代码。另外，对于弹出窗口，您可以使用类似Bootbox.js的内容。

代码

＆＃13;

function timer() {
  var time = {
    sec: 00,
    min: 00,
    hr: 00
  };
  var finalLimit = null,
    warnLimit = null,
    errorLimit = null;
  var max = 59;
  var interval = null;

  function init(_hr, _min, _sec) {
    time["hr"] = _hr ? _hr : 0;
    time["min"] = _min ? _min : 0;
    time["sec"] = _sec ? _sec : 0;
    printAll();
  }

  function setLimit(fLimit, wLimit, eLimit) {
    finalLimit = fLimit;
    warnLimit = wLimit;
    errorLimit = eLimit;
  }

  function printAll() {
    print("sec");
    print("min");
    print("hr");
  }

  function update(str) {
    time[str] ++;
    time[str] = time[str] % 60;
    if (time[str] == 0) {
      str == "sec" ? update("min") : update("hr");
    }
    print(str);
  }

  function print(str) {
    var _time = time[str].toString().length == 1 ? "0" + time[str] : time[str];
    document.getElementById("lbl" + str).innerHTML = _time;
  }

  function validateTimer() {
    var c = "";
    var secs = time.sec + (time.min * 60) + (time.hr * 60 * 60);
    console.log(secs, finalLimit)
    if (secs >= finalLimit) {
      stopTimer();
    } else if (secs >= errorLimit) {
      c = "error";
    } else if (secs >= warnLimit) {
      c = "warn";
    } else {
      c = "";
    }
    var element = document.getElementsByTagName("span");
    console.log(element, c)
    document.getElementById("lblsec").className = c;
  }

  function startTimer() {
    init();
    if (interval) stopTimer();
    interval = setInterval(function() {
      update("sec");
      validateTimer();
    }, 1000);
  }

  function stopTimer() {
    window.clearInterval(interval);
  }

  function resetInterval() {
    stopTimer();
    time["sec"] = time["min"] = time["hr"] = 0;
    printAll();
    startTimer();
  }

  return {
    'start': startTimer,
    'stop': stopTimer,
    'reset': resetInterval,
    'init': init,
    'setLimit': setLimit
  }
};

var time = new timer();

function initTimer() {
  time.init(0, 0, 0);
}

function startTimer() {
  time.start();
  time.setLimit(10, 5, 8);
}

function endTimer() {
  time.stop();
}

function resetTimer() {
  time.reset();
}

＆＃13;

span {
  border: 1px solid gray;
  padding: 5px;
  border-radius: 4px;
  background: #fff;
}
.timer {
  padding: 2px;
  margin: 10px;
}
.main {
  background: #eee;
  padding: 5px;
  width: 200px;
  text-align: center;
}
.btn {
  -webkit-border-radius: 6;
  -moz-border-radius: 6;
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  background: #2980b9;
  text-decoration: none;
  transition: 0.4s;
}
.btn:hover {
  background: #3cb0fd;
  text-decoration: none;
  transition: 0.4s;
}
.warn {
  background: yellow;
}
.error {
  background: red;
}

＆＃13;

<div class="main">
  <div class="timer"> <span id="lblhr">00</span>
    : <span id="lblmin">00</span>
    : <span id="lblsec">00</span>

  </div>
  <button class="btn" onclick="startTimer()">Start</button>
  <button class="btn" onclick="endTimer()">Stop</button>
  <button class="btn" onclick="resetTimer()">Reset</button>
</div>

＆＃13;

希望它有所帮助！

需要计时定时器

3 个答案:

的jQuery

CSS

代码