I'm trying to edit an open source js countdown timer so that the user can input both hours, minutes and seconds, not just seconds. I imagine that this isn't too difficult to fix as it's just basic mathematics, but I'm completely new to js so I'm lost. =(
Here's the code (which is also found on jsbin: http://jsbin.com/odiya3/90/edit)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="language" content="en-au" />
<meta name="robots" content="ALL" />
<meta name="revisit-after" content="7 Days" />
<title>CSS3 pie graph timer with jquery</title>
<meta name="keywords" content="css3, jquery, pie, graph, chart, timer" />
<meta name="description" content="CSS3 pie graph timer with jquery" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://blakek.us/labs/jquery/css3-pie-graph-timer/style.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<style>
.timer {
position:relative;
font-size: 200px;
width:1em;
height:1em;
float: left;
}
.timer > .percent {
position: absolute;
top: 1.05em;
left: 0;
width: 3.33em;
font-size: 0.3em;
text-align:center;
}
.timer > #slice {
position:absolute;
width:1em;
height:1em;
clip:rect(0px,1em,1em,0.5em);
}
.timer > #slice.gt50 {
clip:rect(auto, auto, auto, auto);
}
.timer > #slice > .pie {
border: 0.1em solid #c0c0c0;
position:absolute;
width:0.8em; /* 1 - (2 * border width) */
height:0.8em; /* 1 - (2 * border width) */
clip:rect(0em,0.5em,1em,0em);
-moz-border-radius:0.5em;
-webkit-border-radius:0.5em;
border-radius:0.5em;
}
.timer > #slice > .pie.fill {
-moz-transform:rotate(180deg) !important;
-webkit-transform:rotate(180deg) !important;
-o-transform:rotate(180deg) !important;
transform:rotate(180deg) !important;
}
.timer.fill > .percent {
display: none;
}
.timer.fill > #slice > .pie {
border: transparent;
background-color: #c0c0c0;
width:1em;
height:1em;
}
</style>
<style id="jsbin-css">
</style>
</head>
<body>
<h2>Size</h2>
<p><input type="button" id="size" value="Set timer to" /> <input type="text" id="size" size="2" value="40" />px</p>
<h2>Set percent</h2>
<p><input type="button" id="percent" value="Set timer to" /> <input type="text" id="percent" size="2" value="35" />%</p>
<h2>Stop watch</h2>
<p><input type="button" id="watch" value="Start" /> count down from <input type="text" id="watch" size="2" value="10" /> seconds</p>
<div class="timer"></div><div class="timer fill"></div>
<p><a href="http://blakek.us/css3-pie-graph-timer-with-jquery/">Back to discussion</a></p>
<script>
var timer;
var timerCurrent;
var timerFinish;
var timerSeconds;
function drawTimer(percent){
$('div.timer').html('<div class="percent"></div><div id="slice"'+(percent > 50?' class="gt50"':'')+'><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');
var deg = 360/100*percent;
$('#slice .pie').css({
'-moz-transform':'rotate('+deg+'deg)',
'-webkit-transform':'rotate('+deg+'deg)',
'-o-transform':'rotate('+deg+'deg)',
'transform':'rotate('+deg+'deg)'
});
$('.percent').html(Math.round(percent)+'%');
}
function stopWatch(){
var seconds = (timerFinish-(new Date().getTime()))/1000;
if(seconds <= 0){
drawTimer(100);
clearInterval(timer);
$('input[type=button]#watch').val('Start');
alert('Finished counting down from '+timerSeconds);
}else{
var percent = 100-((seconds/timerSeconds)*100);
drawTimer(percent);
}
}
$(document).ready(function(){
$('input[type=button]#percent').click(function(e){
e.preventDefault();
drawTimer($('input[type=text]#percent').val());
});
$('input[type=button]#size').click(function(e){
e.preventDefault();
$('.timer').css('font-size',$('input[type=text]#size').val()+'px');
});
$('input[type=button]#watch').click(function(e){
e.preventDefault();
if($('input[type=button]#watch').val() == 'Start'){
$('input[type=button]#watch').val('Stop');
timerSeconds = $('input[type=text]#watch').val();
timerCurrent = 0;
timerFinish = new Date().getTime()+(timerSeconds*1000);
timer = setInterval('stopWatch()',50);
}else{
$('input[type=button]#watch').val('Start');
clearInterval(timer);
}
});
$('input[type=button]#watch').click();
});
</script>
</body>
</html>
Modify your code at following positions:
<p>
<input type="button" id="watch" value="Start" /> count down from
<input type="text" id="watchH" size="2" value="0" /> hours and
<input type="text" id="watchM" size="2" value="0" /> minutes and
<input type="text" id="watchS" size="2" value="10" /> seconds
</p>
and replace the javascript line timerSeconds = $('input[type=text]#watch').val(); by following lines:
timerMinutes = ~~($('input[type=text]#watchM').val()) * 60;
timerHours = ~~($('input[type=text]#watchH').val()) * 3600;
timerSeconds = ~~($('input[type=text]#watchS').val());
timerSeconds = timerSeconds + timerMinutes + timerHours;
PS: That is one way to achive the goal.