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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/52626.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MATLAB学习笔记】绘图——自定义标记(Marker)形状,实现与MATLAB自带标记基本一致的功能(自适应缩放、自适应裁剪)

目录 前言自定义标记函数自定义标记函数的说明纵横比调整将图形大小按磅数设置平移标记点绘制标记点边界标记点不裁剪 拓展功能——标记点自适应绘图区的缩放绘图区缩放回调函数标记点大小自适应标记点裁剪自适应 示例基本绘图自定义标记函数的使用 总代码主函数自定义标记函数…

语言的基本运算

编程语言基本数据类型的加减乘除&#xff0c;看起来都很像。它们都和数学公示很像&#xff0c;除了乘法不能用X或x&#xff0c;这个是字母&#xff0c;除法不能用&#xff0c;因为这个字符在键盘上看不到。 除法的余数? C/C整数除法默认会丢弃余数&#xff0c;Java/C#一样。P…

入门STM32--按键输入

上一篇博客我们介绍了如何使用GPIO配置跑马灯&#xff0c;根据GPIO的基本结构图&#xff0c;我们能够发现&#xff0c;他肯定不单单有输出的功能&#xff0c;肯定可以检测IO上的电平变化&#xff0c;实际上就是输入的功能。 1.按键 在大多数情况下&#xff0c;按键是一种简单的…

【第54课】XSS跨站Cookie盗取表单劫持网络钓鱼溯源分析项目平台框架

免责声明 本文发布的工具和脚本&#xff0c;仅用作测试和学习研究&#xff0c;禁止用于商业用途&#xff0c;不能保证其合法性&#xff0c;准确性&#xff0c;完整性和有效性&#xff0c;请根据情况自行判断。 如果任何单位或个人认为该项目的脚本可能涉嫌侵犯其权利&#xff0…

1259:【例9.3】求最长不下降序列 动态规划

1259&#xff1a;【例9.3】求最长不下降序列 题目链接 【输入样例】 【输入样例】 14 13 7 9 16 38 24 37 18 44 19 21 22 63 15【输出样例】 max8 7 9 16 18 19 21 22 63思路&#xff1a; 确定状态&#xff1a; a[n]数组放数据&#xff0c; dp[n]数组放第i个位子前最长子序…

kafka发送消息-生产者发送消息的分区策略(消息发送到哪个分区中?是什么策略)

生产者发送消息的分区策略&#xff08;消息发送到哪个分区中&#xff1f;是什么策略&#xff09; 1、默认策略&#xff0c;程序自动计算并指定分区1.1、指定key&#xff0c;不指定分区1.2、不指定key&#xff0c;不指定分区 2、轮询分配策略RoundRobinPartitioner2.1、创建配置…

Linux网络:网络基础

Linux网络&#xff1a;网络基础 一、网络诞生背景及产生的诸多问题1. 1 网络诞生背景1.2 网络诞生面临的困境 二、网络协议栈&#xff08;OSI七层模型、CP/IP五层模型&#xff09;2.1 TCP/IP五层(或四层)模型 三、网络和系统关系四、网络传输流程4.1 同一个局域网中的两台主机进…

折腾 Quickwit,Rust 编写的分布式搜索引擎-官方教程

快速上手 在本快速入门指南中&#xff0c;我们将安装 Quickwit&#xff0c;创建一个索引&#xff0c;添加文档&#xff0c;最后执行搜索查询。本指南中使用的所有 Quickwit 命令都在 CLI 参考文档 中进行了记录。 https://quickwit.io/docs/main-branch/reference/cli 使用 Qui…

如何在Ubuntu 16.04上更新Firefox版本

如何在Ubuntu 16.04上更新Firefox版本 在Ubuntu 16.04上更新Firefox版本有多种方法&#xff0c;每种方法都有其优点。下面我们将介绍几种常见的方法&#xff0c;帮助您确保浏览器保持最新状态。 1. 使用官方PPA&#xff08;个人包档案&#xff09; 官方PPA提供了最新版本的F…

ubuntu22.04安装redis

更新包管理器的索引&#xff1a; sudo apt update安装Redis&#xff1a; sudo apt install redis-server确认Redis已经安装并且正在运行&#xff1a; sudo systemctl status redis-server

