使用JavaScript实现数字自动增加的动画特效

今天，我又去找ChatGPT要代码了，目的是学习知更鸟主题底部那个一直不断增加的网站访问量统计功能。然后，就跟ChatGPT聊了一会，得到了需要的代码。当然，过程还是很痛苦。这个智能Ai有时候并不能准确理解我的意思。总之，最终我通过JavaScript实现了网站浏览量实时增加直到变成总浏览量的功能，并成功添加到了WordPress JustNews主题中。

代码示例

得到的JavaScript代码如下：

这是初始版本代码，里面有部分问题，文末给出正确代码

<div id="all_views" data-targetnum="456456456" data-speed="1000"></div>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
  // 将数字转换为逗号隔开的千分位格式
  function num2qfw(num) {
    num += '';
    if (!num.includes('.')) num += '.';
    var reg = /(\d)(?=(\d{3})+$)/g;
    var integer = num.split('.')[0];
    var decimal = num.split('.')[1];
    if (decimal) {
      return integer.replace(reg, '$1,') + '.' + decimal;
    } else {
      return integer.replace(reg, '$1,');
    }
  }

  // 数值改变动画函数
  function magic_number(value) {
    var num = $("#all_views");
    num.animate({ count: value }, {
      duration: 500,
      step: function () {
        num.text(num2qfw(parseInt(this.count)));
      },
      complete: function () {
        num.text(num2qfw(parseInt(value)));
      }
    });
  };

  let targetVal = $("#all_views").data("targetnum");
  let speed = $("#all_views").data("speed");
  let oldVal = 0;

  function update() {
    if (oldVal < targetVal) {
      let diff = targetVal - oldVal;
      let increment = Math.ceil(Math.random() * 9000) + 1000; // 生成 100 到 1000 的随机数
      oldVal += increment;
      if (oldVal > targetVal) {
        oldVal = targetVal;
      }
      magic_number(oldVal);
    } else {
      magic_number(targetVal);
    }
  }

  update();
  setInterval(update, speed); // 每 speed 毫秒执行一次 update();

</script>

当然，如果你主题已经引入了jquery，那么你就不需要再重复引用了。代码中的data-targetnum需要用你的实际访问量代替，data-speed是数字变化速度，单位是毫秒。

PHP获取总访问量

有关如何统计网站总访问量，可以使用如下PHP代码

//WordPress获取站点总浏览量
function all_view() /*注意这个函数名，调用的就是用它了*/
{
global $wpdb;
$count=0;
$views= $wpdb->get_results("SELECT * FROM $wpdb->postmeta WHERE meta_key='views'");
foreach($views as $key=>$value)
{
$meta_value=$value->meta_value;
if($meta_value!=' ')
{
$count+=(int)$meta_value;}
}
return $count;}

上述代码放置于主题function.php文件中即可，一般是第二行后面，即<?php下面

PHP显示总访问量

使用如下代码即可引用总访问量：

<?php echo all_view(); ?>

即在你需要显示访问量的地方使用如下代码即可

访问量调用

<div id="all_views" data-targetnum="<?php echo all_view(); ?>" data-speed="1000"></div>

然后在主题底部引用JavaScript代码即可。

JavaScript代码

当我使用chatgpt给我的代码后，发现总是报错$ is not a function。这时由于未引入jquery导致的，但事实上WordPress自带这玩意，所以应该是JavaScript代码的问题，我最终使用如下代码将chatgpt给我的代码包围，成功实现了功能。

jQuery(document).ready(function($){
JavaScript代码
});

修改后可用的JavaScript代码如下：

jQuery(document).ready(function($){
  // 将数字转换为逗号隔开的千分位格式
  function num2qfw(num) {
    num += '';
    if (!num.includes('.')) num += '.';
    var reg = /(\d)(?=(\d{3})+$)/g;
    var integer = num.split('.')[0];
    var decimal = num.split('.')[1];
    if (decimal) {
      return integer.replace(reg, '$1,') + '.' + decimal;
    } else {
      return integer.replace(reg, '$1,');
    }
  }

  // 数值改变动画函数
  function magic_number(value) {
    var num = $("#all_views");
    num.animate({ count: value }, {
      duration: 500,
      step: function () {
        num.text(num2qfw(parseInt(this.count)));
      },
      complete: function () {
        num.text(num2qfw(parseInt(value)));
      }
    });
  }

  let targetVal = $("#all_views").data("targetnum");
  let speed = $("#all_views").data("speed");
  let oldVal = 0;

  function update() {
    if (oldVal < targetVal) {
      let diff = targetVal - oldVal;
      let increment = Math.ceil(Math.random() * 9000) + 1000; // 生成 100 到 1000 的随机数
      oldVal += increment;
      if (oldVal > targetVal) {
        oldVal = targetVal;
      }
      magic_number(oldVal);
    } else {
      magic_number(targetVal);
    }
  }

  update();
  setInterval(update, speed); // 每 speed 毫秒执行一次 update();
});