jQuery+PHP数字统计动态展示效果

最新推荐文章于 2022-12-03 11:03:39 发布

这个年纪的_我

最新推荐文章于 2022-12-03 11:03:39 发布

阅读量348

点赞数

分类专栏： JS PHP

本文链接：https://blog.csdn.net/m0_37616927/article/details/89197635

版权

PHP 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

网上教程很多，我就不多解释，直接上可以运行的代码

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>jQuery+PHP数字统计动态展示效果 - 代码素材</title>
        <meta name="keywords" content="数字统计" />
        <meta name="description" content="本文在页面上动态展示了当前在线用户数。" />
    
    </head>
    
    <body>

        <div class="container">
            <div class="demo">
                <h2 class="title">教程：jQuery+PHP数字统计动态展示效果</h2>
                <div class="count">当前在线：<span id="number"></span></div>

            </div>
        </div>
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
        <script type="text/javascript">
            function magic_number(value) {
                var num = $("#number");
                num.animate({count: value}, {
                    duration: 500,
                    step: function() {
                        num.text(String(parseInt(this.count)));
                    }
                });
            }
            function update() {
                $.get("ajax.php", function(data) {
                    magic_number(data);
                });
            }
            setInterval(update, 3000);
            update();
        </script>

    </body>
</html>

ajax.php

<?php
echo mt_rand(0,999);
?>

运行起来为演示的链接演示

这个年纪的_我

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery+PHP数字统计动态展示效果

网上教程很多，我就不多解释，直接上可以运行的代码index.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org...
复制链接

扫一扫

专栏目录