flutter 中 ssl 双向证书校验

SSL 证书&#xff1a; 在处理 https 请求的时候&#xff0c;通常可以使用 中间人攻击的方式 获取 https 请求以及响应参数。应为通常我们是 SSL 单向认证&#xff0c;服务器并没有验证我们的客户端的证书。为了防止这种中间人攻击的情况。我么可以通过 ssl 双向认证的方式。即…

用Python实现时间序列模型实战——Day1:时间序列的基本概念

一、学习内容 1. 时间序列数据的定义与特点 定义&#xff1a; 时间序列数据是一组按时间顺序排列的观测值。时间序列的每个观测值都与特定时间点相关联。例如&#xff0c;气温每天的记录、股票每日的收盘价等。 特点&#xff1a; 时间依赖性&#xff1a;时间序列数据的一个…

Eureka的生命周期管理:服务注册、续约与下线的完整流程解析

Eureka的生命周期管理&#xff1a;服务注册、续约与下线的完整流程解析 引言 在分布式系统中&#xff0c;服务发现是微服务架构的核心问题之一。Eureka是Netflix开源的一个服务发现框架&#xff0c;它能够有效地管理微服务的生命周期&#xff0c;包括服务注册、续约和下线。这…

8.27-dockerfile的应用+私有仓库的创建

一、dockerfile应用 通过dockerfile创建⼀个在启动容器时&#xff0c;就可以启动httpd服务的镜像 1.步骤 : 1.创建⼀个⽬录&#xff0c;⽤于存储Docker file所使⽤的⽂件2.在此⽬录中创建Docker file⽂件&#xff0c;以及镜像制作所使⽤的⽂件3.使⽤docker build创建镜像4.使…

基于x86 平台opencv的图像采集和seetaface6的图像质量评估功能

目录 一、概述二、环境要求2.1 硬件环境2.2 软件环境三、开发流程3.1 编写测试3.2 配置资源文件3.3 验证功能一、概述 本文档是针对x86 平台opencv的图像采集和seetaface6的图像质量评估功能,opencv通过摄像头采集视频图像,将采集的视频图像送给seetaface6的图像质量评估模块…

全新的大语言模型Grok-2,最新测评!!

埃隆马斯克再次引发轰动&#xff0c;他旗下的xAI公司推出了全新的大语言模型Grok-2&#xff01; 最新的Grok-2测试版已经发布&#xff0c;用户可以在&#x1d54f;平台上体验小版本的Grok-2 mini。 马斯克还通过一种谜语般的方式揭开了困扰大模型社区一个多月的谜团&#xff1a…

Java笔试面试题AI答之面向对象(2)

文章目录 7. Java中的组合、聚合和关联有什么区别&#xff1f;1. 关联&#xff08;Association&#xff09;2. 聚合&#xff08;Aggregation&#xff09;3. 组合&#xff08;Composition&#xff09;总结 8. 请设计一个符合开闭原则的设计模式的例子&#xff1f;策略模式示例1.…

每日刷力扣SQL(九)

1484.按日期分组销售产品 转载 首先&#xff0c;根据题目的描述以及给出的示例。我们能得到结果集中各个字段的含义如下&#xff1a; ① sell_date&#xff1a;卖出产品的日期&#xff08;应该不用解释了&#xff09; ② num_sold&#xff1a;当前这个日期下&…

工业软件架构2:(QT和C++实现)

工业软件架构 - 事件驱动 - 2 1. 命令模式的使用命令模式(Command Pattern)命令模式的基本概念命令模式的运作机制1. 定义命令接口2. 实现具体命令3. 调用者类4.扩展命令模式的功能撤销命令:宏命令:总结2. MVVM 模式的使用View(界面)部分则通过绑定与 ViewModel 交互:3.…

FFmpeg的入门实践系列三(基础知识)

欢迎诸位来阅读在下的博文~ 在这里&#xff0c;在下会不定期发表一些浅薄的知识和经验&#xff0c;望诸位能与在下多多交流&#xff0c;共同努力 文章目录 前期博客一、音视频常用术语二、FFmpeg库的结构介绍三、FFmpeg的常用函数初始化封装格式编解码器相关 四、FFmpeg常用的数…