以秒和分钟显示时间计数器

display time counter in terms of second and minutes

本文关键字：时间 计数器 显示 分钟      更新时间：2023-09-26

我有一个时间计数器，工作120秒(即2分钟)。虽然它工作得很好，但我希望它应该以分钟和秒的形式显示。这里是JS的代码FIDDLE

<span id="count">2:00</span> 
<button type="submit" id="startClock" form="form1"value="Submit">Submit</button>
$('#startClock').click(function(){
    var counter = 120;
  setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
    if (counter === 0) {
        alert('sorry, out of time');
        clearInterval(counter);
    }
  }, 1000);
});

我想让结果像这样显示

02:00

和定时器应该继续递减

使用以下代码将秒转换为m:s格式:

var str = parseInt(counter / 60) + ':' + (counter % 60);

完整代码:

$('#startClock').click(function() {
    var counter = 120;
    setInterval(function() {
        counter--;
        var str = parseInt(counter / 60) + ':' + (counter % 60);
        if (counter >= 0) {
            span = document.getElementById("count");
            span.innerHTML = str;
        }
        if (counter === 0) {
            alert('sorry, out of time');
            clearInterval(counter);
        }
    }, 1000);
});

jsfiddle

可以使用Date Object:

var d = new Date(counter * 1000);  
span.innerHTML = d.getMinutes() + ':' + d.getSeconds();

这也是工作

var min = parseInt(counter/60);
var sec = Math.abs(counter - (min*60));

小提琴

使用以下函数:

var 
 millisecToTimeStruct = function (ms) {
        var d, h, m, s;
        if (isNaN(ms)) {
            return {};
        }
        d = ms / (1000 * 60 * 60 * 24);
        h = (d - ~~d) * 24;
        m = (h - ~~h) * 60;
        s = (m - ~~m) * 60;
        return {
            d: ~~d,
            h: ~~h,
            m: ~~m,
            s: ~~s
        };
    },
    toFormattedStr = function (tStruct) {
        var res = '';
        if (typeof tStruct === 'object') {
            res += tStruct.m + ':' + tStruct.s;
        }
        return res;
    };
http://jsfiddle.net/dk2or4qs/5/

可以使用:

html: 

<span id="count">02:00</span>
<button type="submit" id="startClock" form="form1" value="Submit">Submit</button>

js: 

$('#startClock').click(function () {
    var counter = 120;
    setInterval(function () {
        counter--;
        if (counter >= 0) {
            span = document.getElementById("count");
            var time =new Date(counter*1000);
            var m = time.getMinutes();
            m = m<10?'0'+m:m;
            var s = time.getSeconds();
            span.innerHTML = m+':'+s;
        }
        if (counter === 0) {
            alert('sorry, out of time');
            clearInterval(counter);
        }
    }, 1000);
});

演示

这将改变定时器的格式为"02:00"。

您可以更改

 span.innerHTML = counter;


var m = Math.floor(counter/60);
var s = counter-(m*60);
if(s<10){s="0"+s;}
span.innerHTML =m+":"+s;

它可以在任意时间内工作直到0:01

这里是您的小提琴分叉和调优:http://jsfiddle.net/6LL7ofyp/1/

Try (format mm:ss):

var span = document.querySelector("#count");
function countDown(counter){
	var interval = setInterval(function(){
		
		var minutes = ((counter / 60) | 0) + "";
		var seconds = (counter % 60) + "";
		var format = ""
                      + new Array(3-minutes.length).join("0") + minutes 
                      + ':' 
                      + new Array(3-seconds.length).join("0") + seconds;
		span.innerHTML = format;
		counter--;
		if(counter === 0){
			clearInterval(interval);
			alert('sorry, out of time')
		}
        
	},1e3)
}
countDown(120);
<span id="count"><span>

相关文章：