做网站哪种字体好看,怎样做网站卖自己的产品,html5电影网站如何做,荆州网络推广公司公司业务需求要做一个虚拟奖金池#xff0c;具体是需求是#xff0c;不需要后端数据支持#xff0c;但是又需要不同用户看到的奖金池数据每次变动都是一致的#xff0c;并且要在给定的最小最大值中变动。
一开始看需求#xff0c;因为需要所有登录/未登录#xff0c;不同…公司业务需求要做一个虚拟奖金池具体是需求是不需要后端数据支持但是又需要不同用户看到的奖金池数据每次变动都是一致的并且要在给定的最小最大值中变动。
一开始看需求因为需要所有登录/未登录不同用户看到的数据必须一致认为只能后端提供数据就算是假数据也要保存在服务器上。后来再思考所有用户拿到的当前时间戳是一致的所以可以根据时间戳来生成统一的假数据每次奖金池的增量也可以根据当前时间的分钟、小时、日期等动态增加。
import { ref, onMounted, computed, onActivated, onDeactivated } from vue
import { Decimal } from decimal.jsconst 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, ,);
}需要注意的是如果手动改变时间显示的数据会与标准时间不同毕竟是根据时间戳生成的动态数据如果时间戳被改变数据也是会被改变的。
