Learning JavaScript

jayv2251 · 23 Jul 2017

I have an idea for a script I'd like to write, but I know virtually nothing about JavaScript except that I would need to use that language for my application. I have some script writing background but I'm very rusty. Last time I did any scripting was in Bash for Linux over 10 years ago. Before that I was writing programs in Basic for my high school's Commodore Pet and 64's.

What I'm trying to do is no big secret at all. I'm looking to make a time clock appear on a website once I load it. This time clock would allow me to "punch in" to start a day, "punch out" for lunch, coffee break, or what ever reason I wanted it to pause. Once break is over, punch back in, then a final punch out for the day. I've spend the last hour or more googling to see if I could find a "beginner's" guide that would show a very basic clock like this. Yes there's clocks, and I'm starting to get the gist of the lingo, but none of them allow the start, stop, start, stop that I not only want...I NEED!

axe0 · 23 Jul 2017

Hi jayv2251,

I have a script that does something like this originally written for a WBS project. The only issue being that I wrote this script for multiple timers. I never paid enough attention to get it 100% working though.

Here is the script, I'm aware that there may be lots of bugs and may also be a bit improperly written.

Code:

var curHour;
        var curMin;
        var curSec;

        var time = {
            totalSec: 0,

            start: function(id){

                var self = this;

                self.id = id;

                var totalWorked;
                self.totalWorked = $('#Do' + self.id).text().split(':');

                this.interval = setInterval(function(){
                    console.log($('#Do' + self.id).text().split(':'));
                    self.totalSec += 1;

                    curHour = Math.floor(self.totalWorked[0] + (self.totalSec / 3600)) ;
                    curMin = Math.floor(self.totalWorked[1] + (self.totalSec / 60 % 60));
                    curSec = Math.floor(self.totalWorked[2] + (self.totalSec % 60));

                    if(curHour <= "9") curHour = '0' + curHour;
                    if(curMin <= "9") curMin = '0' + curMin;
                    if(curSec <= "9") curSec = '0' + curSec;

                    $('#Do' + self.id).text(curHour + ':' + curMin + ':' + curSec);
                }, 1000);
            },

            pause: function(){
                clearInterval(this.interval);
                delete this.interval;
            },

            resume: function(id){
                if(typeof this.interval == 'undefined') this.start(id);
            }
        };

        function startTimer(id){
            time.start(id);
            var pauseBtn = $('<button type=button class="btn btn-primary btn-pause" value='+id+' id=pause'+id+' onclick=pauseTime('+id+');>pause tijd</button>');
            $('#startTime' + id).replaceWith(pauseBtn);
        }

        function pauseTime(id){
            time.pause();

            var resumeBtn = $('<button type=button class="btn btn-primary" id=resume'+id+' value='+id+' onclick=resumeTime('+id+');>resume tijd</button>');
            $('#pause' + id).replaceWith(resumeBtn);

            $.ajax({
                url: 'http://localhost/wbs/public/saveTime.php',
                type: "post",
                dataType: 'text',
                data: {"id": id, "time": $('#Do' + id).text()},
                success: function(){location.reload();},
                error: function(xhr, textStatus, errorThrown){
                    console.log('Error code: ' + errorThrown);
                }
             });
        }

        function resumeTime(id){
            time.resume(id);

            var pauseBtn = $('<button type=button class="btn btn-primary" id=pause'+id+' value='+id+' onclick=pauseTime('+id+');>pause tijd</button>');
            $('#resume' + id).replaceWith(pauseBtn);
        }

        totalSec = 0;

pyramid10 · 23 Jul 2017

http://www.javascriptsource.com/time-date/

Ernster's Stop Watch code may provide inspiration.