dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: Help with alarm clock project

  1. #1
    Join Date
    Mar 2017
    Posts
    8

    Help with alarm clock project

    Hello everyone,
    My task is to create alarm clock on JavaScript and started but I have a problems with my code.
    Please for help. How can I post my files here ?

  2. #2
    Join Date
    Mar 2017
    Posts
    8
    Code:
    function checkTime(i) {
      if (i < 10) {
        i = "0" + i;
      }
      return i;
    }
    
    function startTime() {
      var today = new Date();
      var h = today.getHours();
      var m = today.getMinutes();
      var s = today.getSeconds();
     
      m = checkTime(m);
      s = checkTime(s);
      document.getElementById('span_horloge').innerHTML = h + ":" + m + ":" + s;
      t = setTimeout(function() {
        startTime()
      }, 500);
    }
    startTime();
    
    function setv() {
        var hr2    = document.getElementById('select_alarmeHeures').value;
        var min2   = document.getElementById('select_alarmeMinutes').value;
        var sec2   = document.getElementById('select_alarmeSecondes').value;
        if(hr2<10)
            hr2='0'+hr2;
        if(min2<10)
            min2='0'+min2;
        if(sec2<10)
            sec2='0'+sec2;
        document.getElementById('').value=hr2+'*'+min2+'*'+sec2;
        set=1;
        
    function set_alarm(){
    var dt_alarm= new Date();
    dt_alarm.setHours(parseInt(document.getElementById('select_alarmeHeures').value));
    dt_alarm.setMinutes(parseInt(document.getElementById('select_alarmeMinutes').value));
    dt_alarm.setSeconds(parseInt(document.getElementById('select_alarmeSecondes').value));
    global_dt_alarm_sec=dt_alarm.getTime();
    }
    document.getElementById("btn_ajouterAlarme").onclick = set_alarm;
    }

  3. #3
    Join Date
    Mar 2017
    Posts
    8
    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<link rel="stylesheet" href="css/base.css">
    	</head>
    	<body>
    
    		<div class="container">
    
    			<section id="horloge">
    				<h1></h1><hr/>
    				<span id="span_horloge"></span>
    			</section>
    
    			<section id="alarme">
    				<h1></h1>
    				<hr/>
    				<button id="btn_ajouterAlarme">ajouter une alarme</button>
    				dans
    				<select id="select_alarmeHeures">
    					<option value="0">0</option>
    					<option value="1">1</option>
    					<option value="2">2</option>
    					<option value="3">3</option>
    					<option value="4">4</option>
    					<option value="5">5</option>
    					<option value="6">6</option>
    					<option value="7">7</option>
    					<option value="8">8</option>
    					<option value="9">9</option>
    					<option value="10">10</option>
    					<option value="11">11</option>
    					<option value="12">12</option>
    					<option value="13">13</option>
    					<option value="14">14</option>
    					<option value="15">15</option>
    					<option value="16">16</option>
    					<option value="17">17</option>
    					<option value="18">18</option>
    					<option value="19">19</option>
    					<option value="20">20</option>
    					<option value="21">21</option>
    					<option value="22">22</option>
    					<option value="23">23</option>
    					<option value="24">24</option>
    				</select>
    				heures
    
    				<select id="select_alarmeMinutes">
    					<option value="0">0</option>
    					<option value="1">1</option>
    					<option value="2">2</option>
    					<option value="3">3</option>
    					<option value="4">4</option>
    					<option value="5">5</option>
    					<option value="6">6</option>
    					<option value="7">7</option>
    					<option value="8">8</option>
    					<option value="9">9</option>
    					<option value="10">10</option>
    					<option value="11">11</option>
    					<option value="12">12</option>
    					<option value="13">13</option>
    					<option value="14">14</option>
    					<option value="15">15</option>
    					<option value="16">16</option>
    					<option value="17">17</option>
    					<option value="18">18</option>
    					<option value="19">19</option>
    					<option value="20">20</option>
    					<option value="21">21</option>
    					<option value="22">22</option>
    					<option value="23">23</option>
    					<option value="24">24</option>
    					<option value="25">25</option>
    					<option value="26">26</option>
    					<option value="27">27</option>
    					<option value="28">28</option>
    					<option value="29">29</option>
    					<option value="30">30</option>
    					<option value="31">31</option>
    					<option value="32">32</option>
    					<option value="33">33</option>
    					<option value="34">34</option>
    					<option value="35">35</option>
    					<option value="36">36</option>
    					<option value="37">37</option>
    					<option value="38">38</option>
    					<option value="39">39</option>
    					<option value="40">40</option>
    					<option value="41">41</option>
    					<option value="42">42</option>
    					<option value="43">43</option>
    					<option value="44">44</option>
    					<option value="45">45</option>
    					<option value="46">46</option>
    					<option value="47">47</option>
    					<option value="48">48</option>
    					<option value="49">49</option>
    					<option value="50">50</option>
    					<option value="51">51</option>
    					<option value="52">52</option>
    					<option value="53">53</option>
    					<option value="54">54</option>
    					<option value="55">55</option>
    					<option value="56">56</option>
    					<option value="57">57</option>
    					<option value="58">58</option>
    					<option value="59">59</option>
    				</select>
    				 minutes
    
    				 <select id="select_alarmeSecondes">
    					<option value="0">0</option>
    					<option value="1">1</option>
    					<option value="2">2</option>
    					<option value="3">3</option>
    					<option value="4">4</option>
    					<option value="5">5</option>
    					<option value="6">6</option>
    					<option value="7">7</option>
    					<option value="8">8</option>
    					<option value="9">9</option>
    					<option value="10">10</option>
    					<option value="11">11</option>
    					<option value="12">12</option>
    					<option value="13">13</option>
    					<option value="14">14</option>
    					<option value="15">15</option>
    					<option value="16">16</option>
    					<option value="17">17</option>
    					<option value="18">18</option>
    					<option value="19">19</option>
    					<option value="20">20</option>
    					<option value="21">21</option>
    					<option value="22">22</option>
    					<option value="23">23</option>
    					<option value="24">24</option>
    					<option value="25">25</option>
    					<option value="26">26</option>
    					<option value="27">27</option>
    					<option value="28">28</option>
    					<option value="29">29</option>
    					<option value="30">30</option>
    					<option value="31">31</option>
    					<option value="32">32</option>
    					<option value="33">33</option>
    					<option value="34">34</option>
    					<option value="35">35</option>
    					<option value="36">36</option>
    					<option value="37">37</option>
    					<option value="38">38</option>
    					<option value="39">39</option>
    					<option value="40">40</option>
    					<option value="41">41</option>
    					<option value="42">42</option>
    					<option value="43">43</option>
    					<option value="44">44</option>
    					<option value="45">45</option>
    					<option value="46">46</option>
    					<option value="47">47</option>
    					<option value="48">48</option>
    					<option value="49">49</option>
    					<option value="50">50</option>
    					<option value="51">51</option>
    					<option value="52">52</option>
    					<option value="53">53</option>
    					<option value="54">54</option>
    					<option value="55">55</option>
    					<option value="56">56</option>
    					<option value="57">57</option>
    					<option value="58">58</option>
    					<option value="59">59</option>
    				</select>
    				secondes
    
    				
    			</section>
    
    			
    		</div>
    
    		<script src="js/Horloge.js"></script>
    	</body>
    </html>

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,727
    Couple of things worth noting.

    firstly you are using a concept taught for best part of 30 years in education that is frankly years out of date.

    When using time and measuring time, use the appropriate Date objects to create the data you need to access or manipulate, toUTCString() string method gives you a string that can be use, hacked up, and its ready formatted for you.

    There is also the case of you using setTimeout() event timer, using them for a clock timer set up is not advised, you should be using setInterval event timer instead and for two reasons, first is that settimeout with repeated use will introduce a time lag where the clock and the actual time drifts (your clock will be slower) compared to a setInterval timer that once set does not introduce any time lag, only needs to be set once because the event will trigger at that exact time every x milliseconds. The reason for the lag is because each time you call to initiate a setTimeout, it requires time itself to initiate then run, there are clock cycles that are missed because of this setting up time period, this can be as large as 1/4 or a second because unlike setInterval, once setInterval is set, it introduces no additional overheads in to the script runtime or system lagging.

    IMHO If you are going to use web form elements, then you should really use a web form, that way you can use a more direct method for accessing values in your options. You would be IMHO better off using number inputs for this,
    HTML Code:
    <form name="alarmtime" action="javascript:;" >
      <input type="number" name="alarm" data-entry="hours" min="0" max="23" value="12" >&nbsp;
      <input type="number" name="alarm" data-entry="minutes" min="0" max="59" value="00" >&nbsp;
      <input type="number" name="alarm" data-entry="seconds" min="0" max="59" value="00" >
    The time entry can be a from group so document.forms.alarmtime.alarm is a group, this can be shortened to dfa = document.forms.alarmtime; and then dfa.alarm[0] -> [1] -> [2], you can access any of the attributes for that input to determine what course of action is to happen with that data when it is processed by JavaScript.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  5. #5
    Join Date
    Mar 2017
    Posts
    8
    Thanks for your advice ! It is very useful.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles