数字递增效果（读数效果）

最新推荐文章于 2024-06-25 11:27:04 发布

泥猴桃

最新推荐文章于 2024-06-25 11:27:04 发布

阅读量7k

点赞数 1

分类专栏： jquery javascript 文章标签： jquery

本文链接：https://blog.csdn.net/shi851051279/article/details/78254996

版权

javascript 同时被 2 个专栏收录

58 篇文章 2 订阅

订阅专栏

jquery

10 篇文章 0 订阅

订阅专栏

最近项目需求中有用到环形进度条，然后需要读数的效果，在网上找了下相关的代码，写出来以后整理了下
话不多说直接上代码

最终效果如下图
这里写图片描述
html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery打开网页后数字动态跳转到指定数字大小代码</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<div class="wrapper">
    <div class="counter col_fourth">
      <h2 class="timer count-title" id="count-number" data-to="17870" data-speed="1500"></h2>
    </div>
</div>
  <script src='js/jquery.js'></script>
  <script src="js/index.js"></script>
</body>
</html>

css

body {
  font-family: Arial;
  padding: 25px;
  background-color: #f5f5f5;
  color: #808080;
    text-align: center; 
}
.wrapper { width: 980px; margin: 30px auto; position: relative;}
.counter { background-color: #ffffff; padding: 20px 0; border-radius: 5px;}
.count-title { font-size: 40px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { font-size: 13px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text a{
    text-decoration: none;
    color: green;
}
.fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; }

js (核心效果代码)

$.fn.countTo = function(a) {
    a = a || {};
    return $(this).each(function() {
        var c = $.extend({},
        $.fn.countTo.defaults, {
            from: $(this).data("from"),
            to: $(this).data("to"),
            speed: $(this).data("speed"),
            refreshInterval: $(this).data("refresh-interval"),
            decimals: $(this).data("decimals")
        },
        a);
        var h = Math.ceil(c.speed / c.refreshInterval),
        i = (c.to - c.from) / h;
        var j = this,
        f = $(this),
        e = 0,
        g = c.from,
        d = f.data("countTo") || {};
        f.data("countTo", d);
        if (d.interval) {
            clearInterval(d.interval)
        }
        d.interval = setInterval(k, c.refreshInterval);
        b(g);
        function k() {
            g += i;
            e++;
            b(g);
            if (typeof(c.onUpdate) == "function") {
                c.onUpdate.call(j, g)
            }
            if (e >= h) {
                f.removeData("countTo");
                clearInterval(d.interval);
                g = c.to;
                if (typeof(c.onComplete) == "function") {
                    c.onComplete.call(j, g)
                }
            }
        }
        function b(m) {
            var l = c.formatter.call(j, m, c);
            f.html(l)
        }
    })
};
$.fn.countTo.defaults = {
    from: 0,
    to: 0,
    speed: 1000,
    refreshInterval: 100,
    decimals: 0,
    formatter: formatter,
    onUpdate: null,
    onComplete: null
};
function formatter(b, a) {
    return b.toFixed(2)
}
$("#count-number").data("countToOptions", {
    formatter: function(b, a) {
        return b.toFixed(2).replace(/\B(?=(?:\d{3})+(?!\d))/g, ",")
    }
});
$(".timer").each(count);
function count(a) {
    var b = $(this);
    a = $.extend({},
    a || {},
    b.data("countToOptions") || {});
    b.countTo(a)
};

原文地址可以下载demo 压缩包
原文地址： http://www.jb51.net/article/113034.htm

泥猴桃

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
数字递增效果（读数效果）

最近项目需求中有用到环形进度条，然后需要读数的效果，在网上找了下相关的代码，写出来以后整理了下话不多说直接上代码最终效果如下图 html<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery打开网页后数字动态跳转到指定数字大小代码</title><link rel="stylesheet" href="css/
复制链接

扫一扫

专栏目录