css 数字平铺布局
效果图
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>活动中心</title><meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /><meta name="format-detection" content="telephone=no,email=no,date=no,address=no"><style type="text/css">* {margin: 0px;padding: 0px;border: none;width: 100%;}body {background-color: #F6FBF7;}.textinput {padding: 10px;border: solid 1px #e5e5e5;border-radius: 5px;}.container {border-radius: 5px;border: solid 1px #ECECEC;font-weight: bold;background-color: white;text-align: left; /* 确保文本居左 */margin: 20px auto;width: 90%;padding: 10px;display: flex;flex-wrap: wrap;gap: 10px; /* 调整子元素之间的间距 */}.number {background-color: #f0f0f0;padding: 10px 20px;border-radius: 5px;width: calc((100% / 4) - 48px); /* 每行4个，减去间距 */text-align: center;}</style>
</head>
<body><div style="border: solid 1px #ECECEC;font-weight:bold;background-color:white;line-height:50px;text-align:center;margin:0px auto;width:100%;">随机数</div><div style="border-radius: 5px; border: solid 1px #ECECEC; font-weight: bold; background-color: white; text-align: center; margin: 20px auto; width: 90%; padding: 10px;"><div style="display:flex;justify-content:space-between;align-items:center;line-height:45px;"><div style="display:flex;justify-content:space-between;align-items:center;"><div style="width: 100px;">最小值：</div><input id="txt_min" type="text" class="textinput" /></div><div style="display:flex;justify-content:space-between;align-items:center;"><div style="width: 180px; ">最大值：</div><input id="txt_max" type="text" class="textinput" /></div></div><div style="display: flex; justify-content: space-between; align-items: center; line-height: 45px;"><div style="display:flex;justify-content:space-between;align-items:center;"><div style="width: 100px; ">个数：</div><input id="txt_count" type="text" class="textinput" /></div><div style="display:flex;justify-content:space-between;align-items:center;"><div style="width:180px;">运行重复：</div><div style="display: flex; justify-content:flex-start; align-items: center;">是<input id="txt_repeat_yeas" name="txt_repeat" type="radio" />否<input id="txt_repeat_no" name="txt_repeat" checked type="radio" /></div></div></div><button id="btn_generate" style="margin-top: 10px; padding: 10px 20px; background-color: #007BFF; color: white; border: none; border-radius: 5px;">生成</button></div><div class="container"><!-- 这里将动态生成数字 --><div class="number">暂无</div></div><script src="~/Content/ApiClound/Js/jquery.min.js"></script><script type="text/javascript">$(document).ready(function () {$('#btn_generate').click(function () {var min = parseInt($('#txt_min').val(), 10);var max = parseInt($('#txt_max').val(), 10);var count = parseInt($('#txt_count').val(), 10);var allowRepeat = $('#txt_repeat_yeas').is(':checked');if (isNaN(min) || isNaN(max) || isNaN(count)) {alert('请输入有效的数字');return;}if (min > max) {alert('最小值不能大于最大值');return;}if (count > (max - min + 1) && !allowRepeat) {alert('生成的个数不能大于区间范围');return;}var numbers = [];while (numbers.length < count) {var randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;if (!allowRepeat && numbers.includes(randomNumber)) {continue;}numbers.push(randomNumber);}$('.container').empty();numbers.forEach(function (number) {$('.container').append('<div class="number">' + number + '</div>');});});});</script>
</body>
</html>相关文章：
css 数字平铺布局
效果图 <!DOCTYPE html> <html> <head><meta charset"utf-8"><title>活动中心</title><meta name"viewport" content"maximum-scale1.0,minimum-scale1.0,user-scalable0,widthdevice-width,initial-scale1.0…...
【开源】嵌入式Linux（IMX6U）应用层综合项目（2）--智能家居APP
目录 1.简介 1.1功能介绍 1.2技术栈介绍 1.3演示视频 1.4硬件介绍 2.软件设计 2.1智能家居UI设计 2.2.main函数 3.结尾（附网盘链接） 1.简介 此文章并不是教程，只能当作笔者的学习分享，只会做一些简单的介绍，其…...
CUDA常见编译器配置问题一览
CUDA常见编译器配置问题一览 关注TechLead，复旦博士，分享云服务领域全维度开发技术。拥有10年互联网服务架构、AI产品研发经验、团队管理经验，复旦机器人智能实验室成员，国家级大学生赛事评审专家，发表多篇SCI核心期刊…...
【Android】系统级应用升级后的安装位置
系统级应用的安装位置一般在codePath/system 下面， 如果手动的去进行adb install覆盖安装，通过dumpsys package可以发现是安装在/data/app/里， 如果是通过标准的系统升级方式呢？ 这里我们来通过升级查看一下， 升级…...
uniapp 使用renderjs通信
一、 server层向renderjs传值，并初始化renderjs prop：可以随便定义 renderTaskDetail：是传往renderjs的数据 change:prop：prop和必须上面prop字段一样 renderScript.initAmap：【 renderScript】需要renderjs 中scr…...
PostgreSQL 15
一、安装前的准备 1、版本信息 操作系统CentOS 7.9.2009PostgreSQL 版本PostgreSQL 15-15.7 2、下载安装包 RPM Chart - PostgreSQL YUM Repositoryhttps://yum.postgresql.org/rpmchart/进入官网，找到相应版本 点击框选内容 依次进入下载页面，下载相…...
给本地设备搭建一个云端语音助手
概述 本语音助手实现了从关键词唤醒 (KWS) 到语音识别 (ASR) 再到自然语言理解 (NLU) 的完整流程。该系统可以通过监听用户的音频输入，检测指定的关键词，并将用户的语音转换为文本，最后与预设的命令进行匹配，执行相应的操作（具体实现请参考main.py），为你的设备配置远程…...
yolov5车辆类型识别TXT数据集
YOLOV5训练车辆类型识别TXT数据集， 一共1400张图片，共分7个类別， 分别为Bus，Car，SportsCar，MicroBus，Truck，SUV，Jeep是TXT格式的数据集，用LabelImg工具进行标…...
day22(mysql数据库主从搭建)
上午： 1、为mysql添加开机启动chkconfig 2、编辑配置文件my.cnf 3、修改环境变量 4、mysql角色授权 角色不生效 在配置文件中不添加activate_all_roles_on_loginon glibc安装，my.cnf在项目目录之下 rpm安装，my.cnf文件在/etc/my.cnf 5、自…...
返璞归真：通过简化用例来简化用户界面01
Larry Constantine 著harvey 译 我们常被问及精简那些最简化、抽象和通用窗体用例的重要性。到底有多重要呢？在以用户为 中心的设计中，简化那些重要窗体的用例是获得成功的关键。它能够为开发者设计优秀的用户界面 助一臂之力。通过消除不必要的或技术驱…...
书生大模型学习笔记2 - Python
Python实现wordcount 请实现一个wordcount函数，统计英文字符串中每个单词出现的次数。返回一个字典，key为单词，value为对应单词出现的次数。 解题思路：首先把字母转小写>然后把单词取出来去除标点>循环单词列表>key已存…...
JavaScript三级联动jQuery写法
HTML结构 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>三级联动</title><!-- <style…...
无人机挂载抓捕网
一、技术原理与机制 无人机挂载抓捕网装置的技术原理是通过无人机平台的飞行能力和灵活性，结合特制的抓捕网装置，实现对目标的快速、准确抓捕。抓捕网装置在接收到指令后，通过特定机制快速展开并包围目标，从而实现抓捕任务。 二…...
174.地下城游戏——LeetCode
题目 恶魔们抓住了公主并将她关在了地下城 dungeon 的 右下角 。地下城是由 m x n 个房间组成的二维网格。我们英勇的骑士最初被安置在 左上角 的房间里，他必须穿过地下城并通过对抗恶魔来拯救公主。 骑士的初始健康点数为一个正整数。如果他的健康点数在某一时刻…...
登录相关功能的优化【JWT令牌+拦截器+跨域】
登录相关功能的优化 登录后显示当前登录用户el-dropdown: Element - The worlds most popular Vue UI framework <el-dropdown style"float: right; height: 60px; line-height: 60px"><span class"el-dropdown-link" style"color: white;…...
向日葵没有显示器会卡住
前言 有一台机器【ubuntu20】，用于远程开发，使用向日葵时候，如果不接显示器是会卡住的。。。 显示屏是有限的，所以现在解决一下这个问题。 卡在登录界面 双击启动 由于Ubuntu默认显示管理器是gdm，而向日葵使用的是l…...
【机器学习西瓜书学习笔记——聚类】
机器学习西瓜书学习笔记【第九章】 第九章 聚类9.1 聚类任务9.2 性能度量两类指标 9.3距离计算基本性质属性有序属性无序属性 混合距离加权距离 9.4 原型聚类K-MEANS聚类算法步骤优势劣势 学习向量量化高斯混合聚类步骤难点例子EM思想的体现小结 9.5 密度聚类9.6 层次聚类 第九…...
MATLAB（8）深度变化模型
一、前言 在MATLAB中模拟深度变化模型通常依赖于具体的应用场景，比如海洋深度、地下水深度、地形高度变化等。由于“深度变化”可以涉及多种物理过程和数学模型，我将提供一个简化的示例，该示例模拟了一个基于时间变化的深度变化模型ÿ…...
mp3格式转换器哪个好用？汇总七款音频格式转换方法（无损转换）
音乐已经成为我们生活中不可或缺的一部分。但是在播放的时候，可能会遇到音频格式不兼容的情况。特别是在一些下载站或音乐平台获取的音频，有些特殊格式在播放器上无法正常播放，一般这种情况我们需要借助mp3转换器解决。 mp3是一种常见的数字音…...
移行前的复盘：CodeCommit 的重要地位分析
前言 截至7月28日，关于AWS CodeCommit的现状如下： 现有账号的现有存储库可以继续使用CodeCommit，不受限制。之前未使用过CodeCommit的账号（或没有现有存储库的账号）无法创建新的存储库。 这并不意味着CodeCommit的服…...
日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下，越来越多的求职者将目光投向了日本及中日双语岗位。但是，一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧？面对生疏的日语交流环境，即便提前恶补了…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能，包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级
在互联网的快速发展中，高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司，近期做出了一个重大技术决策：弃用长期使用的 Nginx，转而采用其内部开发…...
uniapp中使用aixos 报错
问题： 在uniapp中使用aixos，运行后报如下错误： AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）
上一章用到了V2 的概念，其实 Fiori当中还有 V4，咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)，代理中间件（ui5-middleware-simpleproxy）-CSDN博客…...
DingDing机器人群消息推送
文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人，点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置，详见说明文档 成功后，记录Webhook 2 API文档说明 点击设置说明 查看自…...
MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用
文章目录 一、背景知识：什么是 B-Tree 和 BTree？ B-Tree（平衡多路查找树） BTree（B-Tree 的变种） 二、结构对比：一张图看懂 三、为什么 MySQL InnoDB 选择 BTree？ 1. 范围查询更快 2…...
脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）
一、OpenBCI_GUI 项目概述 （一）项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台，其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言，首次接触 OpenBCI 设备时，往…...