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

相关文章

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》:本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色(红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解

PostgreSQL中MVCC 机制的实现

《PostgreSQL中MVCC机制的实现》本文主要介绍了PostgreSQL中MVCC机制的实现,通过多版本数据存储、快照隔离和事务ID管理实现高并发读写,具有一定的参考价值,感兴趣的可以了解一下... 目录一 MVCC 基本原理python1.1 MVCC 核心概念1.2 与传统锁机制对比二 Postg

SpringBoot整合Flowable实现工作流的详细流程

《SpringBoot整合Flowable实现工作流的详细流程》Flowable是一个使用Java编写的轻量级业务流程引擎,Flowable流程引擎可用于部署BPMN2.0流程定义,创建这些流程定义的... 目录1、流程引擎介绍2、创建项目3、画流程图4、开发接口4.1 Java 类梳理4.2 查看流程图4

C++中零拷贝的多种实现方式

《C++中零拷贝的多种实现方式》本文主要介绍了C++中零拷贝的实现示例,旨在在减少数据在内存中的不必要复制,从而提高程序性能、降低内存使用并减少CPU消耗,零拷贝技术通过多种方式实现,下面就来了解一下... 目录一、C++中零拷贝技术的核心概念二、std::string_view 简介三、std::stri

C++高效内存池实现减少动态分配开销的解决方案

《C++高效内存池实现减少动态分配开销的解决方案》C++动态内存分配存在系统调用开销、碎片化和锁竞争等性能问题,内存池通过预分配、分块管理和缓存复用解决这些问题,下面就来了解一下... 目录一、C++内存分配的性能挑战二、内存池技术的核心原理三、主流内存池实现:TCMalloc与Jemalloc1. TCM

OpenCV实现实时颜色检测的示例

《OpenCV实现实时颜色检测的示例》本文主要介绍了OpenCV实现实时颜色检测的示例,通过HSV色彩空间转换和色调范围判断实现红黄绿蓝颜色检测,包含视频捕捉、区域标记、颜色分析等功能,具有一定的参考... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间

Python实现精准提取 PDF中的文本,表格与图片

《Python实现精准提取PDF中的文本,表格与图片》在实际的系统开发中,处理PDF文件不仅限于读取整页文本,还有提取文档中的表格数据,图片或特定区域的内容,下面我们来看看如何使用Python实... 目录安装 python 库提取 PDF 文本内容:获取整页文本与指定区域内容获取页面上的所有文本内容获取

基于Python实现一个Windows Tree命令工具

《基于Python实现一个WindowsTree命令工具》今天想要在Windows平台的CMD命令终端窗口中使用像Linux下的tree命令,打印一下目录结构层级树,然而还真有tree命令,但是发现... 目录引言实现代码使用说明可用选项示例用法功能特点添加到环境变量方法一:创建批处理文件并添加到PATH1

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.

canal实现mysql数据同步的详细过程

《canal实现mysql数据同步的详细过程》:本文主要介绍canal实现mysql数据同步的详细过程,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的... 目录1、canal下载2、mysql同步用户创建和授权3、canal admin安装和启动4、canal