Develop Reference

Game time in Javascript Browser Game

I'm fairly new to javascript and programming at all, to be honest. I know html and css and the basics of javascript and I'm trying to figure out how time works in js.
I would like to make a simple game where the user can take care of a horse. And every action he does (i.e brushing the mane) would take a specific amount of time. Let's say five minutes for that. How do I code that?
Would be really thankful if anyone could tell me. Thank you in advance.
Jolly

just get the time in the future when the even would be finished at.
use this function
function getTime(numOfHours) {
let date = new Date();
date.setTime(date.getTime() + numOfHours * 60 * 60 * 1000);
return date;
}
then do check in your game logic to see if the event end time against the current time.
let endEventTime = getTime(0,00138); // add 5 seconds to the current time
// do a loop or some setTimeout() login and once the time passes then let your user do another action.

Run a counter that is displayed on website

I want to run a counter on the back end of a website, so that it is constantly counting. I made a javascript counter (http://directinvent.com/counter/) which displays the desired result, although this resets whenever the site is loaded for each individual user.
The idea is simple enough. Run the counter back end and display the result live on front end. Any ideas on how this can be done?

The same way you would do a Timer in Javascript. You store when you start your counter. Then you recalulate the result on every update (request). No need to do the math every 1/10s. If nobody ask, this is useless.
Basicly, this will look like this :
long startTime = storeTimeFor(User);
return (currentTimeInSec - startTimeInSec) * incrementationPerSec
With this, you only need to store the startTime for each user (in database, file, or in cache if you want). On reset, just store the currentTime again.
This is how you would do a timer in lots of langage because incrementing a value every seconds (using a sleep(1000)) would not be precise since your thread will not be running all the time, your are not alone on the machine ;)
EDIT :
On the client side, I would not call to much the server, just ask the value store and do the math from the client with the same logic. Using a timeout to do the math over and over every X ms. See how to create a timer in Javascript if need, only the value calculate would change here.

The counter must be stored in the backend (in file or database), either it is a single counter or one counter per user.
When rendering the page, initially show the counter that is read from the backend.
If the speed of the counter is known and constant (e.g. increase 3 per second), then you can use javascript (setTimeout) to increase it every second. The backend will store a number and the time (unix time) when it was created, e.g. 120 at 08:00:00. If a user access the website at 09:00:15, you know that it is 3615 seconds later, so you render the initial page showing the starting counter as 120 + (3615/3) = 1325. After that, the javascript will increment and display it by 3 per second.
If the speed of the counter is unknown, then you need to periodically (e.g. once per 10 seconds) check to the backend via ajax, requesting the current value of the counter. You can immediatelly display that latest value (which means the counter will be updated once every 10 seconds). Or, if you want to give a sense of "live", you can display it incrementally with animation on the client side.
Example: current display shows 120. Ten seconds later, via ajax request you get a new value 150. The difference is 150-120 = 30 in 10 seconds. You can display the counter increased by 3 per second (120, 123, 126, 129, 132, 135, 138, 141, 144, 147, 150). You can also play with random increment to be more realistic, as long as the total increment is 30 in 10 seconds.

I solved this simply by getting the time of the day with the Date() variable, and multiplying the time of the day by the incremental constant desired. This way the scheme will automatically update every day with the correct number as wanted and all the users will be displayed the correct number at any given time.
function dotimer()
{
today=new Date()
window.setInterval("dotimer()",speed)
testMilli = today.getMilliseconds()
testSeconds = today.getSeconds()
testMinutes = today.getMinutes()
testHours = today.getHours()
totalCost = Math.round(testHours * 10800 + testMinutes * 180 + testSeconds * 3 + testMilli * 0.003);
document.getElementById("counterSeconds").innerHTML = totalCost;
}
Although this works for this purpose, it still manages to freeze the browser, so I will have to work out a way to handle this...

Create a scheduled Greasemonkey script

I need to create a special kind of script.
I want to show a message at certain times of the day. I've tested the code in Firebug Console and it works. The code is:
//Getting the hour minute and seconds of current time
var nowHours = new Date().getHours() + '';
var nowMinutes = new Date().getMinutes() + '';
var nowSeconds = new Date().getSeconds() + '';
var this_event = nowHours + nowMinutes + nowSeconds;
//172735 = 4PM 25 Minutes 30 Seconds. Just checked if now is the time
if (this_event == "162530") {
window.alert("Its Time!");
}
I feel that the Script is not running every second. For this to work effectively, the script has to be able to check the hour minutes and second "Every Second". I'm not worried about the performance, I just have to be accurate about the timing (to the second).
How do I do this?

Of course the script isn't running each second, GM-scripts run once when the document has been loaded.
Calculate the difference between the current time and the target-time and use a timeout based on the difference:
var now=new Date(),
then=new Date(),
diff;
then.setHours(16);
then.setMinutes(15);
then.setSeconds(30);
diff=then.getTime()-now.getTime();
//when time already has been reached
if(diff<=0){
window.alert('you\'re late');
}
//start a timer
else{
window.setTimeout(function(){window.alert('it\'s time');},diff);
}

Javascript doesn't guarantee your timeouts and other such events fire exactly on-time.
You should compare two Date objects using >= and remove the timeout or what ever other method you're using for tracking the time inside the matching if (and then reset it if necessary).
For more details see: https://stackoverflow.com/a/19252674/1470607
Alternatively you can use string comparison (but with caveats): https://stackoverflow.com/a/6212411/1470607

