Timer

Epiales · Post by **Epiales** » Sun Mar 16, 2014 9:33 pm

Okay, working on my game again. Got a lot of new ideas and a lot of changes I need to make to my existing one.

First, I need to know how to go about making a countdown timer start and show the time decreasing, once you click on an object, or click on an upgrade/collect button. Then once the time ends, the button shows back up. I think I can do the button showing up, as my game currently has something similar. It's the actual countdown timer that I will have the problem with. I have one currently, but you have to refresh the page to see the changed time... I need it to countdown without page refresh.

Thanks!

Post by **Jackolantern** » Sun Mar 16, 2014 10:18 pm

Here is a simple client-side script that will run a countdown, and then show an alert when the timer goes off:

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        var startTime = 12;
        var timer;
        window.onload = function() {
            //set the initial time
            var clock = document.getElementById("clock");
            clock.innerHTML = startTime;

            //start the timer
            timer = setInterval(function() {
                //remove a second
                startTime--;
                //a little bit of trickery to make sure the 0th second is counted, but only 0 appears on the clock
                if (startTime < 0) {
                    clock.innerHTML = 0;
                    alert("The timer went off!");
                    clearInterval(timer);
                } else {
                    clock.innerHTML = startTime;
                }
            }, 1000);
        };
    </script>
</head>
<body>
    <div id="clock"></div>
</body>
</html>

Epiales · Post by **Epiales** » Sun Mar 16, 2014 10:21 pm

Jackolantern wrote:Here is a simple client-side script that will run a countdown, and then show an alert when the timer goes off:

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        var startTime = 12;
        var timer;
        window.onload = function() {
            //set the initial time
            var clock = document.getElementById("clock");
            clock.innerHTML = startTime;

            //start the timer
            timer = setInterval(function() {
                //remove a second
                startTime--;
                //a little bit of trickery to make sure the 0th second is counted, but only 0 appears on the clock
                if (startTime < 0) {
                    clock.innerHTML = 0;
                    alert("The timer went off!");
                    clearInterval(timer);
                } else {
                    clock.innerHTML = startTime;
                }
            }, 1000);
        };
    </script>
</head>
<body>
    <div id="clock"></div>
</body>
</html>

Okay thanks.. Will check this out some... By chance does someone know what video the urban realms has the timer on? I saw somewhere that the series had a javascript timer explained in the video. So wanted to check that out as well. Thank you!

Epiales · Post by **Epiales** » Mon Mar 17, 2014 11:07 pm

Okay, what I have done so far is to be able to click on a build button, and have it enter the time you clicked on it in one field in the database, and the time it takes for it to build in another field in the database. So it's set for testing, to 45 minutes. When you click the build, it puts the current time in there and then for the finish time, it takes the current time and adds 45 minutes to it. What I need now is for it to show the timer with the code you gave above. I know nothing about ajax or jquery or anything, so any help would be great. Thank you.

Code:

Code: Select all

<?php
$db_conx = mysqli_connect("localhost", "root", "", "time");
// Evaluate the connection
if (mysqli_connect_errno()) {
    echo mysqli_connect_error();
    exit();
}
$time = time();
$sql = "UPDATE time SET start='$time'";
$query = mysqli_query($db_conx, $sql);
?>

<?php
if(isset($_POST['bus'])) {

$sql = "SELECT * from time WHERE userid = 1 LIMIT 1";
$user_query = mysqli_query($db_conx, $sql);
$row = mysqli_num_rows($user_query);
 
$time = time();
$finish = time() + strtotime($row['start']) + (90 * 30);
$currenttime = $time;
$sql2 = "INSERT INTO time (start, finish) VALUES ($time, $finish)";
        $query = mysqli_query($db_conx, $sql2);

}
?>

<?php
$bus="<img src='bus.png'>";
echo " $bus";
?>

<div id="bus">
<table>
<form method='post' action='timerexample.php'>
<td class="tooltip"><input type='submit' value='Build'></td>
<input type='hidden' name='bus' value='1'></form>
</table>

So as an example, in the database it looks like:

Start time: 1395097384
Finish time: 1395100084

Subtract the two, it's 2700 seconds, which is 45 mintues

I could easily just echo the difference to show the remainder, but then it wouldn't countdown; you would need to refresh page in order to see the progress. I need a timer to countdown that 45 minutes and for the build button to be removed while it's counting down, AND where the timer doesn't start over when the page is refreshed.

