大屏数字滚动+时钟数字展示

1. 数字滚动

npm i countup.js

<h1 id="targetId">0</h1>

options = { 
    /** 起始值 */ 
    startVal: 0, 
    /** 显示小数点后几位 */ 
    decimalPlaces: 2, 
    /** 持续时间 */ 
    duration: 5, 
    useGrouping: false, 
    /** 千位分隔符，默认',' */ 
    // separator: ',', 
    /** 小数点，默认'.' */ 
    // decimal: '.', 
    /** 前缀，默认'', 一般用 000 + 具体数字，来充当占位符 */ 
    prefix: '', 
    /** 后缀，默认''，比如：100.55 + '8647' => 100.558654 */ 
    // suffix: '', 
 } 
 
 mounted() { 
     const countUp = new CountUp('targetId', 50.55, this.options) 
     if (!countUp.error) { 
         countUp.start() 
     } else { 
         console.error(countUp.error) 
     } 
     // 更新到 
     // countUp.update(6789) 
 }

2. 时钟数字

assets 文件夹下添加以下文件（解压后的）：

(链接：pan.baidu.com/s/1CJsNN6Ow… 提取码：dq1n)

全局的.less

@font-face { 
    font-weight: 400; 
    font-style: normal; 
    font-family: number; 
    src: url(./assets/font/Digital-Dismay.otf) 
    format('truetype'); 
}

<h1 id="targetId" class="h1">0</h1> 

.h1 { font-family: number; }

------------------------------ over -----------------------------