圖片和css樣式已分別上傳至相冊和文件。 ...
<!DOCTYPE html>
<html lang="en">
<head>
<title>動態圖片切換</title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- 游戲區域 -->
<div id="container">
<img src="images/dice_1.png" id="dice" alt="">
</div>
<div id="command">
<input id="btn" type="button" value="搖一搖">
</div>
</body>
</html>
<script src="../../../Day12/code/public.js"></script><!--引用js資料庫,調用函數-->
<script type="text/javascript">
//獲取所需元素
var btn = document.getElementById("btn");
var img = document.getElementById("dice");
//給btn一個點擊事件
btn.onclick = function(){
//切換img的src為動畫圖片
img.src = "images/diceDynamic.gif";
//隔一個隨機時間毫秒數後,得到隨機數
var randTime = getRand(500,1000);//調用getRand()函數
setTimeout(function(){
//1-6的隨機數
var rand = getRand(1,6)
//切換img的src為隨機的1-6的圖片
img.src = "images/dice_" + rand + ".png";
},randTime);
}
</script>
運行後效果:
圖片和css樣式已分別上傳至相冊和文件。