Timekeeper

Asked

Viewed 736 times

-4

I’m developing a project for a website and I’m having difficulty creating a "stopwatch".

I need it to work this way:

  • User recharges credit (EX: 4 real = 2 hours);

  • Available times are: 1.2.3 hours;

  • After reloading, the user goes on another page and presses a button that makes the time counter start, counting the seconds subtracting.

There are some ready-made counters like the Countdown Timer, but it only works by setting a future date (EX: Nov 5, 2017 15:37:25) which does not suit me, since I need fixed values.

  • Don’t just take the data/hora_atual + x and use as future date? x is the number of hours you need to add to the current time.

  • @In future questions, I will suggest that you make better use of accents and punctuation and ask questions with your question clearly, including relevant information (e.g., code). It is not the purpose of the site to provide ready-made solutions or to do a job for you, but to answer conceptual questions and help in problematic sections of a given code (you are the programmer!). And do not forget to always check by repeated questions - your doubt may have been that of another. By doing this, you help contribute to the community and avoid getting negativities in your questions.

  • @José Está was my first participation on the site and I believe my question fits the site according to Stackoverflow(Specific Programming problems). I did not ask them to do my work, after all I have done all site, but I’m having difficulty in this specific part. About including the code in the question, this is not possible, because what I have is a generic Countdown, which would not add the question.

  • @Luigiazevedo the warning was why your question, for being the first one that makes, automatically enters in analysis of older users. It’s customary to give notice when checking everything OK. So it’s not because it doesn’t exactly fit on the site, right? But as it was not very well structured and the question was not explicitly clear, some users negatively called the attention of moderation. Thus, Victor edited his question to stay more in the patterns so it serves the search results and helps other users and visitors. Anyway, welcome and really ask!

2 answers

1

I think your question is a little vague because it does not make clear how you want to control this, whether only on client side or if for example you will be saving in some bank.

But you can save the start date in the bank as well as the time he bought in credits. By my own experience I find this solution inelegant, I prefer that you do all the calculations before and store in the bank for example a session ID or user ID, and the release time limit.

Exemplifying:

Click time button: 30/10/2017 14:58:00

Your user bought 4 real = 2 hours.

You will save in the bank that the user in question is cleared to access the system:

Until 30/10/2017 16:58:00.

When rendering anything you just check if the current request date is <= the release date.

I hope I’ve helped.

1


I believe that the Easytimer.js will suit you. It is simply a stopwatch that can work by decreasing or incrementing. It also works with event triggering.

The license is MIT, which is favorable. And has several examples on the page itself. It is not difficult to use.

Example for use of countdown:

Javascript:

var timer = new Timer();

timer.start({countdown: true, startValues: {seconds: 30}});
$('#countdownExample .values').html(timer.getTimeValues().toString());

timer.addEventListener('secondsUpdated', function (e) {
    $('#countdownExample .values').html(timer.getTimeValues().toString()); 
});

timer.addEventListener('targetAchieved', function (e) {
    $('#countdownExample .values').html('FIM!'); 
});

HTML:

<div id="countdownExample">
    <div class="values"></div>
</div>

See more details on easytimer.js page on Github.There are more examples of use.

  • 1

    Thank you very much! I will try your suggestion.

  • @Luigiazevedo If you solve your problem, I ask you to mark the answer as you accept! So who has the same problem has a reference - as well as earn points to be used on the site.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.