Learning JavaScript


  1. Posts : 151
    Windows 10
       #1

    Learning JavaScript


    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!
      My Computer

  2. axe0's Avatar
    Posts : 14,792
    Windows 10 Pro
       #2

    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;
      My Computers


  3. Posts : 287
    win 10 home
       #3

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

    Ernster's Stop Watch code may provide inspiration.
      My Computer


 

  Related Discussions
Our Sites
Site Links
About Us
Windows 10 Forums is an independent web site and has not been authorized, sponsored, or otherwise approved by Microsoft Corporation. "Windows 10" and related materials are trademarks of Microsoft Corp.

Designer Media Ltd
All times are GMT -5. The time now is 16:05.
Find Us




Windows 10 Forums