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

4.8
(4)

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

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

代码示例

得到的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下面

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

PHP显示总访问量

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

<?php echo all_view(); ?>

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

访问量调用

<div id="all_views" data-targetnum="<?php echo all_view(); ?>" data-speed="1000"></div>
使用JavaScript实现数字自动增加的动画特效

然后在主题底部引用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();
});
使用JavaScript实现数字自动增加的动画特效

当然,如果你直接在主题设置中添加的话,首尾需要<script></script>,如果你直接放到js文件中引入就不需要了。

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

当然了,这样样式我后面是要优化的。甚至可能考虑搞成当访客看到这个数字的时候,数字才开始变化。

共计4人评分,平均4.8

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

文章目录

原创文章,作者:古哥,转载需经过作者授权同意,并附上原文链接:https://iymark.com/articles/4975.html

(1)
微信公众号
古哥的头像古哥管理团队
上一篇 2023年03月26日 22:20
下一篇 2023年03月28日 22:20

你可能感兴趣的文章

发表回复

登录后才能评论
微信小程序
微信公众号