jQuery+PHP 动态数字展示效果
一、开发环境
1、环境搭建:Windows 8+Apache 2.4.18+MySQL 5.7.11+PHP
7.1.0 。
2、文本编辑器:Sublime Text3。
二、主要技术
本实验主要使用 jQuery、 PHP 和 json 实现动态数字展示效
果。
三、具体步骤
新建 index.php 文件
①引入 js 类库设置数字显示
<script type="text/javascript" src="jquery.min.js"></script>
<div class="count">当前在线人数:<span id="number"></span></div>
②定义数字变换的方法
function magic_number(value) {
var num = $("#number");
num.animate({count: value}, {
duration: 500,
step: function() {
num.text(String(parseInt(this.count)));
}
});
};
③使用 update()方法向后台 number.php 发送 ajax 请求,在
得到响应后调用 magic_number()刷新数字