基于layui实现简单的万智牌生命计数器页面

本文主要是介绍基于layui实现简单的万智牌生命计数器页面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

  对照手机App“旅法师营地”的万智牌生命计数器窗口（如下图所示），使用layui、jQuery等实现简单的万智牌生命计数器页面。

  主要实现的功能如下：
  1）点击左右两侧的-1、+1、-5、+5区域更新左右两侧生命值；
  2）点击左右两侧的八面、二十面、六面、硬币区域生成左右两侧随机数，模拟掷骰子、掷硬币效果。
  还搞不懂上图中的调节局数的上下箭头、中间的刷新按钮是如何布局，暂时就没有处理。
  万智牌生命计数器页面截图及全部代码如下所示。

<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>

参考文献：
[1]https://www.layui1.com/doc/index.html
[2]https://jquery.com/
[3]https://www.w3school.com.cn/css/index.asp

这篇关于基于layui实现简单的万智牌生命计数器页面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---