Post by **hallsofvallhalla** » Thu Mar 20, 2014 2:50 pm

Epiales · Post by **Epiales** » Thu Mar 20, 2014 4:09 pm

Okay, I still must not be getting it... If I put this:

Code: Select all

<script>
var sec_num = 1395100084 - 1395097384;
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);

if (hours < 10) {hours = "0"+hours;}
if (minutes < 10) {minutes = "0"+minutes;}
if (seconds < 10) {seconds = "0"+seconds;}
var time = hours+':'+minutes+':'+seconds;
return time;
</script>

It does nothing. Blank page. I don't know much about Var and js stuff, but looks like it's defining the seconds, then those seconds are broken down into the hours, mins, seconds, and then the time is returned. So to me, looks like it should do something?

And I"m assuming I would put like 30 mins for the sec_num for 30 mins, or at least put the seconds there.....since I shouldn't put time in database? So I would need it put the time in the code and have a button to click and then the button go away when they click on it...

Epiales · Post by **Epiales** » Thu Mar 20, 2014 5:00 pm

Okay, so I have it showing the timer now. Just need to figure out how to start it and countdown to zero. YAY me lol. Been using both the codes listed above to try and sort this out. I know I'll need help on a click button event that when you click build or collect, or whatever, it starts the timer, and then the timer goes poof when you start the time..... something like that anyway to get me started. Thanks!

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
		var sec_num = 2700-10;
		var hours = Math.floor(sec_num / 3600);
		var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
		var seconds = sec_num - (hours * 3600) - (minutes * 60);
		
		if (hours < 10) {hours = "0"+hours;}
		if (minutes < 10) {minutes = "0"+minutes;}
		if (seconds < 10) {seconds = "0"+seconds;}
        var time = hours+':'+minutes+':'+seconds;
		
        window.onload = function() {
            //set the initial time
            var clock = document.getElementById("clock");
            clock.innerHTML = time;

        };
    </script>
</head>
<body>
    <div id="clock"></div>
</body>
</html>

Post by **hallsofvallhalla** » Thu Mar 20, 2014 8:11 pm

yes mine was not a complete solution but a resolution. You had to make it show.

Epiales · Post by **Epiales** » Sat Apr 05, 2014 12:01 am

Still workin' on it... grrrr.

Epiales · Post by **Epiales** » Tue Apr 08, 2014 7:53 pm

Okay, here's my code for a working timer. My problem is how to make X search for the current timestamp in the database so that it gets it from the database? And how to make it not start over after refresh? Any ideas? Thanks! I'll be doing more google searching as well. Thank you for the help you've given.

Code: Select all

<html>
<head>
<script type="text/javascript">
var x=2700;
var m=x/60;
var	h=m/60;
var	m=(h-Math.floor(h))*60;
var s= Math.round((m-Math.floor(m))*60);
var m = Math.floor(m);
var h = Math.floor(h);
if(h<10){
	h = '0'+h;
}
if(m<10){
	m = '0'+m;
}
if(s<10){
	s = '0'+s;
}
var c = h+':'+m+':'+s;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById('txt').value=c;
if(x>0){
	x=x-1;
	m=x/60;
	h=m/60;
	m=(h-Math.floor(h))*60;
	s= Math.round((m-Math.floor(m))*60);
	m = Math.floor(m);
	h = Math.floor(h);
	if(h<10){
	h = '0'+h;
	}
	if(m<10){
		m = '0'+m;
	}
	if(s<10){
		s = '0'+s;
	}
	c = h+':'+m+':'+s;
}else{
	c='Ready';
}
t=setTimeout("timedCount()",1000);
}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}
</script> 
</head>

<body>
<form>
<input type="button" value="Build" onclick="doTimer()">
<input type="text" id="txt">
</form>
<p>My Example</p>
</body>
</html>

EDITED******************

Okay, if I don't store time in the database, then I won't have to call it from the database. What I would think I needed to do then, is to remove the build button and display a picture after the timer runs down...Then in the database have a YES to the building they have just built. If there is a yes, then the BUILD button won't show....if there is a NO in the database, then the build shows? Something like that anyway. I couuld do this in php, but don't know how to mix it with JavaScript unfortunately, and not sure how to keep time from messing up on page refresh. Any Ideas? Or maybe just show an upgrade button afterwards, then repeat the timer process...

Timer

Timer

Re: Timer

Re: Timer

Re: Timer

Re: Timer

Re: Timer

Re: Timer

Re: Timer

Re: Timer

Re: Timer