【前端】数字卷轴JS特效

最新推荐文章于 2025-06-06 09:15:08 发布

扣钉

最新推荐文章于 2025-06-06 09:15:08 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： JS

本文链接：https://blog.youkuaiyun.com/GJ454221763/article/details/83445788

前端专栏收录该内容

18 篇文章

订阅专栏

永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，写J S也。

先来看一张JS特效图：

（不知为何GIF显示不了，算了在线演示吧）

代码实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数字卷轴特效</title>
    <script src="./CountUp.js"></script>
    <script src="./jquery.min.js"></script>
    <style type="text/css">
        #box{
            font-size: 44px;
            font-weight: bold;
            color: green; 
            height:50px;
        }
    </style>
</head>
<body>
    <div id="box"> </div>
    <hr/>
    <input type="input" name="data" id="inputData"/>
    <input type="button" id="dw" value="查看特效"> 
    <script type="text/javascript">
        var options = {
            useEasing: false, 
            useGrouping: true, 
            separator: '', 
            decimal: '.', 
        };
        function showDynamicData(posi,data){
            var demo = new CountUp(posi, 0, data, 2, 1.5, options); 
            //param1:位置#xxx;param2:0;param3:实时数据；
            //param4:小数点后位数；param5:持续时间；param5:动态卷轴实例
            if (!demo.error) {
                demo.start();
            } else {
                console.error(demo.error);
            }
        }
        $(function(){ 
            $("#dw").click(function(){ 
                showDynamicData('box',$("#inputData").val());
            });
        }); 
    </script>
</body>
</html>

详细内容 ☞ 源码下载