YOUTUBE LINK click here
Source code:
<!DOCTYPE html>
<html>
<head>
<title>signal</title>
<style>
.para {
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
}
.car {
animation: move 5s linear;
}
@keyframes move {
25% {
position: relative;
left: 100px;
}
50% {
left: 200px;
}
75% {
left: 300px;
}
}
</style>
</head>
<body>
<p class="para"></p>
<div class="rest">
<img src="https://tse2.mm.bing.net/th?id=OIP.-gNH3yX965InXLZlwRfQRQHaEo&pid=Api&P=0&w=280&h=176">
</div>
<script>
var red = 10;
var green = 5;
var i = 1;
var j = 1;
setInterval(car, 1000);
function car() {
if (i <= red) {
if (i == 1) {
document.getElementsByClassName("rest")[0].classList.remove("car");
}
document.getElementsByTagName('p')[0].style.backgroundColor = "red";
document.getElementsByTagName('p')[0].innerHTML = i;
i++;
} else {
if (j <= green) {
if (j == 1) {
document.getElementsByClassName("rest")[0].classList.add("car");
}
document.getElementsByTagName('p')[0].style.backgroundColor = "green";
document.getElementsByTagName('p')[0].innerHTML = j;
j++;
} else {
i = 1;
j = 1;
}
}
}
</script>
</body>
</html>
Post a Comment