数字动态变化 vue实现

最新推荐文章于 2024-05-06 09:44:33 发布

vagabond_

最新推荐文章于 2024-05-06 09:44:33 发布

阅读量1.5k

点赞数

分类专栏： css vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/vagabond_/article/details/121796097

版权

css 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

数字动态变化 vue实现

效果图
在这里插入图片描述

代码
hmtl

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>动态数字</title>
    <script src="./dynamicDigital.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    digital: 0
                }
            },
            mounted() {
                this.setValue()
            },
            methods: {
                setValue() {
                    let value = 500
                    let dynamicDigital = new DynamicDigital()
                    const dom = document.getElementById('app')
                    dynamicDigital.render(value, 2000, dom)
                    dynamicDigital.show()
                    setInterval(() => {
                        value += 500
                        dynamicDigital.render(value, 2000)
                        dynamicDigital.show();
                    }, 5000);
                }
            },
        })
    </script>
</body>

</html>

dynamicDigital.js

class DynamicDigital {

    constructor() {
        this.descDigital = 0
        //起始值
        this.prevDigital = 0
        //时长
        this.step = 0
        this.duration = 20
        this.dom = null
    }
    /*
        descDigital  设定的数值
        duration 时长
        dom 节点
    */
    render(descDigital, duration, dom) {
        this.descDigital = descDigital
        this.duration = duration
        this.dom = dom
    }

    show() {
        //等于设定值时结束
        if (this.prevDigital === this.descDigital) {
            this.step = 0;
            return;
        }

        //设置步长
        if (this.step === 0) {
            const diff = this.descDigital - this.prevDigital;
            const count = this.duration / 50
            this.step = diff > 0 ? Math.ceil(diff / count) : Math.floor(diff / count)
        }
        this.prevDigital += this.step

        //防止数值超出
        if (this.step > 0) {
            this.prevDigital = this.prevDigital > this.descDigital ? this.descDigital : this.prevDigital
        } else {
            this.prevDigital = this.prevDigital < this.descDigital ? this.descDigital : this.prevDigital
        }
        this.dom.innerHTML = this.prevDigital.toLocaleString()
        //每50毫秒绘制一次
        setTimeout(() => {
            this.show()
        }, 50)

    }
}

vagabond_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
数字动态变化 vue实现

数字动态变化 vue实现效果图代码hmtl<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>动态数字</title> <script src="./dynamicDigital.js"></script> <script src="https://unpkg.com/vue/dist/vue.j
复制链接

扫一扫