Question

我想在我的网页上添加一个倒计时器，因为包含0:00:00的标签应该开始显示0:00:01，依此类推，直到点击停止按钮为止。有一个简单的javascript / jquery解决方案吗？

<html>
<head>
    <title>Home</title>
    <script src="jquery-1.11.1.js">
    </script>
    <script>
    $(document).ready(function(){
            $("p").click(function(){
            //psst. psst.
            });
        });

    </script>
</head>
<body>
<form>
    <table>
        <tr>
            <td><input type="text" id="project" placeholder="project"></td>
            <td><p id="timer">0:00:00<p></td>
        </tr>
    </table>
</form>
</body>
</html>

Answer 1

我在Vanilla JS HERE

中尝试了一些东西

var seconds=0, minutes=0, hours=0;
var counter;
var stop,start;
var counting = false;

window.onload = function () {
    counter = document.getElementById('counter');
    stop = document.getElementById('stop');
    stop.onclick = function () {
        counting = false;
    }
    start = document.getElementById('start');
    start.onclick = function() {
        counting = true;
        timer();
    }

    counting = true;
    timer();
}

function timer() {
    if (seconds >= 60) {
        minutes++;
        seconds = 0;
    }
    if (minutes >= 60) {
        hours++;
        minutes = 0;
    }
    counter.innerHTML = hours + ":" + minutes + ":" + seconds;
    if (counting) {
        seconds++;
        setTimeout(timer, 1000);
    }
}

如果您需要更多信息，请发表评论..

Answer 2

time.js

function time(id)
    {
        date = new Date;

        h = date.getHours();
        if(h<10)
        {
                h = "0"+h;
        }
        m = date.getMinutes();
        if(m<10)
        {
                m = "0"+m;
        }
        s = date.getSeconds();
        if(s<10)
        {
                s = "0"+s;
        }
        result = h+':'+m+':'+s;
        document.getElementById(id).innerHTML = result;
        // "setTimeout" call function "time" every 1 second (1000 milliseconds)
        setTimeout('time("'+id+'");','1000'); 
        return true;
}

<强> HTML

<html>
    <head>
        <title>Time in Javascript</title>
        <script type="text/javascript" src="time.js"></script>
    </head>
    <body>
            <span id="time"></span>
            <script type="text/javascript">window.onload = time('time');</script>
    </body>
</html>

Answer 3

试试这种方式

使用https://github.com/jchavannes/jquery-timer

将此文件包含在头

中

<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript">
<script src="http://jchavannes.com/include/scripts/3p/jquery.timer.js" type="text/javascript">

脚本

var Example1 = new (function() {
    var $stopwatch, // Stopwatch element on the page
        incrementTime = 70, // Timer speed in milliseconds
        currentTime = 0, // Current time in hundredths of a second
        updateTimer = function() {
            $stopwatch.html(formatTime(currentTime));
            currentTime += incrementTime / 10;
        },
        init = function() {
            $stopwatch = $('#stopwatch');
            Example1.Timer = $.timer(updateTimer, incrementTime, true);
        };
    this.resetStopwatch = function() {
        currentTime = 0;
        this.Timer.stop().once();
    };
    $(init);
});
function formatTime(time) {
    var min = parseInt(time / 6000),
        sec = parseInt(time / 100) - (min * 60),
        hundredths = pad(time - (sec * 100) - (min * 6000), 2);
    return (min > 0 ? pad(min, 2) : "00") + ":" + pad(sec, 2) + ":" + hundredths;
}
function pad(number, length) {
    var str = '' + number;
    while (str.length < length) {str = '0' + str;}
    return str;
}
Example1();

DEMO

Answer 4

使用setInterval和Date 您可以使用按钮停止并启动计时器。

var d = new Date();
d.setHours(0,0,0,0);
 setInterval((function(){

  return function(){
   d.setSeconds(d.getSeconds()+1);
   var t = d.toLocaleTimeString("en-US", {hour12: false});
   document.getElementById("demo").innerHTML = t;
 }
})(), 1000);

Fiddle Demo

Answer 5

请尝试使用此fiddle作为解决方案。

JS。

var hour = 0;
var min = 0;
var second = 0;
var i=setInterval(function(){
    second++;
    if(second > 59){
        second = 0;
        min++;
        if(min>59){
            hour++;
            min = 0;
        }
    }
    var timer_time = (hour > 9 ? hour : '0'+hour)+':'+(min > 9 ? min : '0'+min)+':'+(second > 9 ? second : '0'+second);
    $('#timer').html(timer_time);
    }, 1000);

$('#stop_timer').click(function(){
    clearInterval(i);
});

HTML

<p id='timer'>00:00:00</p>
<button id='stop_timer'>Stop Timer</button>

由于

Answer 6

使用http://www.w3schools.com/js/js_timing.asp中记录的时间事件。

计时器显示在网页上

6 个答案: