当前位置: 首页 > news >正文

前端如何单独做虚拟奖金池?

公司业务需求要做一个虚拟奖金池,具体是需求是,不需要后端数据支持,但是又需要不同用户看到的奖金池数据每次变动都是一致的,并且要在给定的最小最大值中变动。

一开始看需求,因为需要所有登录/未登录,不同用户看到的数据必须一致,认为只能后端提供数据,就算是假数据,也要保存在服务器上。后来再思考,所有用户拿到的当前时间戳是一致的,所以可以根据时间戳来生成统一的假数据,每次奖金池的增量也可以根据当前时间的分钟、小时、日期等动态增加。

import { ref, onMounted, computed, onActivated, onDeactivated } from 'vue'
import { Decimal } from 'decimal.js'const currentNum = ref()
const baseTimestamp = '2024-01-01T00:00:00Z';
const stepRange = 5000
const timer = ref(null)// 初始化一个介于min,max之间的值,以step为单位动态增加const getInitAmount = (step, min, max)=> {// 定一个基础值const baseTime = new Date(baseTimestamp).getTime();// 动态改变的值,如果是固定的值,每次增加一样数据就看起来很假,如果是随机值不能保证每个用户一致,所以也需要用当前时间来计算,用UTC为0获取,保证每个时区获取的增量一致const random = new Date().getUTCMinutes()*new Date().getUTCHours()*new Date().getUTCDay()*seedRandom()();const currentTime = Math.floor(Date.now()/step)*step;// 计算与基准时间的差值(以step为单位)let offsetUnits = Math.floor((currentTime - baseTime) / step) * random// 设置数据必须在min 和 max 之间const rangeValue = min+ (offsetUnits%(max- min + 1))return rangeValue}
// 生成一个确定性的随机数序列function seedRandom() {let m_w  = parseInt(new Date(baseTimestamp).getTime());let m_z  = 987654321;const mask = 0xffffffff;return function() {m_z = (36969 * (m_z & 65535) + (m_z >> 16)) & mask;m_w = (18000 * (m_w & 65535) + (m_w >> 16)) & mask;let result = ((m_z << 16) + (m_w & 65535)) >>> 0;result /= 0x80000000;return result;};}onMounted(()=> {initData()if (typeof document.hidden !== "undefined") {// 监听 visibilitychange 事件document.addEventListener("visibilitychange", function() {if (document.visibilityState === 'visible') {// 页面可见时执行的操作initData()} else {// 页面隐藏时执行的操作if (timer.value) clearInterval(timer.value)}});}})onDeactivated(()=> {if (timer.value) clearInterval(timer.value)})onActivated(()=> {initData()})const initData = ()=> {//根据当前时间获得奖金数据currentNum.value = formatWithCommas(toDecimalNum(getInitAmount(stepRange))) // 定时器每stepRange毫秒改变一次奖金数据timer.value = setInterval(()=> {currentNum.value = formatWithCommas(toDecimalNum(getInitAmount(stepRange))) }, stepRange)}/*** 格式化数字,保留小数点decimal位* @param* @num 数值* @decimal 截取位数*/
export function toDecimalNum(num, decimal = 2) {return new Decimal(num).toFixed(decimal, Decimal.ROUND_DOWN).toString().replace('.',',')
}/**
* 数字每三位加逗号
* @param
* @number 数值
*/
export function formatWithCommas(number) {return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

需要注意的是,如果手动改变时间,显示的数据会与标准时间不同,毕竟是根据时间戳生成的动态数据,如果时间戳被改变,数据也是会被改变的。

相关文章:

前端如何单独做虚拟奖金池?

公司业务需求要做一个虚拟奖金池&#xff0c;具体是需求是&#xff0c;不需要后端数据支持&#xff0c;但是又需要不同用户看到的奖金池数据每次变动都是一致的&#xff0c;并且要在给定的最小最大值中变动。 一开始看需求&#xff0c;因为需要所有登录/未登录&#xff0c;不同…...

前端md5校验文件

前端获取文件的md5值&#xff0c;与文件一同传到后端&#xff0c;后端同样对md5值进行校验。如果相同&#xff0c;则文件未被损坏&#xff08;其实这种方式优点类似于tcp、ip的差错校验&#xff0c;好像token也是这种方式&#xff09; 项目准备 前端并不可能手写一个算法来实…...

总结SQL相对常用的几个字符函数

目录 字符的截取 substr() trim()、ltrim()、rtrim() 字符串的拼接 ||、 字符的大小写转换 upper(column_name):大写 lower(column_name):小写 字符替换 replace() 搜索字符 instr(column_name, substring_to_find,start,n_appearence) charindex(substring_to_fi…...

云计算笔记

RAID的组合方式 RAID0&#xff1a;多个硬盘同时工作&#xff0c;可提供性能&#xff0c;无冗余机制 RAID1&#xff1a;数据保存多份&#xff0c;提供冗余机制&#xff0c;性能受到影响 RAID3&#xff1a;存在数据盘和单独校验盘&#xff0c;数据写入 至数据盘后需要运算且将…...

网络安全学习路线-超详细

零基础小白&#xff0c;到就业&#xff01;入门到入土的网安学习路线&#xff01; 在各大平台搜的网安学习路线都太粗略了。。。。看不下去了&#xff01; 建议的学习顺序&#xff1a; 一、网络安全学习普法&#xff08;心里有个数&#xff0c;要进去坐几年&#xff01;&#x…...

【多模态检索】Coarse-to-Fine Visual Representation

快手文本视频多模态检索论文 论文&#xff1a;Towards Efficient and Effective Text-to-Video Retrieval with Coarse-to-Fine Visual Representation Learning 链接&#xff1a;https://arxiv.org/abs/2401.00701 摘要 近些年&#xff0c;基于CLIP的text-to-video检索方法…...

VRRP——虚拟路由冗余协议

什么是VRRP 虚拟路由冗余协议VRRP&#xff08;Virtual Router Redundancy Protocol&#xff09;是一种用于提高网络可靠性的容错协议。 通过VRRP&#xff0c;可以在主机的下一跳设备出现故障时&#xff0c;及时将业务切换到备份设备&#xff0c;从而保障网络通信的连续性和可…...

隧道应急广播应该如何搭建?

隧道应急广播系统的搭建需遵循以下关键步骤&#xff0c;确保在紧急情况下能够迅速、准确地传达信息&#xff0c;保障人员安全&#xff1a; 1. 需求分析与规划设计&#xff1a; 明确目标&#xff1a;确定广播系统覆盖范围&#xff08;如隧道全长、出入口、避难所等关键位置&…...

OpenHarmony实战开发-Worker子线程中解压文件。

介绍 本示例介绍在Worker 子线程使用ohos.zlib 提供的zlib.decompressfile接口对沙箱目录中的压缩文件进行解压操作&#xff0c;解压成功后将解压路径返回主线程&#xff0c;获取解压文件列表。 效果图预览 使用说明 1.点击解压按钮&#xff0c;解压test.zip文件&#xff0c…...

中国科学院大学学位论文LaTeX模版

Word排版太麻烦了&#xff0c;公式也不好敲&#xff0c;推荐用LaTeX模版&#xff0c;全自动 官方模版下载位置&#xff1a;国科大sep系统 → \rightarrow → 培养指导 → \rightarrow → 论文 → \rightarrow → 论文格式检测 → \rightarrow → 撰写模板下载百度云&#…...

秘塔和Kimi AI在资料查询和学习中的使用对比

一、引言 最近老猿在网上查资料时&#xff0c;基本上都使用Kimi AI进行查询&#xff0c;发现其查询资料后总结到位&#xff0c;知识点的准确度较高。今天早上收到一个消息&#xff0c;说新推出的秘塔AI比Kimi更新进&#xff0c;老猿利用在学习的《统计知识学习》简单对比试用了…...

apk反编译

APK文件可以通过多个工具反编译&#xff0c;以便查看包含在其中的Java源文件。但是&#xff0c;需要注意的是&#xff0c;通常通过反编译得到的不是原始的Java源代码&#xff0c;而是反编译后的代码&#xff0c;这意味着它可能已经被转换成了类似于原始Java代码的形式&#xff…...

修改百度百科的词条的方法

百度百科作为国内最大的百科全书网站之一&#xff0c;是广大网民获取各类知识的重要途径之一。所以&#xff0c;如何修改百度百科的词条成为了很多人关心的话题。本文将介绍修改百度百科的方法&#xff0c;并提供一些技巧和注意事项。 注册百度账号 首先&#xff0c;进入百度百…...

更改ip地址的几种方式有哪些

在数字化时代&#xff0c;IP地址作为网络设备的标识&#xff0c;对于我们在网络世界中的活动至关重要。然而&#xff0c;出于多种原因&#xff0c;如保护隐私、访问特定网站或进行网络测试&#xff0c;我们可能需要更改IP地址。虎观代理将详细介绍IP地址的更改方法与步骤&#…...

Flink学习(六)-容错处理

前言 Flink 是通过状态快照实现容错处理 一、State Backends 由 Flink 管理的 keyed state 是一种分片的键/值存储&#xff0c;每个 keyed state 的工作副本都保存在负责该键的 taskmanager 本地中。 一种基于 RocksDB 内嵌 key/value 存储将其工作状态保存在磁盘上&#x…...

设计模式(020)行为型之备忘录模式

备忘录模式是一种行为型设计模式&#xff0c;用于在不破坏封装性的前提下捕获一个对象的内部状态&#xff0c;并在该对象之外保存这个状态&#xff0c;以便之后可以将该对象恢复到之前的状态。这种模式通常用于需要记录对象状态历史、撤销操作或实现“回到过去”功能的场景。 在…...

Android 系统锁屏息屏休眠时Handler CountDownTimer计时器停止运行问题解决

1.前言 在进行app开发的过程中,在进行某些倒计时的功能项目开发中,会遇到在锁屏息屏休眠一段时间的情况下, 在唤醒屏幕的情况下发现倒计时已经停止了,这是因为在系统处于休眠的状态下cpu也停止了工作,所以 handler和countdowntimer倒计时也停止了工作,接下来就来看怎么样…...

Java中如何提取视频文件的缩略图

在Java中&#xff0c;可以使用FFmpeg库来提取视频文件的缩略图。以下是一种使用FFmpeg的方法来提取视频缩略图的示例代码&#xff1a; import java.io.File; import java.io.IOException;public class VideoThumbnailExtractor {public static void main(String[] args) {Stri…...

总结 HashTable, HashMap, ConcurrentHashMap 之间的区别

前言 HashMap 本身不是线程安全的. 在多线程环境下使用哈希表可以使用: Hashtable&#xff08;不推荐使用&#xff09;ConcurrentHashMap&#xff08;推荐使用&#xff09; HashMap HashMap数据结构 根本&#xff1a; 数组 链表&#xff08;jdk1.7&#xff09;/数组链表红黑…...

《剑指 Offer》专项突破版 - 面试题 107 : 矩阵中的距离(C++ 实现)

题目链接&#xff1a;矩阵中的距离 题目&#xff1a; 输入一个由 0、1 组成的矩阵 M&#xff0c;请输出一个大小相同的矩阵 D&#xff0c;矩阵 D 中的每个格子是矩阵 M 中对应格子离最近的 0 的距离。水平或竖直方向相邻的两个格子的距离为 1。假设矩阵 M 中至少有一个 0。 …...

Qt项目里用dxflib解析CAD图纸,遇到带圆弧的多段线(LWPOLYLINE)怎么画?

Qt项目中利用dxflib解析CAD图纸&#xff1a;带圆弧多段线(LWPOLYLINE)的精确绘制方案 在工业设计、建筑图纸和机械制图领域&#xff0c;DXF文件作为CAD数据交换的标准格式&#xff0c;其精确解析一直是开发者的核心挑战。当使用Qt框架结合dxflib库进行CAD可视化时&#xff0c;优…...

【跟韩工学Ubuntu第5课】-第5章 网络管理:Netplan、路由与防火墙-004篇-Ubuntu Server 网络管理:进阶配置、优化与实战诊断

文章目录 Ubuntu Server 网络管理:进阶配置、优化与实战诊断 (扩容优化版 | 适配高校教学+生产实战 | 30页核心内容) 5.1 网络基础:深入理解与实践查看(扩容+优化) 一、核心概念进阶(新增计算案例+场景区分) 二、必备诊断命令(新增高频参数+中文注释) 三、IPv6 完整配…...

华硕笔记本性能困境突破:G-Helper工具的全方位优化方案

华硕笔记本性能困境突破&#xff1a;G-Helper工具的全方位优化方案 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops. Control tool for ROG Zephyrus G14, G15, G16, M16, Flow X13, Flow X16, TUF, Strix, Scar and other models 项目地…...

避坑指南:SpringBoot调用DeepSeek API时你可能会遇到的5个问题及解决方案

SpringBoot集成DeepSeek API的5个典型避坑指南 在将DeepSeek的对话补全能力整合到SpringBoot应用时&#xff0c;不少开发者会遇到一些看似简单却容易踩坑的问题。这些问题往往不会在官方文档中被特别强调&#xff0c;但却能让你在调试过程中耗费数小时。本文将聚焦五个最具代表…...

Win11虚拟机密码重置保姆教程:VirtualBox+系统备份双保险

Win11虚拟机密码重置与系统防护全指南&#xff1a;VirtualBox实战策略 在数字化工作环境中&#xff0c;虚拟机已成为隔离测试环境、保障系统安全的标配工具。当我们因各种原因遗忘Windows 11虚拟机密码时&#xff0c;传统物理机的解决方案往往无法直接套用。本文将深入探讨基于…...

【ybtoj】【KMP】【例题1】子串查找

【例题1】子串查找Link解题思路CodeLink 传送门 题目 解题思路 kmp模板题 找了超级多篇KMP的博客&#xff0c;一直都看不懂 直到……直到我找到了光&#xff08;bushi&#xff09; 这篇博客直接把我升华 Code #include <iostream> #include <cstring> #include…...

LFM2.5-1.2B-Thinking-GGUF保姆级教程:Web界面汉化+响应式布局适配移动端指南

LFM2.5-1.2B-Thinking-GGUF保姆级教程&#xff1a;Web界面汉化响应式布局适配移动端指南 1. 模型与平台介绍 LFM2.5-1.2B-Thinking-GGUF是Liquid AI推出的一款轻量级文本生成模型&#xff0c;特别适合在资源有限的环境中快速部署使用。这个镜像内置了GGUF模型文件和llama.cpp…...

brpc编译优化:提升二进制执行效率的编译选项

brpc编译优化&#xff1a;提升二进制执行效率的编译选项 【免费下载链接】brpc brpc is an Industrial-grade RPC framework using C Language, which is often used in high performance system such as Search, Storage, Machine learning, Advertisement, Recommendation et…...

OpenClaw v2026.3.24-beta.1 深度技术分析报告:体验、生态与协作的“精装修”

报告版本&#xff1a; 1.1分析基准&#xff1a; v2026.3.23 (稳定化修复版本) -> v2026.3.24-beta.1 (预发布版)核心论点&#xff1a; 在经历了v2026.3.22的“架构大换血”与v2026.3.23的“系统性修复”之后&#xff0c;v2026.3.24-beta.1标志着OpenClaw的迭代节奏进入了一个…...

Jupyter Notebook快速入门:从安装到高效编码

1. 为什么你需要Jupyter Notebook&#xff1f; 第一次听说Jupyter Notebook时&#xff0c;我也觉得这不过是个普通的代码编辑器。直到真正用起来才发现&#xff0c;它完全改变了我的编程工作流。想象一下&#xff0c;你正在写一个数据分析脚本&#xff0c;传统方式需要反复运行…...