掷骰子,效果如下
index.html
<!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="../common.js"></script>
<script type="text/javascript">
let $command = $('#command');
let $img = $('img');
$command.onclick = function(){
$img.src = "images/diceDynamic.gif";
let num = getRandom(6,1)
setTimeout(() => {
$img.src = "images/dice_"+ num +".png";
}, 1000);
}
</script>
style.css
*{margin:0; padding:0}
#container{padding:10px;width:200px;margin:auto;height:200px;border:orange solid 1px; border-radius:8px;}
#dice{width:200px;height:200px;}
#command{margin:auto;width:100px;}
#command input{width:100px;height:30px;border:#ccc solid 1px;border-radius:8px;}
.project
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>2掷骰子hw</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>com.aptana.ide.core.unifiedBuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>com.aptana.projects.webnature</nature>
</natures>
</projectDescription>
