公司业务需求要做一个虚拟奖金池，具体是需求是，不需要后端数据支持，但是又需要不同用户看到的奖金池数据每次变动都是一致的，并且要在给定的最小最大值中变动。
一开始看需求，因为需要所有登录/未登录，不同用户看到的数据必须一致，认为只能后端提供数据，就算是假数据，也要保存在服务器上。后来再思考，所有用户拿到的当前时间戳是一致的，所以可以根据时间戳来生成统一的假数据，每次奖金池的增量也可以根据当前时间的分钟、小时、日期等动态增加。
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 = 5000const 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, ",");}
需要注意的是，如果手动改变时间，显示的数据会与标准时间不同，毕竟是根据时间戳生成的动态数据，如果时间戳被改变，数据也是会被改变的。