Displaying another computer's time on a web page using Javascript? [duplicate]

This question already has answers here:
Clock on webpage using server and system time?
(8 answers)
Closed 9 years ago.
I am working on a very time-sensitive web application. One of the business rules given to me is that the application's behavior must always depend on the time on the web server, regardless of what time is on the client's clock. To make this clear to the user, I was asked to display the server's time in the web application.
To this end, I wrote the following Javascript code:
clock = (function () {
var hours, minutes, seconds;
function setupClock(updateDisplayCallback) {
getTimeAsync(getTimeCallback);
function getTimeCallback(p_hours, p_minutes, p_seconds) {
hours = p_hours;
minutes = p_minutes;
seconds = p_seconds;
setInterval(incrementSecondsAndDisplay, 1000);
}
function incrementSecondsAndDisplay() {
seconds++;
if (seconds === 60) {
seconds = 0;
minutes++;
if (minutes === 60) {
minutes = 0;
hours++;
if (hours === 24) {
hours = 0;
}
}
}
updateDisplayCallback(hours, minutes, seconds);
}
}
// a function that makes an AJAX call and invokes callback, passing hours, minutes, and seconds.
function getTimeAsync(callback) {
$.ajax({
type: "POST",
url: "Default.aspx/GetLocalTime",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var date, serverHours, serverMinutes, serverSeconds;
date = GetDateFromResponse(response);
serverHours = date.getHours();
serverMinutes = date.getMinutes();
serverSeconds = date.getSeconds();
callback(serverHours, serverMinutes, serverSeconds);
}
})
}
return {
setup: setupClock
};
})();
The function passed in for updateDisplayCallback is a simple function to display the date on the web page.
The basic idea is that the Javascript makes an asynchronous call to look up the server's time, store it on the client, and then update it once per second.
At first, this appears to work, but as time goes by, the displayed time gets behind a few seconds every minute. I left it running overnight, and when I came in the next morning, it was off by more than an hour! This is entirely unacceptable because the web application may be kept open for days at a time.
How can I modify this code so that the web browser will continuously and accurately display the server's time?

Javascript's setInterval is not accurate enough to allow you to keep the time like this.
My solution would be:
Periodically get the server's time in milliseconds (it does not need to be very often as the two clocks will hardly deviate that much)
Get the client time in milliseconds
Calculate the clock deviation between server and client (client-server)
Periodically update the display of the clock by getting the client time and adding the clock deviation
Edit:
To be more accurate, you could measure the round trip time of the server's request, divide it by 2 and factor that delay into the clock deviation. Assuming round trips are symmetrical in their duration, this would give a more accurate calculation.

setInterval is not a reliable way to schedule time critical events. It may take less or more than 1000ms to run your callback depending on how busy JavaScript it is at the moment.
A better approach would be to take a shorter interval and use new Date().getTime() to check if a second has passed.
The minimum interval browsers allow is as high 10.

Thanks for the answers. I have up-voted both answers so far as they contain useful information. However, I am not using the exact answer prescribed in either answer.
What I finally decided on is a bit different.
I wrote about what I learned on my personal web page.
First of all, I now understand that using setInterval(..., 1000) is not good enough to have something done once per second for a long time. However, 'polling' the time with a much shorter interval looking for the second to change seems very inefficient to me.
I decided that it does make sense to keep track of the 'offset' between the server time and the client time.
My final solution is to do the following:
(1) Do an AJAX call to the server to get the time. The function also checks the client time and computes the difference between the server time and the client time, in milliseconds. Due to network latency and other factors, this initial fetch may be off by a few seconds. For my purposes, this is okay.
(2) Execute a tick function. Each time tick executes, it checks how long it has been since the last time tick executed. It will use this time to compute an argument to be passed to setTimeout so that the time display is updated approximately once per second.
(3) Each time the tick function computes the time to be displayed, it takes the client time and adds the difference that was computed in step (1). This way, I don't depend upon the client to have the time set correctly, but I do depend upon the client to accurately measure elapsed time. For my purposes, this is okay. The most important thing is that regardless of how setTimeout may be inaccurate or interrupted by other processes (such as a modal dialog, for instance), the time displayed should always be accurate.

Create total energy savings ticker based on time passed

Basically I would like to create a running ticker that continually (every 1-15 seconds, it doesn't matter) that would update that total amount energy savings that our company saved based on a set equation (such as 25 cents per minute). It would be based on the actual clock/calendar time, not just time that the visitor has accessed the page.
I'm looking to use javascript to do this (or jQuery) but I'm new to both languages with little experience.
Thanks!

Doing your calculations and updating them on a regular interval isn't very hard. You'll need to use the JavaScript Date Object to get your time. You can also use a setInterval function to perform your regular updates.

I don't know your level of knowledge about javascript but there are two function called window.setInterval and window.clearInterval that you can use to generate events at specific intervals.

you could use window.setInterval(function,time in milliseconds);
basically:
var money_value=0.25; //25 cents
var timing=15; //15 seconds
var global_calculator=0; //start time could be brought in by php or whatever
window.setInterval("calculate()",timing*1000); //timing*1000 milliseconds
// means 15 seconds
function calculate(){
global_calculator+=15; //add the passed seconds to the total of seconds
total=global_calculator*money_value; //calculate the total savings
update_clock(); //your function that updates the values some where to show them;
}
that should be it.