在javascript中简单计数定时器
我正在寻找一个简单的计数在JavaScript计时器。 我发现的所有剧本都是“全部歌舞都跳舞”。 我只想要一个jQuery免费，最小的大惊小怪计时器显示在几分钟和几秒钟。 谢谢。
检查这个：
<label id="minutes">00</label>:<label id="seconds">00</label> <script type="text/javascript"> var minutesLabel = document.getElementById("minutes"); var secondsLabel = document.getElementById("seconds"); var totalSeconds = 0; setInterval(setTime, 1000); function setTime() { ++totalSeconds; secondsLabel.innerHTML = pad(totalSeconds%60); minutesLabel.innerHTML = pad(parseInt(totalSeconds/60)); } function pad(val) { var valString = val + ""; if(valString.length < 2) { return "0" + valString; } else { return valString; } } </script> 定时器为jQuery – 更小，工作，testing。
var sec = 0; function pad ( val ) { return val > 9 ? val : "0" + val; } setInterval( function(){ $("#seconds").html(pad(++sec%60)); $("#minutes").html(pad(parseInt(sec/60,10))); }, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="minutes"></span>:<span id="seconds"></span>
以下代码用作计时器计时器。 它是纯粹的JavaScript代码，显示hour:minute:second 。 它也有一个停止button：
<div id="timer"></div> <div id ="stop_timer" onclick="clearInterval(timerVar)">Stop time</div> var timerVar = setInterval(countTimer, 1000); var totalSeconds = 0; function countTimer() { ++totalSeconds; var hour = Math.floor(totalSeconds /3600); var minute = Math.floor((totalSeconds - hour*3600)/60); var seconds = totalSeconds - (hour*3600 + minute*60); document.getElementById("timer").innerHTML = hour + ":" + minute + ":" + seconds; }
摆弄在Bakoveran的代码和其他代码在计算器中获取一切。 对不起，它使用jquery，但使用起来非常简单。 有一个选项可以暂停，然后恢复。
更新：添加更多选项。 现在开始，暂停，恢复，重置并重启。 混合function以获得所需的结果。
在这里小提琴： https : //jsfiddle.net/wizajay/rro5pna3/
<span id="min">00</span>:<span id="sec">00</span> <input id="startButton" type="button" value="Start"> <input id="pauseButton" type="button" value="Pause"> <input id="resumeButton" type="button" value="Resume"> <input id="resetButton" type="button" value="Reset"> <input id="restartButton" type="button" value="Restart"> var Clock = { totalSeconds: 0, start: function () { var self = this; function pad(val) { return val > 9 ? val : "0" + val; } this.interval = setInterval(function () { self.totalSeconds += 1; $("#min").text(pad(Math.floor(self.totalSeconds / 60 % 60))); $("#sec").text(pad(parseInt(self.totalSeconds % 60))); }, 1000); }, reset: function () { Clock.totalSeconds = null; clearInterval(this.interval); $("#min").text("00"); $("#sec").text("00"); }, pause: function () { clearInterval(this.interval); delete this.interval; }, resume: function () { if (!this.interval) this.start(); }, restart: function () { this.reset(); Clock.start(); } }; $('#startButton').click(function () { Clock.start(); }); $('#pauseButton').click(function () { Clock.pause(); }); $('#resumeButton').click(function () { Clock.resume(); }); $('#resetButton').click(function () { Clock.reset(); }); $('#restartButton').click(function () { Clock.restart(); });
@Cybernate，我今天正在寻找相同的脚本感谢您的意见。 不过，我改变了一下jQuery的一点点…
function clock(){ $('body').prepend('<div id="clock"><label id="minutes">00</label>:<label id="seconds">00</label></div>'); var totalSeconds = 0; setInterval(setTime, 1000); function setTime() { ++totalSeconds; $('#clock > #seconds').html(pad(totalSeconds%60)); $('#clock > #minutes').html(pad(parseInt(totalSeconds/60))); } function pad(val) { var valString = val + ""; if(valString.length < 2) { return "0" + valString; } else { return valString; } } } $(document).ready(function(){ clock(); });
css部分：
<style> #clock { padding: 10px; position:absolute; top: 0px; right: 0px; color: black; } </style>
我不得不为学生的作业devise一个计时器。 下面是我使用的一个完全基于从等级开始的经过的时间，它是通过在加载页面的时间点存储系统时间，然后每半秒钟将其与系统时间进行比较：
var startTime = Math.floor(Date.now() / 1000); //Get the starting time (right now) in seconds localStorage.setItem("startTime", startTime); // Store it if I want to restart the timer on the next page function startTime() { var now = Math.floor(Date.now() / 1000); // get the time now var diff = now - startTime; // diff in seconds between now and start var m = Math.floor(diff / 60); // get minutes value (quotient of diff) var s = Math.floor(diff % 60); // get seconds value (remainder of diff) m = checkTime(m); // add a leading zero if it's single digit s = checkTime(s); // add a leading zero if it's single digit document.getElementById("idName").innerHTML( m + ":" + s ); // update the element where the timer will appear var t = setTimeout(startTime, 500); // set a timeout to update the timer } function checkTime(i) { if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10 return i; } startTime();
这样，“setTimeout”是否受到执行延迟的影响并不重要，经过的时间总是相对于第一次开始时的系统时间以及更新时的系统时间。
注意：在编写jQuery脚本之前，一定要包含jQuery
第一步：每隔1000ms调用一次setInterval函数（1s）
Stpe2：在这个function。 增加秒数
第三步：检查条件
<span id="count-up">0:00</span> <script> var min = 0; var second = 00; var zeroPlaceholder = 0; var counterId = setInterval(function(){ countUp(); }, 1000); function countUp () { second++; if(second == 59){ second = 00; min = min + 1; } if(second == 10){ zeroPlaceholder = ''; }else if(second == 00){ zeroPlaceholder = 0; } document.getElementById("count-up").innerText = min+':'+zeroPlaceholder+second; } </script>
看看这些解决scheme：
计算已用时间
只是想把我的2美分。我修改@Ajay辛格的function来处理倒计时和数了这里是从jsfiddle剪断。
var countDown = Math.floor(Date.now() / 1000) runClock(null, function(e, r){ console.log( e.seconds );}, countDown); var t = setInterval(function(){ runClock(function(){ console.log('done'); clearInterval(t); },function(timeElapsed, timeRemaining){ console.log( timeElapsed.seconds ); }, countDown); }, 100);
这是一个React（Native）版本：
import React, { Component } from 'react'; import { View, Text, } from 'react-native'; export default class CountUp extends Component { state = { seconds: null, } get formatedTime() { const { seconds } = this.state; return [ pad(parseInt(seconds / 60)), pad(seconds % 60), ].join(':'); } componentWillMount() { this.setState({ seconds: 0 }); } componentDidMount() { this.timer = setInterval( () => this.setState({ seconds: ++this.state.seconds }), 1000 ); } componentWillUnmount() { clearInterval(this.timer); } render() { return ( <View> <Text>{this.formatedTime}</Text> </View> ); } } function pad(num) { return num.toString().length > 1 ? num : `0${num}`; }
从@Chandu扩展，添加了一些用户界面：
<html> <head> <script src="jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> </head> <style> button { background: steelblue; border-radius: 4px; height: 40px; width: 100px; color: white; font-size: 20px; cursor: pointer; border: none; } button:focus { outline: 0; } #minutes, #seconds { font-size: 40px; } .bigger { font-size: 40px; } .button { box-shadow: 0 9px #999; } .button:hover {background-color: hotpink} .button:active { background-color: hotpink; box-shadow: 0 5px #666; transform: translateY(4px); } </style> <body align='center'> <button onclick='set_timer()' class='button'>START</button> <button onclick='stop_timer()' class='button'>STOP</button><br><br> <label id="minutes">00</label><span class='bigger'>:</span><label id="seconds">00</label> </body> </html> <script> function pad(val) { valString = val + ""; if(valString.length < 2) { return "0" + valString; } else { return valString; } } totalSeconds = 0; function setTime(minutesLabel, secondsLabel) { totalSeconds++; secondsLabel.innerHTML = pad(totalSeconds%60); minutesLabel.innerHTML = pad(parseInt(totalSeconds/60)); } function set_timer() { minutesLabel = document.getElementById("minutes"); secondsLabel = document.getElementById("seconds"); my_int = setInterval(function() { setTime(minutesLabel, secondsLabel)}, 1000); } function stop_timer() { clearInterval(my_int); } </script>
看起来如下：
