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

场景

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

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

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

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

 

注：

博客：
霸道流氓气质的博客_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);
        })