Last active
March 1, 2019 07:50
-
-
Save jerinisready/8e15bcab2fe048b317119ea174576ef1 to your computer and use it in GitHub Desktop.
Plain HTML JQuery Example for a demo traffic Light!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| This Demonize a Traffic Signal Control sample HTML PAGE using Pure JS | |
| Preview is available on : https://bl.ocks.org/jerinisready/raw/8e15bcab2fe048b317119ea174576ef1/ | |
| Description is avbailable on : https://bl.ocks.org/jerinisready/8e15bcab2fe048b317119ea174576ef1#file-traffic_light-html | |
| PREVIEW PARTNERSHIP WITH : https://bl.ocks.org |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Traffic Light</title> | |
| <meta content="auther" description="jerinisready" /> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| </head> | |
| <body style="background-color:#ddd;"> | |
| <div style="height:30px"></div> | |
| <center> | |
| <div style="width:150px; height:450px; background-color:black; border-radius:10px; "> | |
| | |
| <div style="border-radius:50%; background-color:red;border-radius:1px grey solid; width:100px;height:100px" id="redL"> </div> | |
| <div style="border-radius:50%; background-color:gold;border-radius:1px grey solid; width:100px;height:100px" id="yellowL"> </div> | |
| <div style="border-radius:50%; background-color:green;border-radius:1px grey solid; width:100px;height:100px" id="greenL"> </div> | |
| </div> | |
| | |
| <div style="display:block; margin:20px;"> | |
| <div class="btn btn-primary" id="multi" onclick="activate('multi');" style="width:250px">Controled Mode</div> | |
| <div class="btn btn-danger" id="stop" onclick="activate('stop');" style="width:250px">STOP!</div> | |
| <div class="btn btn-warning" id="slow" onclick="activate('slow');" style="width:250px">GO SLOW</div> | |
| <div class="btn btn-success" id="go" onclick="activate('go');" style="width:250px">GO!</div> | |
| <div class="btn btn-success" id="go" onclick="activate('off');" style="width:250px">Turn OFF</div> | |
| </div> | |
| </center> | |
| <script> | |
| var dull = {"red": "790000", "yellow" : "#8a7700", "green": "#0e4201"}; | |
| var bright = {"red": "red", "yellow" : "gold", "green": "#00d800"}; | |
| var MODES = ["multi", "stop", "slow", "go", "off"]; | |
| var mode = MODES[0]; | |
| var redL= $("#redL"); | |
| var yellowL= $("#yellowL"); | |
| var greenL= $("#greenL"); | |
| var intervalId= null; | |
| function set_red(){ | |
| redL.css('background-color', bright['red']); | |
| yellowL.css('background-color', dull['yellow']); | |
| greenL.css('background-color', dull['green']); | |
| } | |
| function set_yellow(){ | |
| redL.css('background-color', dull['red']); | |
| yellowL.css('background-color', bright['yellow']); | |
| greenL.css('background-color', dull['green']); | |
| } | |
| function set_green(){ | |
| redL.css('background-color', dull['red']); | |
| yellowL.css('background-color', dull['yellow']); | |
| greenL.css('background-color', bright['green']); | |
| } | |
| function off(){ | |
| redL.css('background-color', dull['red']); | |
| yellowL.css('background-color', dull['yellow']); | |
| greenL.css('background-color', dull['green']); | |
| } | |
| function activate(lmode){ | |
| mode = lmode; | |
| try{ | |
| window.clearInterval(intervalId); | |
| } | |
| catch(e){consloe.log(e);} | |
| off(); | |
| if(lmode == MODES[0]){intervalId = window.setInterval( function() { set_mode(); }, 1000 );} | |
| if(lmode == MODES[1]){set_red();} | |
| if(lmode == MODES[2]){intervalId = window.setInterval( function() { set_yellow_blink(); }, 1000 );} | |
| if(lmode == MODES[3]){set_green();} | |
| if(lmode == MODES[4]){off();} | |
| } | |
| var yellow_blink_state = 1; | |
| function set_yellow_blink(){ | |
| if (yellow_blink_state == 1 ){ | |
| set_yellow(); | |
| yellow_blink_state = 0; | |
| }else{ | |
| off(); | |
| yellow_blink_state = 1; | |
| } | |
| } | |
| var blink_on = 0; | |
| function set_mode(){ | |
| console.log(blink_on); | |
| if (blink_on < 2 ){ | |
| set_red(); | |
| blink_on += 1; | |
| } | |
| else if(blink_on == 2){ | |
| set_green(); | |
| blink_on += 1; | |
| } | |
| else if(blink_on == 3){ | |
| set_yellow(); | |
| blink_on = 0; | |
| } | |
| } | |
| off(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment