code:
<html>
<head>
<title>Timer</title>
</head>
<body>
<?php
$dbSessionDuration = "1:30:00";
list($hour,$min,$sec) = explode(':', $dbSessionDuration);
$dbSessionDurationTime = mktime(0,0,0,$hour,$min,$sec);
?>
<div class="count"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var millis = <?php echo $dbSessionDurationTime; ?>
function displaytimer(){
var hours = Math.floor(millis / 36e5),
mins = Math.floor((millis % 36e5) / 6e4),
secs = Math.floor((millis % 6e4) / 1000);
$('.count').html(hours+':'+mins+':'+secs);
}
setInterval(function(){
millis -= 1000;
displaytimer();
}, 1000);
</script>
</body>
</html>
In this code I want to create a timer and the time will start after 1:30:00 and then it decrease by second like 1:29:59 then 1:29:58 like this but now when I use to get time inside the class="count" not happen. I don't know why? So, How can I fix this issue? please help me.
Thank You
There is two notes on your code :-
-If you want to convert a variable from php to javascript you should echo it inside double/single quote.
-you need to get the total time in millis since you are using this millis to regenerate your time again so this is the equation to convert your time to millis ( ( intval($hour) * 60 * 60 ) + ( intval($min) * 60 ) + ( intval($sec) ) ) * 1000.
Code
<html>
<head>
<title>Timer</title>
</head>
<body>
<?php
$dbSessionDuration = "1:30:00";
list($hour,$min,$sec) = explode(':', $dbSessionDuration);
$dbSessionDurationTime = ( ( intval($hour) * 60 * 60 ) + ( intval($min) * 60 ) + ( intval($sec) ) ) * 1000;
?>
<div class="count"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script type="text/javascript">
var millis = '<?php echo $dbSessionDurationTime; ?>';
function displaytimer(){
var hours = Math.floor(millis / 36e5),
mins = Math.floor((millis % 36e5) / 6e4),
secs = Math.floor((millis % 6e4) / 1000);
$('.count').html(hours+':'+mins+':'+secs);
}
setInterval(function(){
millis -= 1000;
displaytimer();
}, 1000);
</script>
</body>
</html>
The problem is at your convertion, it's returning 949219200 where in fact it should have returned 5400000
<html>
<head>
<title>Timer</title>
</head>
<body>
<?php
$dbSessionDuration = "1:30:00";
$time = explode(":", $dbSessionDuration);
$hour = $time[0] * 60 * 60 * 1000;
$minute = $time[1] * 60 * 1000;
$sec = $time[2] * 1000;
$dbSessionDurationTime = $hour + $minute + $sec;
?>
<div class="count"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var millis = '<?php echo $dbSessionDurationTime; ?>';
function displaytimer(){
var hours = Math.floor(millis / 36e5),
mins = Math.floor((millis % 36e5) / 6e4),
secs = Math.floor((millis % 6e4) / 1000);
$('.count').html(hours+':'+mins+':'+secs);
}
setInterval(function(){
millis -= 1000;
displaytimer();
}, 1000);
</script>
</body>
Now the $dbSessionDurationTime will contain the right number of milisecs of 5400000 Here is a working codepen: https://codepen.io/anon/pen/EpGYKo of course the php part its not there but you can see the timer working as you want it to.