<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
img{
padding:10px 0;
display:block;
margin:0 auto;
width: 135px;
height: 210px;
}
.flex{
display: flex;
flex-direction: column;
align-items: center;
}
.flex-child{
margin:10px 0px;
}
.parent{
position:relative;
width: 60px;
height: 18px;
background: #bfbfbf;
border-radius: 25px;
cursor:pointer;
transition-delay: 0.3s;
transition-duration: 0.25s;
}
.child{
position:absolute;
width:30px;
height:30px;
background:#fff;
border:1px solid #8c8c8c;
border-radius: 50%;
top:-6px;
left:0px;
transition-property: left;
transition-duration: 0.25s;
transition-timing-function: linear;
}
select{
padding:5px;
}
</style>
</head>
<body>
<img src="/off.png" alt="light">
<div class="flex">
<div class="parent flex-child" onclick="myFunction()">
<div class="child" onclick="myFunction()"></div>
</div>
<div class="flex-child">Color :
<select>
<option>Blue</option>
<option>Red</option>
<option>Yellow</option>
<option>White</option>
<option>All</option>
</select>
</div>
</div><script>
var intervalId;
var count;
var arr = ["red","yellow","white","blue"];
function myFunction(){
if($(".child").css("left") == "0px"){
$(".child").css("left","35px")
$(".parent").css("background","dodgerblue");
count = -1;
onLights($(".flex select").val());
}
else{
$(".child").css("left","0px")
$(".parent").css("background","#bfbfbf");
clearInterval(intervalId);
$("img").attr("src","/off.png");
}
}
function serialLight(){
count +=1;
if(count==4)
count = 0;
$("img").attr("src","/"+arr[count]+".png");
}
function onLights(x){
switch(x){
case "All":
intervalId = setInterval(serialLight, 500)
break;
case "Red":
$("img").attr("src","/red.png");
break;
case "Yellow":
$("img").attr("src","/yellow.png");
break;
case "White":
$("img").attr("src","/white.png");
break;
case "Blue":
$("img").attr("src","/blue.png");
break;
}
}
</script> </body>
</html>