<!DOCTYPE html>
<html>
<head>
<style>
#colorCircle {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div id="colorCircle"></div>
</body>
<script>
let colorCircle = document.getElementById('colorCircle');
function sleep(duration) {
return new Promise(function (resolve) {
setTimeout(resolve, duration);
})
}
async function changeColor(color, duration) {
console.log(color);
colorCircle.style.backgroundColor = color;
await sleep(duration);
}
async function main() {
while (true) {
await changeColor('green', 3000);
await changeColor('yellow', 1000);
await changeColor('red', 2000);
}
}
main();
</script>
</html>
