jquery實現的網頁計數器，jquery網頁計數器

最後更新：2015-05-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

需求背景：門戶網站特別是商務型網站即時統計加入某項活動的人數：

前端效果設計：根據訪問的即時人數將數字即時反映到列表上,用的元素是 cite em ,用jquery效果控制數字畫面即時翻轉的效果。

代碼：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript" src="jquery-2.1.1.js">
</script>
<style>
ul{
position: absolute;
z-index: 1000;
height: 30px;

overflow: hidden;
list-style-type: none;
}
ul li{

float:right;
margin: 0 10px;
}
.item{
border: solid thin #808080;
text-align: center;
display: block;
line-height:28px;

width: 18px;
height: 28px;
}
.item em{

font-family: "Times New Roman",Georgia,Serif;
;
font-size: 18pt;
font-weight: bold;
color: #ff0000;
background-color: #ffffff;
}
</style>
<script type="text/javascript">
var total,total_arr1;
function init() {
total = 100000000;
total_arr1 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
for (var k = 0; k < 9; k++) {
for (var j = 1; j < 10; j++) {

$("em[t=" + j + "]:eq(" + k + ")").fadeOut();
}
}
}
function flush() {

var one = total % 10; //個位
var two = Math.floor(total % 100 / 10); //十位
var thr = Math.floor(total % 1000 / 100); //百位
var fou = Math.floor(total % 10000 / 1000); //千位
var fiv = Math.floor(total % 100000 / 10000); //萬位
var six = Math.floor(total % 1000000 / 100000); //十萬位
var sev = Math.floor(total % 10000000 / 1000000); //
var eig = Math.floor(total % 100000000 / 10000000);
var nig = Math.floor(total % 1000000000 / 100000000);
var arr = [one, two, thr, fou, fiv, six, sev, eig, nig]; //用一數組將這九個數字表示的九個位存起來,從左至右依次個位。。。

for (var i = 0; i < 9; i++) {
while(total_arr1[i]!=arr[i]){ //用arr1儲存的當前位的數字，當與新的數字不同時，從當前數字開始依次遞增翻轉數字，直到匹配時停止遍曆
$("em[t="+total_arr1[i]+"]:eq("+i+")").fadeOut();
total_arr1[i]=(total_arr1[i]+1)%10;
$("em[t="+total_arr1[i]+"]:eq("+i+")").slideToggle();

}
}

}
function add(){
total++;
if(total==999999999){
total=0;
}
}

$(document).ready(function(){
init();
window.setInterval('add()',100);
var result=window.setInterval('flush()',2000);
});
</script>
</head>
<body>

<ul>
<li class="item">
<cite>
1 2 3 4
5 6 7 890
</cite>
</li>
<li class="item">
<cite>
1 2 3 4
5 6 7 890
</cite>
</li>
<li class="item">
<cite>
1 2 3 4
5 6 7 890
</cite>
</li>
<li> ,</li>
<li class="item">
<cite>
1 2 3 4
5 6 7 890
</cite>
</li>
<li class="item">
<cite>
1 2 3 4
5 6 7 890
</cite>
</li>
<li class="item">
<cite>
1 2 3 4
5 6 7 890
</cite>
</li>
<li> , </li>
<li class="item">
<cite>
1 2 3 4
5 6 7 890
</cite>
</li>
<li class="item">
<cite>
1 2 3 4
5 6 7 890
</cite>
</li>
<li class="item">
<cite>
1 2 3 4
5 6 7 890
</cite>
</li>
</ul>

</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More