Scripts

[JS] Tijd aanpassen

Door Hendel Berg -10-11-2008 00:00 -4.327 views

In sommige gevallen wil je de gebruiker van jouw site of script de tijd laten aanpassen. Dit kun je op verschillende manieren doen. Voor één van mijn scripts was het nodig om door middel van een vooruit - achteruit knop de tijd te laten aanpassen. Het is niet heel ingewikkeld of bijzonder, maar kon iets dergelijks niet kant en klaar vinden op het web, dus deel het hier met jullie. Update 19 nov. 2008 Naar aanleiding van de feedback heb ik het script volledig aangepast, met behulp van de textboxcounter van Jonathan. Plaatjes: http://www.henryvdberg.nl/php/testcase/up.gif http://www.henryvdberg.nl/php/testcase/down.gif

Download alle bestanden als ZIP

js-tijd-aanpassen

[code]
<html>

<head>
   <title>Time counter</title>
   <script type="text/javascript">
      var mouseDown = false;
      var countType;
      var counter = 0;
      var nextTime;
      var minutes;
      var hours;

      function hour ()
      {
         if (isNaN(hours.value))
         {
            hours.value = "00";
         }

         if (countType)
         {
            if (hours.value == 23)
            {
               hours.value = "00";
            }
            else
            {
               hours.value ++;
            }
         }
         else
         {
            if (hours.value == 00)
            {
               hours.value = "23";
            }
            else
            {
               hours.value --;
            }
         }

         if (hours.value < 10 && hours.value > 0)
         {
            hours.value = "0" + hours.value;
         }
      }

      function count ()
      {
         if (mouseDown)
         {
            if (isNaN(minutes.value))
            {
               minutes.value = "00";
            }

            counter++;

            if (countType)
            {
               if (minutes.value == 59)
               {
                  minutes.value = "00";
                  hour();
               }
               else
               {
                  minutes.value ++;
               }
            }
            else
            {
              if (minutes.value == 00)
               {
                  minutes.value = "59";
                  hour();
               }
               else
               {
                  minutes.value --;
               }
            }

            if (minutes.value < 10 && minutes.value > 0)
            {
               minutes.value = "0" + minutes.value;
            }

            nextTime = 200 / counter;

            if (nextTime < 10)
            {
               nextTime = 5;
            }

            setTimeout('count();', nextTime);
         }
      }

      function startCount (type, idMinutes, idHours)
      {
         mouseDown = true;
         countType = type;
         minutes = document.getElementById(''+idMinutes+'');
         hours = document.getElementById(''+idHours+'');
         counter = 0;
         count();
      }

      function stopCount ()
      {
         mouseDown = false;
      }
   </script>

   <style type="text/css">
      #scheidingsteken
      {
         float: left;
         font-weight: bold;
      }

      #up
      {
         position: absolute;
         right: 0px;
         top: 0px;
      }

      #down
      {
         position: absolute;
         right: 0px;
         bottom: 0px;
      }

      #uren
      {
         border: 1px solid #ccc;
         float: left;
         position: relative;
         width: 20px;
      }

      #uren input
      {
         border: 0;
         font: 11px verdana;
         width: 20px;
      }

      #minuten
      {
         border: 1px solid #ccc;
         float: left;
         position: relative;
         width: 35px;
      }

      #minuten input
      {
         border: 0;
         font: 11px verdana;
         width: 35px;
      }
   </style>
</head>

<body>
   <div id="uren">
      <input disabled="disabled" id="uren_input" maxlength="2" type="text" value="<?php echo date('H'); ?>" />
   </div>
   <div id="scheidingsteken">
      :
   </div>
   <div id="minuten">
      <input disabled="disabled" id="minuten_input" type="text" maxlength="2" value="<?php echo date('i'); ?>" />
      <img id="up" src="up.gif" onmousedown="startCount(true, 'minuten_input', 'uren_input');" onmouseup="stopCount();" onmouseout="stopCount();" />
      <img id="down" src="down.gif" onmousedown="startCount(false, 'minuten_input', 'uren_input');" onmouseup="stopCount();" onmouseout="stopCount();" />
   </div>
</body>

</html>
[/code]