对照手机App"旅法师营地"的万智牌生命计数器窗口(如下图所示),使用layui、jQuery等实现简单的万智牌生命计数器页面。
主要实现的功能如下:
1)点击左右两侧的-1、+1、-5、+5区域更新左右两侧生命值;
2)点击左右两侧的八面、二十面、六面、硬币区域生成左右两侧随机数,模拟掷骰子、掷硬币效果。
还搞不懂上图中的调节局数的上下箭头、中间的刷新按钮是如何布局,暂时就没有处理。
万智牌生命计数器页面截图及全部代码如下所示。
html
<div class="layui-container" style="background-color: rgb(144,131,122);">
<div class="layui-row">
<div class="bg bg-left score-left layui-col-xs6">
20
</div>
<div class="bg bg-right score-right layui-col-xs6">
20
</div>
</div>
<div class="layui-row layui-col-space5">
<div class="layui-col-xs3">
<div class="point point-left">-1</div>
</div>
<div class="layui-col-xs3">
<div class="point point-left">+1</div>
</div>
<div class="layui-col-xs3">
<div class="point point-right">-1</div>
</div>
<div class="layui-col-xs3">
<div class="point point-right">+1</div>
</div>
</div>
<div class="layui-row layui-col-space5">
<div class="layui-col-xs3">
<div class="point point-left">-5</div>
</div>
<div class="layui-col-xs3">
<div class="point point-left">+5</div>
</div>
<div class="layui-col-xs3">
<div class="point point-right">-5</div>
</div>
<div class="layui-col-xs3">
<div class="point point-right">+5</div>
</div>
</div>
<div class="layui-row">
<div class="dice-value-left layui-col-xs6">
0
</div>
<div class="dice-value-right layui-col-xs6">
0
</div>
</div>
<div class="layui-row layui-col-space5">
<div class="layui-col-xs3">
<div class="point dice-left" minValue="1" maxValue="8">八面</div>
</div>
<div class="layui-col-xs3">
<div class="point dice-left" minValue="1" maxValue="20">二十面</div>
</div>
<div class="layui-col-xs3">
<div class="point dice-right" minValue="1" maxValue="8">八面</div>
</div>
<div class="layui-col-xs3">
<div class="point dice-right" minValue="1" maxValue="20">二十面</div>
</div>
</div>
<div class="layui-row layui-col-space5">
<div class="layui-col-xs3">
<div class="point dice-left" minValue="1" maxValue="6">六面</div>
</div>
<div class="layui-col-xs3">
<div class="point dice-left" minValue="0" maxValue="1">硬币</div>
</div>
<div class="layui-col-xs3">
<div class="point dice-right" minValue="1" maxValue="6">六面</div>
</div>
<div class="layui-col-xs3" >
<div class="point dice-right" minValue="0" maxValue="1">硬币</div>
</div>
</div>
</div>
<script>
layui.use('layer', function(){
var $ = layui.jquery;
$('.point-left').on('click', function(){
$('.score-left').html(parseInt($('.score-left').html())+parseInt($(this).html()))
});
$('.point-right').on('click', function(){
$('.score-right').html(parseInt($('.score-right').html())+parseInt($(this).html()))
});
$('.dice-left').on('click', function(){
$('.dice-value-left').html(getRandomInt(parseInt($(this).attr("minValue")),parseInt($(this).attr("maxValue"))))
});
$('.dice-right').on('click', function(){
$('.dice-value-right').html(getRandomInt(parseInt($(this).attr("minValue")),parseInt($(this).attr("maxValue"))))
});
})
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
参考文献: