jqMobi Stopwatch
HTML
<script src="https://raw.github.com/appMobi/jQ.Mobi/master/jq.mobi.min.js"></script>
<div class="time">
<div class="hours">01</div>
<div class="minutes">00</div>
<div class="seconds">00</div>
</div>
<div class="timerB">
<div class="startpause" id="timerButton"><a href="javascript:;" onclick="startTimer()">start</a></div>
<div class="resetb" onclick="resetTimer()">clear</div>
</div>
CSS
.time {
position: relative;
top: 145px;
left: 132px;
font-size: 7.5em;
}
.startpause {
position: relative;
top: 300px;
left: -262px;
font-size: 2.4em;
}
.startpause a {
color: #000;
text-decoration: none;
}
.resetb {
position: relative;
top: 336px;
left: -224px;
font-size: 1.8em;
}
.startpause, .resetb {
cursor: pointer;
color: #000;
}
.hours, .minutes, .seconds {
float:left;
color: #000;
}
.minutes:before, .minutes:after {
content:':';
}
JavaScript
var hour = 1;
var mins = 59;
var secs = 59;
var timer = null;
function startTimer() {
// $("#timerButton").html("<a href='javascript:;' onclick='pauseTimer()'>pause</a>");
// alert(timer);
timer = setInterval(function() {
if (secs <= 9) {
secs = "0" + secs;
alert(secs);
}
$(".seconds").html(secs);
secs--;
if (secs == 0) {
secs = 59;
if (mins != 0) {
if (mins <= 9) {
mins = "0" + mins;
}
$(".minutes").html(mins);
mins--;
} else {
$(".minutes").html("00");
}
if (mins == 0) {
mins = 59;
if (hour != 0) {
hour--;
if (hour <= 9) {
hour = "0" + hour;
}
$(".hours").html(hour);
}
}
}
if (secs == '00' && mins == '00' && hour == '00') {
$("#timerButton").html("done");
}
}, 0);
}
function pauseTimer() {
clearInterval(timer);
$("#timerButton").html("<a href='javascript:;' onclick='startTimer()'>start</a>");
}
function resetTimer() {
clearInterval(timer);
timer = null;
hour = 10;
mins = 10;
secs = 10;
$(".seconds").html("00");
$(".minutes").html("00");
$(".hours").html("00");
$("#timerButton").html("<a href='javascript:;' onclick='startTimer()'>start</a>");
}