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

对照手机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>

参考文献:

1\]https://www.layui1.com/doc/index.html \[2\]https://jquery.com/ \[3\]https://www.w3school.com.cn/css/index.asp

相关推荐
染的人4 天前
Layui Table组件,设置data数据源,以及page为False,表格只能显示10条数据的问题
前端·layui
武昌库里写JAVA13 天前
大模型评估论文粗读“AGIEval: A Human-Centric Benchmark for Evaluating Foundation Models“
vue.js·spring boot·毕业设计·layui·课程设计
black方块cxy15 天前
layui 弹窗-调整窗口的缩放拖拽几次就看不到标题、被遮挡了怎么解决
前端·javascript·layui
武昌库里写JAVA17 天前
SpringCloud
vue.js·spring boot·毕业设计·layui·课程设计
DexterLien17 天前
Flask + Pear Admin Layui 快速开发管理后台
python·flask·layui
武昌库里写JAVA1 个月前
Vue3生态工具:Volar语言服务与Unplugin自动化导入配置
vue.js·spring boot·毕业设计·layui·课程设计
程序员buddha1 个月前
ThinkPHP8.0+MySQL8.0搭建简单实用电子证书查询系统
javascript·css·mysql·php·layui·jquery·html5
武昌库里写JAVA1 个月前
原生iOS集成react-native (react-native 0.65+)
vue.js·spring boot·毕业设计·layui·课程设计
java—大象2 个月前
基于SpringBoot+mybatis+layui就业管理系统设计和实现
java·数据库·spring boot·后端·layui·mybatis