Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    mjb
    mjb is offline
    New Coder
    Join Date
    May 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    modifying code for a stopwatch

    Hi I found this stopwatch code online.

    <script language="javascript">
    // stopwatch script by Brothercake - [brothercake]
    var base = 60;
    var clocktimer,dateObj,dh,dm,ds,ms;
    var readout='';
    var h=1;
    var m=1;
    var tm=1;
    var s=0;
    var ts=0;
    var ms=0;
    var show=true;
    var init=0;
    var mPLUS=new Array(
    'm0',
    'm1',
    'm2',
    'm3',
    'm4',
    'm5',
    'm6',
    'm7',
    'm8',
    'm9'
    );
    var ii=0;
    function clearALL() {
    clearTimeout(clocktimer);
    h=1;m=1;tm=1;s=0;ts=0;ms=0;
    init=0;show=true;
    readout='00:00:00.00';
    document.clockform.clock.value=readout;
    var CF = document.clockform;
    for (ij=0;ij<=9;ij++) { CF[mPLUS[ij]].value = ''; }
    ii = 0;
    }
    function addMEM() {
    if (init>0) {
    var CF = document.clockform;
    CF[mPLUS[ii]].value = readout;
    if (ii==9) { ii = 0; } else { ii++; }
    }
    }
    function startTIME() {
    var cdateObj = new Date();
    var t = (cdateObj.getTime() - dateObj.getTime())-(s*1000);
    if (t>999) { s++; }
    if (s>=(m*base)) {
    ts=0;
    m++;
    } else {
    ts=parseInt((ms/100)+s);
    if(ts>=base) { ts=ts-((m-1)*base); }
    }
    if (m>(h*base)) {
    tm=1;
    h++;
    } else {
    tm=parseInt((ms/100)+m);
    if(tm>=base) { tm=tm-((h-1)*base); }
    }
    ms = Math.round(t/10);
    if (ms>99) {ms=0;}
    if (ms==0) {ms='00';}
    if (ms>0&&ms<=9) { ms = '0'+ms; }
    if (ts>0) { ds = ts; if (ts<10) { ds = '0'+ts; }} else { ds = '00'; }
    dm=tm-1;
    if (dm>0) { if (dm<10) { dm = '0'+dm; }} else { dm = '00'; }
    dh=h-1;
    if (dh>0) { if (dh<10) { dh = '0'+dh; }} else { dh = '00'; }
    readout = dh + ':' + dm + ':' + ds + '.' + ms;
    if (show==true) { document.clockform.clock.value = readout; }
    clocktimer = setTimeout("startTIME()",1);
    }
    function findTIME() {
    if (init==0) {
    dateObj = new Date();
    startTIME();
    init=1;
    } else {
    if(show==true) {
    show=false;
    } else {
    show=true;
    }
    }
    }
    </script>
    <form name="clockform">
    <table border="0" cellpadding="2" cellspacing="0">
    <tbody>
    <tr>
    <td><br>
    </td>
    <td style="text-align: center; font-weight: bold;"
    colspan="2"><big><input style="color: green;"
    name="clock" size="7" value="00:00:00.00"></big></td>
    </tr>
    <tr>
    <td><br>
    </td>
    <td><input name="starter" value="start / pause"
    onclick="findTIME()" type="button"></td>
    <td><input name="clearer" value=" reset "
    onclick="clearALL()" type="button"></td>
    </tr>
    </tbody>
    </table>
    </form>
    </body>
    </html>


    Does anyone know how to increase the size or modify the font of the numbers? Any help would be greatly appreciated.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by mjb View Post
    Does anyone know how to increase the size or modify the font of the numbers? Any help would be greatly appreciated.
    <script language="javascript"> tells you that this is old and obsolete code. Assigning a name to a form and use of the <big> tag are also obsolete.

    Font sizes and colors etc. are nowadays set using CSS.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 04-07-2014 at 07:01 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    mjb
    mjb is offline
    New Coder
    Join Date
    May 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Phillip M

    Your advice is very valuable. In light of the outdated code I posted is there any easy way of modifying it or would be easier to write it from scratch? If so can you send me the proper code if it's not too time consuming? It doesn't have to be perfect.
    Last edited by mjb; 04-07-2014 at 07:36 PM.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by mjb View Post
    Thanks Phillip M

    Your advice is very valuable. In light of the outdated code I posted is there any easy way of modifying it or would be easier to write it from scratch? If so can you send me the proper code if it's not too time consuming? It doesn't have to be perfect.
    The simplest is to change these lines to as I have indicated:-

    Code:
    <td style="text-align: center" colspan="2">
    <input type = "text" name="clock" id = "tb" size="7" value="00:00:00.00"></td>
    and in the <head> place the CSS styling for the textbox:
    Code:
    <head>
        <style type="text/css">
            #tb {height:36px; width:150px; font-family:'Arial'; font-weight:bold; color: green; font-size:26px; text-align: center; }
        </style>
    </head>
    Or whatever dimensions suit your chosen font face and size. The ones I have shown suit Arial 26px.
    You can change the font, font-weight, color and size (within limits).

    But really the whole of this elderly code wants a makeover.

    Have a look at Make a stopwatch using CSS3 without images or javascript
    or
    FREE JavaSCRIPT - Stopwatch-with-lap, to calculate time for any event java script
    Last edited by Philip M; 04-08-2014 at 11:50 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •