<style>
.container{margin:0 auto;margin-top:50px;width:600px;height:600px;background:url(http://lvyou168.cn/upload/20210519/164910600.jpg) no-repeat;background-size:contain}/*宽度(widt)和背景图片改这里(url里面的路径)*/
.dice{overflow:hidden}
.dice .item{float:left;width:30px;height:30px;margin-right:20px;border:solid 1px #ccc;text-align:center;line-height:30px;background:#fff}
.dice .item:last-of-type{margin-right:0;}
</style>
<div class="container">
<div id="divRst"></div>
<div class="dice" id="dice">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div><br />
<input type="button" id="roll" value="投骰子" />
</div>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
function rnd(min, max) {
var tmp = min;
if (max < min) { min = max; max = tmp; }
return Math.floor(Math.random() * (max - min + 1) + min);
}
var divRst = $('#divRst'), item = $('#dice .item'), count = 3, min = 0, max = 0;
$('#roll').click(function () {
if (this.value == '投骰子') {
var v,nmin=0,nmax=0;
for (var i = 0; i < item.length; i++) {
v = rnd(1, 6);
if (v > 3) nmax++; else nmin++;
item.eq(i).html(v)
}
count--;
max += nmax;
min += nmin;
divRst.append('<div>第' + (3 - count) + '次投 大' + nmax + '次 小:' + nmin + '次</div>')
if (count == 0) {
this.value = '重置';
divRst.append('<div>结果:大' + max + '次 小:' + min + '次</div>');
item.html('')
}
}
else {
count = 3;
min = max = 0;
divRst.html('');
this.value = '投骰子';
}
});
</script>
考察js随机数和dom操作
您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~
ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632