width: 300px; height: 100px; background: white; } .circle-1, .circle-2, .circle-3 { width: 80px; height: 80px; background: grey; float: left; border-radius: 50px; margin-top: 10px; margin-left: 14px; }
$(function() { $(".my-button").click(function() { setTimeout(function() { $(".circle-1").css("background-color", "skyblue"); }, 1000); }); })
<!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "utf-8"> <link rel = "stylesheet" href = "main.css"> </head> <body> <div class = "square"> <div class = "circles"> <div class = "circle-1"></div> <div class = "circle-2"></div> <div class = "circle-3"></div> </div> </div> <button type = "button" class = "my-button">ボタン</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="main.js"></script> </body> </html>
ボタンを押したら自動で青、黄色、赤と切り替わっていく仕組みを作りたいのですが、javascriptのところをどのようにすればいいのでしょうか?settimeoutをつかうのでしょうか?