Vue/JS中定时器模拟随机指定范围、位数的小数并更新innerHTML以及页面被销毁时监听事件中销毁定时器

Myth丶恋晨 2023-10-11 20:06 32阅读 0赞

## 场景 ##

若依前后端分离版手把手教你本地搭建环境并运行项目：

[若依前后端分离版手把手教你本地搭建环境并运行项目\_霸道流氓气质的博客-CSDN博客\_前后端分离项目本地运行][-CSDN]

Vue页面上某个弹窗内容是innerHTML动态拼接。

系统演示时需构造模拟数据，模拟出数据随机改变的效果。

![0cdffff46c914c919608f16c2a33f5f1.gif][]

注：

博客：  
[霸道流氓气质的博客\_CSDN博客-C\#,架构之路,SpringBoot领域博主][CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、给需要变化的元素添加span标签以及id属性

self.content.innerHTML = `
                                                <div class="car_detail">
                                                    <div class="car_content">
                                                        <div id="car_content_main">
                                                            <ul>
                                                                <li>
                                                                    <p id="car_speed">车速:<span id="carSpeedSpan">${content.carSpeed ? content.carSpeed : ""}</span>km/h</p>
                                                                    <p id="car_temp">水温:<span id="wtSpan">${content.wt ? content.wt : ""}</span>℃</p>
                                                                </li>
                                                                <li>
                                                                    <p id="car_rotation_rate">转速:<span id="rotationRateSpan">${content.rotationRate ? content.rotationRate : ""}</span>转/分</p>
                                                                    <p id="car_et">排温:<span id="etSpan">${content.et ? content.et : ""}</span>℃</p>
                                                                </li>
                                                                <li id="car_mileage">里程:<span id="mileageSpan">${content.mileage ? content.mileage : ""}</span>km</li>
                                                                <li id="car_fc">甲烷浓度:<span id="fcSpan">${content.fc ? content.fc : ""}</span>%</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            `;

2、在mounted方法中添加定时器，构造模拟数据

//创建模拟数据定时器
            var mockInterval =  setInterval(() => {
                if(document.getElementById("carSiteSpan")){
                    document.getElementById("carSiteSpan").innerHTML = "距离"+(Math.random() * (1000-600+1) + 600).toFixed(2)+"米";
                }
                if(document.getElementById("carSpeedSpan")){
                    document.getElementById("carSpeedSpan").innerHTML = Math.ceil(Math.random() * (60-30+1) + 30);
                }
                if(document.getElementById("wtSpan")){
                    document.getElementById("wtSpan").innerHTML = Math.ceil(Math.random() * (100-50+1) + 50);
                }
                if(document.getElementById("rotationRateSpan")){
                    document.getElementById("rotationRateSpan").innerHTML = Math.ceil((Math.random() * (3000-1000+1) + 1000));
                }
                if(document.getElementById("etSpan")){
                    document.getElementById("etSpan").innerHTML = Math.ceil((Math.random() * (60-30+1) + 30));
                }
                if(document.getElementById("mileageSpan")){
                    document.getElementById("mileageSpan").innerHTML = Math.ceil((Math.random() * (50000-49800+1) + 49800));
                }
                if(document.getElementById("fcSpan")){
                    document.getElementById("fcSpan").innerHTML = (Math.random()).toFixed(2);
                }
            },3000);

注意:

通过id获取元素，并设置innerHTML内容

Math.ceil(Math.random() \* (60-30+1) + 30) 设置随机数在30 到 60之间并取整

(Math.random() \* (1000-600+1) + 600).toFixed(2) 设置随机数在600 到1000之间并保留2位小数。

3、监听当前页面显示状态，当页面被销毁时，销毁定时器

同样在mounted中

// 监听当前页面 显示状态
            window.addEventListener('visibilitychange', this.handleVisibilityChange);
            // 当页面被销毁时 移除监听
            this.$on('hook:beforeDestroy', () => {
              console.info('销毁mockInterval定时器');
              clearInterval(mockInterval);
            })

[-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662
[0cdffff46c914c919608f16c2a33f5f1.gif]: https://img-blog.csdnimg.cn/0cdffff46c914c919608f16c2a33f5f1.gif
[CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi