jquery实现的网页计数器

需求背景：门户网站特别是商务型网站实时统计加入某项活动的人数：

前端效果设计：根据访问的实时人数将数字实时反映到列表上,用的元素是 cite em ,用jquery效果控制数字画面实时翻转的效果。

代码：

<!doctype html>

<head>

<title>Document</title>

</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;

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>

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++) {

switch (arr[i]) {

case 1:

while(total_arr1[i]!=1){ //用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();

}

break;

case 2:

while(total_arr1[i]!=2){

$("em[t="+total_arr1[i]+"]:eq("+i+")").fadeOut();

total_arr1[i]=(total_arr1[i]+1)%10;

$("em[t="+total_arr1[i]+"]:eq("+i+")").slideToggle();

}

break;

case 3:

while(total_arr1[i]!=3){

$("em[t="+total_arr1[i]+"]:eq("+i+")").fadeOut();

total_arr1[i]=(total_arr1[i]+1)%10;

$("em[t="+total_arr1[i]+"]:eq("+i+")").slideToggle();

}

break;

case 4:

while(total_arr1[i]!=4){

$("em[t="+total_arr1[i]+"]:eq("+i+")").fadeOut();

total_arr1[i]=(total_arr1[i]+1)%10;

$("em[t="+total_arr1[i]+"]:eq("+i+")").slideToggle();

} //将当次的数字编号保存进数组arr1[i]中

break;

case 5:

while(total_arr1[i]!=5){

$("em[t="+total_arr1[i]+"]:eq("+i+")").fadeOut();

total_arr1[i]=(total_arr1[i]+1)%10;

$("em[t="+total_arr1[i]+"]:eq("+i+")").slideToggle();

}

break;

case 6:

while(total_arr1[i]!=6){

$("em[t="+total_arr1[i]+"]:eq("+i+")").fadeOut();

total_arr1[i]=(total_arr1[i]+1)%10;

$("em[t="+total_arr1[i]+"]:eq("+i+")").slideToggle();

}

break;

case 7:

while(total_arr1[i]!=7){

$("em[t="+total_arr1[i]+"]:eq("+i+")").fadeOut();

total_arr1[i]=(total_arr1[i]+1)%10;

$("em[t="+total_arr1[i]+"]:eq("+i+")").slideToggle();

}

break;

case 8:

while(total_arr1[i]!=8){

$("em[t="+total_arr1[i]+"]:eq("+i+")").fadeOut();

total_arr1[i]=(total_arr1[i]+1)%10;

$("em[t="+total_arr1[i]+"]:eq("+i+")").slideToggle();

}

break;

case 9:

while(total_arr1[i]!=9){

$("em[t="+total_arr1[i]+"]:eq("+i+")").fadeOut();

total_arr1[i]=(total_arr1[i]+1)%10;

$("em[t="+total_arr1[i]+"]:eq("+i+")").slideToggle();

}

break;

case 0:

while(total_arr1[i]!=0){

$("em[t="+total_arr1[i]+"]:eq("+i+")").fadeOut();

total_arr1[i]=(total_arr1[i]+1)%10;

$("em[t="+total_arr1[i]+"]:eq("+i+")").slideToggle();

}

break;

default :

break;

}

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>

<cite>

1 2 3 4

5 6 7 890

</cite>

</li>

<cite>

1 2 3 4

5 6 7 890

</cite>

</li>

<cite>

1 2 3 4

5 6 7 890

</cite>

</li>

<cite>

1 2 3 4

5 6 7 890

</cite>

</li>

<cite>

1 2 3 4

5 6 7 890

</cite>

</li>

<cite>

1 2 3 4

5 6 7 890

</cite>

</li>

<cite>

1 2 3 4

5 6 7 890

</cite>

</li>

<cite>

1 2 3 4

5 6 7 890

</cite>

</li>

<cite>

1 2 3 4

5 6 7 890

</cite>

</li>

</ul>

</body>

</html>

时间： 2025-01-04 16:49:34

jquery实现的网页计数器的相关文章

借助Jquery Jqprint实现网页打印功能

今天利用闲余时间研究了一下Jquery Jqprint插件,使用该Jquery脚本可以轻而易举的实现打印网页指定区域内容的功能: 例子一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

jquery.mobile手机网页简要

先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应用程序开发框架推荐最终选择的是 jQuery Mobile ,官方地址:http://jquerymobile.com jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架.能工作在现有主流的智能手机和平板电脑上,且构建于 jQuery 以及 jQuery UI类库之上,用极少的

jQuery实现高亮显示网页关键词的方法

本文实例讲述了jQuery实现高亮显示网页关键词的方法.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的高亮显示网页上搜索关键词的代码,当你在文本框中输入的时候,如果下面的正文中包括你输入的内容,也就是关键字,那么这些关键字是会高亮显示的,被动态添加成黄色,看上去很醒目,就像百度快照显示关键词的样子. 运行效果如下图所示: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" cont

jquery javascript获得网页的高度和宽度

javascript 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth网页正文全文高: document.body.sc

jquery入门修改网页背景颜色

我们在浏览一些网站,尤其是一些小说网站的时候,都会有修改页面背景颜色的地方,这个功能使用jquery很容易实现. 效果图: show you code: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery test</title> <script src="jquery-1.11.1.min.js">&

用网页计数器来说明application和session

jsp的代码: 1 <body> 2 <h1>网页计数器</h1> 3 <% 4 //第一次访问数据为空 5 Object obj=application.getAttribute("count"); 6 7 //用户第一次访问 8 if(obj==null){ 9 application.setAttribute("count",1); 10 }else {//非第一次访问 11 Integer num=(Integer)

jQuery中常用网页效果应用

一.常用网页效果应用 1.表单应用表单由表单标签.表单域和表单按钮组成. 1.1单行文本框应用例:获取和失去焦点改变样式首先,在网页中创建一个表单,HTML代码如下 <form action="" method="post" id="regForm"> <fieldset> <legend>个人基本信息</legend> <div> <label for="user

【jQuery】对网页节点的增删改查

本文与<[JavaScript]网页节点的增删改查>(点击打开链接)为姊妹篇,其实JavaScript对DOM的操作已经总结了很久的,而对于jQuery对网页节点的操作,虽然一直在用,但一直没有好好总结一下,实在是不应该. 下面举同样的例子来说明这个问题: 如上图,提供3个按钮,1个下拉列表,1个输入框,提供增删改查的操作. 网页中最多10个节点,最少0个节点,多了不让加,少了不让减. 首先是本网页的基本布局: <!DOCTYPE HTML PUBLIC "-//W3C//DT

jQuery,javascript获得网页的高度和宽度$(document).height / $(window).height

一.javascript 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWidth 网页正文全文高: document.body.scrollHeight 网页被卷去的