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

本文主要是介绍前端如何单独做虚拟奖金池？，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

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, ",");
}