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

2024-08-27 21:44

本文主要是介绍基于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实现简单的万智牌生命计数器页面的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1112862

相关文章

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Mysql表的简单操作(基本技能)

《Mysql表的简单操作(基本技能)》在数据库中,表的操作主要包括表的创建、查看、修改、删除等,了解如何操作这些表是数据库管理和开发的基本技能,本文给大家介绍Mysql表的简单操作,感兴趣的朋友一起看... 目录3.1 创建表 3.2 查看表结构3.3 修改表3.4 实践案例:修改表在数据库中,表的操作主要

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串(一)使用预定义格式(二)自定义格式二、字符串解析为日期(一)解析ISO格式字符串(二)解析自定义

opencv图像处理之指纹验证的实现

《opencv图像处理之指纹验证的实现》本文主要介绍了opencv图像处理之指纹验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录一、简介二、具体案例实现1. 图像显示函数2. 指纹验证函数3. 主函数4、运行结果三、总结一、

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景:内存吃得满满的类__slots__:你的内存管理小助手举个大概的例子:看看效果如何?1.

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专