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

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

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

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, ",");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

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