当前位置: 首页 > 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。 …...

机票价格智能监控:如何用Flight Spy锁定最佳购票时机

机票价格智能监控&#xff1a;如何用Flight Spy锁定最佳购票时机 【免费下载链接】flight-spy Looking for the cheapest flights and dont have enough time to track all the prices? 项目地址: https://gitcode.com/gh_mirrors/fl/flight-spy 你是否曾在预订机票时陷…...

PlatformIO脚本进阶:告别修改库文件,用Python脚本精准控制FreeRTOS heap文件编译

PlatformIO脚本进阶&#xff1a;精准控制FreeRTOS堆管理文件编译的工程实践 在嵌入式开发中&#xff0c;第三方库的管理一直是个令人头疼的问题。特别是像FreeRTOS这样的实时操作系统&#xff0c;其源代码结构往往包含多个可选组件&#xff0c;开发者需要根据具体硬件和需求选择…...

深入解析WIFI中EAP-TLS认证流程与安全机制

1. EAP-TLS认证&#xff1a;WIFI安全连接的基石 每次我们用手机连接公司或学校的WIFI时&#xff0c;系统总会弹出一个证书确认的窗口&#xff0c;这就是EAP-TLS在发挥作用。作为目前最安全的WIFI认证协议之一&#xff0c;它就像网络世界的"护照查验系统"&#xff0c;…...

企业级Java SMB客户端:jcifs-ng深度架构解析与实战指南

企业级Java SMB客户端&#xff1a;jcifs-ng深度架构解析与实战指南 【免费下载链接】jcifs-ng A cleaned-up and improved version of the jCIFS library 项目地址: https://gitcode.com/gh_mirrors/jc/jcifs-ng jcifs-ng是一个经过彻底重构和优化的Java SMB客户端库&am…...

如何用RSPrompter提升遥感图像分割效果?基于SAM的实战技巧分享

如何用RSPrompter提升遥感图像分割效果&#xff1f;基于SAM的实战技巧分享 遥感图像分割一直是计算机视觉领域的难点之一。传统方法往往需要大量标注数据&#xff0c;而标注成本高昂&#xff0c;尤其是对于高分辨率遥感影像。2023年Meta发布的Segment Anything Model(SAM)展现了…...

英雄联盟智能工具集:3个颠覆性功能重塑你的游戏体验

英雄联盟智能工具集&#xff1a;3个颠覆性功能重塑你的游戏体验 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 作为英雄联盟玩家…...

如何快速搭建Kafka Docker集群:broker-list.sh工作原理与实用指南

如何快速搭建Kafka Docker集群&#xff1a;broker-list.sh工作原理与实用指南 【免费下载链接】kafka-docker Dockerfile for Apache Kafka 项目地址: https://gitcode.com/gh_mirrors/ka/kafka-docker GitHub 加速计划 / ka / kafka-docker 项目提供了基于 Docker 的 A…...

哔哩哔哩第三方开放平台软件bilipai7.0.2

bilipai是一款面向B站内容爱好者的第三方安卓客户端&#xff0c;它有着清新灵动的界面风格和流畅自然的操作体验&#xff0c;能完整同步B站的各类视频资源&#xff0c;包括番剧、动画、知识科普、生活分享等内容类别&#xff0c;用户登录账号后&#xff0c;还可以实时同步自己的…...

把 SAP ABAP CDS View Code Mapping 讲透:从 SEGW 映射到 SADL 运行时的关键机制与项目实践

很多 ABAP 开发者在第一次接触 CDS View Code Mapping 时,容易把它理解成一次普通的字段映射操作:左边是 CDS 字段,右边是 OData 属性,拖一拖、连一连,事情就结束了。真正进入项目以后,大家才会发现,这个动作背后牵动的是 SAP Gateway、SADL、DPC 运行时、关联导航,以及…...

ARM A53上跑通1080P实时EIS防抖?手把手教你优化特征点与透视变换(附代码思路)

ARM A53实战&#xff1a;1080P实时EIS防抖的7个关键优化策略 当行车记录仪的镜头在颠簸路面剧烈晃动&#xff0c;或是运动相机在冲浪时被海浪拍打&#xff0c;画面稳定性的价值就凸显出来。传统光学防抖受限于物理结构&#xff0c;而电子防抖(EIS)通过算法补偿成为嵌入式设备的…...