Skip to content

Instantly share code, notes, and snippets.

@jerinisready
Last active March 1, 2019 07:50
Show Gist options
  • Save jerinisready/8e15bcab2fe048b317119ea174576ef1 to your computer and use it in GitHub Desktop.
Save jerinisready/8e15bcab2fe048b317119ea174576ef1 to your computer and use it in GitHub Desktop.
Plain HTML JQuery Example for a demo traffic Light!
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
<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; ">
&nbsp;
<div style="border-radius:50%; background-color:red;border-radius:1px grey solid; width:100px;height:100px" id="redL">&nbsp;</div>&nbsp;
<div style="border-radius:50%; background-color:gold;border-radius:1px grey solid; width:100px;height:100px" id="yellowL">&nbsp;</div>&nbsp;
<div style="border-radius:50%; background-color:green;border-radius:1px grey solid; width:100px;height:100px" id="greenL">&nbsp;</div>&nbsp;
</div>
&nbsp;
<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