jquery php implements scrolling digital effects_jquery
Sometimes we need to dynamically display the number of visits, downloads and other effects. We can use jQuery combined with background php to achieve a rolling digital display effect.
This article uses the real-time acquisition of the download count of a product as a scenario. The frontend executes javascript regularly to obtain the latest download count, and updates the download count on the page on a rolling basis.
HTML
We first load the jQuery library file and animated background plug-in: animateBackground-plugin.js.
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/animateBackground-plugin.js"></script>
Then we add the html element to show the digital scrolling effect in the appropriate position on the page.
<div id="total"> 下载量：<span class="t_num"></span>次 </div>
jQuery
First, let's write a function show_num(), which is used to implement dynamic rolling numbers. We split the statistical number n into individual numbers. These numbers are surrounded by , and the image is positioned on each corresponding number by calling the plug-in backgroundPosition.
function show_num(n){
var it = $(".t_num i");
var len = String(n).length;
for(var i=0;i<len;i++){
if(it.length<=i){
$(".t_num").append("<i></i>");
}
var num=String(n).charAt(i);
var y = -parseInt(num)*30; //y轴位置
var obj = $(".t_num i").eq(i);
obj.animate({ //滚动动画
backgroundPosition :'(0 '+String(y)+'px)'
}, 'slow','swing',function(){}
);
}
}
Next, we get the latest download count in the background through ajax. The following code is a common jQuery ajax request. It makes a post request to data.php, data.php or obtains the latest number of downloads. After successful processing, the number of downloads is obtained: data.count, and then calls show_num() to implement digital scrolling. .
function getdata(){
$.ajax({
url: 'data.php',
type: 'POST',
dataType: "json",
cache: false,
timeout: 10000,
error: function(){},
success: function(data){
show_num(data.count);
}
});
} Finally, we need to initialize the data after the page is loaded, and then perform an ajax request every 3 seconds to update the number of downloads:
$(function(){
getdata();
setInterval('getdata()', 3000);//每隔3秒执行一次
});
Similarly, it can be used in statistics of website visits, video playback times, countdowns, etc. As for how the backend data.php processes data, it is beyond the scope of this article. Interested students can write a backend such as a counter. program to return data.count.
The above is the entire content of this article, I hope it will be helpful to everyone’s study.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1377
52
PHP 8.4 Installation and Upgrade guide for Ubuntu and Debian
Dec 24, 2024 pm 04:42 PM
PHP 8.4 brings several new features, security improvements, and performance improvements with healthy amounts of feature deprecations and removals. This guide explains how to install PHP 8.4 or upgrade to PHP 8.4 on Ubuntu, Debian, or their derivati
Discuss CakePHP
Sep 10, 2024 pm 05:28 PM
CakePHP is an open-source framework for PHP. It is intended to make developing, deploying and maintaining applications much easier. CakePHP is based on a MVC-like architecture that is both powerful and easy to grasp. Models, Views, and Controllers gu
CakePHP File upload
Sep 10, 2024 pm 05:27 PM
To work on file upload we are going to use the form helper. Here, is an example for file upload.
How To Set Up Visual Studio Code (VS Code) for PHP Development
Dec 20, 2024 am 11:31 AM
Visual Studio Code, also known as VS Code, is a free source code editor — or integrated development environment (IDE) — available for all major operating systems. With a large collection of extensions for many programming languages, VS Code can be c
CakePHP Quick Guide
Sep 10, 2024 pm 05:27 PM
CakePHP is an open source MVC framework. It makes developing, deploying and maintaining applications much easier. CakePHP has a number of libraries to reduce the overload of most common tasks.
How do you parse and process HTML/XML in PHP?
Feb 07, 2025 am 11:57 AM
This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an
Explain JSON Web Tokens (JWT) and their use case in PHP APIs.
Apr 05, 2025 am 12:04 AM
JWT is an open standard based on JSON, used to securely transmit information between parties, mainly for identity authentication and information exchange. 1. JWT consists of three parts: Header, Payload and Signature. 2. The working principle of JWT includes three steps: generating JWT, verifying JWT and parsing Payload. 3. When using JWT for authentication in PHP, JWT can be generated and verified, and user role and permission information can be included in advanced usage. 4. Common errors include signature verification failure, token expiration, and payload oversized. Debugging skills include using debugging tools and logging. 5. Performance optimization and best practices include using appropriate signature algorithms, setting validity periods reasonably,
PHP Program to Count Vowels in a String
Feb 07, 2025 pm 12:12 PM
A string is a sequence of characters, including letters, numbers, and symbols. This tutorial will learn how to calculate the number of vowels in a given string in PHP using different methods. The vowels in English are a, e, i, o, u, and they can be uppercase or lowercase. What is a vowel? Vowels are alphabetic characters that represent a specific pronunciation. There are five vowels in English, including uppercase and lowercase: a, e, i, o, u Example 1 Input: String = "Tutorialspoint" Output: 6 explain The vowels in the string "Tutorialspoint" are u, o, i, a, o, i. There are 6 yuan in total
