jquery实现的网页计数器
需求背景:门户网站特别是商务型网站实时统计加入某项活动的人数:
前端效果设计:根据访问的实时人数将数字实时反映到列表上,用的元素是 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>
<em t="1">1</em> <em t="2">2</em> <em t="3">3</em> <em t="4">4</em>
<em t="5">5</em> <em t="6">6</em> <em t="7">7</em> <em t="8">8</em><em t="9">9</em><em t="0">0</em>
</cite>
</li>
<li class="item">
<cite>
<em t="1">1</em> <em t="2">2</em> <em t="3">3</em> <em t="4">4</em>
<em t="5">5</em> <em t="6">6</em> <em t="7">7</em> <em t="8">8</em><em t="9">9</em><em t="0">0</em>
</cite>
</li>
<li class="item">
<cite>
<em t="1">1</em> <em t="2">2</em> <em t="3">3</em> <em t="4">4</em>
<em t="5">5</em> <em t="6">6</em> <em t="7">7</em> <em t="8">8</em><em t="9">9</em><em t="0">0</em>
</cite>
</li>
<li> <span>,</span></li>
<li class="item">
<cite>
<em t="1">1</em> <em t="2">2</em> <em t="3">3</em> <em t="4">4</em>
<em t="5">5</em> <em t="6">6</em> <em t="7">7</em> <em t="8">8</em><em t="9">9</em><em t="0">0</em>
</cite>
</li>
<li class="item">
<cite>
<em t="1">1</em> <em t="2">2</em> <em t="3">3</em> <em t="4">4</em>
<em t="5">5</em> <em t="6">6</em> <em t="7">7</em> <em t="8">8</em><em t="9">9</em><em t="0">0</em>
</cite>
</li>
<li class="item">
<cite>
<em t="1">1</em> <em t="2">2</em> <em t="3">3</em> <em t="4">4</em>
<em t="5">5</em> <em t="6">6</em> <em t="7">7</em> <em t="8">8</em><em t="9">9</em><em t="0">0</em>
</cite>
</li>
<li> , </li>
<li class="item">
<cite>
<em t="1">1</em> <em t="2">2</em> <em t="3">3</em> <em t="4">4</em>
<em t="5">5</em> <em t="6">6</em> <em t="7">7</em> <em t="8">8</em><em t="9">9</em><em t="0">0</em>
</cite>
</li>
<li class="item">
<cite>
<em t="1">1</em> <em t="2">2</em> <em t="3">3</em> <em t="4">4</em>
<em t="5">5</em> <em t="6">6</em> <em t="7">7</em> <em t="8">8</em><em t="9">9</em><em t="0">0</em>
</cite>
</li>
<li class="item">
<cite>
<em t="1">1</em> <em t="2">2</em> <em t="3">3</em> <em t="4">4</em>
<em t="5">5</em> <em t="6">6</em> <em t="7">7</em> <em t="8">8</em><em t="9">9</em><em t="0">0</em>
</cite>
</li>
</ul>
</body>
</html>
jquery实现的网页计数器相关推荐
- 网页计数器_更好的网页阅读时间计数器,第1部分
网页计数器 A reading time estimator has been at the top of every article on this site for several years. ...
- 竖直菜单 html,jQuery实现的网页竖向菜单效果代码
本文实例讲述了jQuery实现的网页竖向菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现竖向的网页菜单代码,可折叠展开的二级网页菜单,修改一下可用在后台管理中,显示在左侧的 ...
- 使用ServletContext对象完成网页计数器
使用ServletContext对象完成网页计数器 * 在用户登录校验中创建计数器并自增,然后存储到ServletContext对象中 * 在主页面里取出计数器数据显示给 ...
- PHP案例 网页计数器设计
原文[下载/浏览]:http://www.xilinjie.com/university/125 内容介绍 一.概述 网页计数器是用来统计网站的访问次数并把结果公布在访问的网页上的.它是让Web访问者 ...
- JQuery 定期刷新网页,保持登录状态Session
前言 360极速浏览器 13.0.2206.0 (正式版本) (32 位) 操作系统 Windows 10 OS Version 1909 (Build 18363.1379) JavaScript ...
- jQuery版本的网页开关灯、jQuery版本网页开关灯的另一种写法
jQuery版本的网页开关灯 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
- 国外常用的jQuery响应式网页模板
简介: jQuery响应式网页,外国网站常用的风格 网盘下载地址: http://kekewangLuo.cc/LQpN52cS37a0 图片:
- application实现一个简单的网页计数器
该篇文章首发于我的个人博客:http://cherryblog.site/ 使用github+coding+hexo搭建的静态博客,更多文章请移步至我的个人博客 application(应用对象):存 ...
- [JSP] 利用application来写一个网页计数器
利用application写一个网页计数器 实现这一应用, 要用到application下面的两个方法: application.setAttribute() 和 application.getAtt ...
最新文章
- 赠书 | 详解 4 种爬虫技术
- 第一篇:UnicodeDecodeError: ‘utf-8‘ codec can‘t decode byte 0xc3 in position 0: invalid continuation byt
- Unity3D 多平台 预编译 宏定义
- 使用Pandas进行变量衍生
- TCP/IP学习——利用主机IP与子网掩码计算网络号
- What?你还搞不懂什么是物体检测?
- 『实践』Matlab实现Flyod求最短距离及存储最优路径
- golang java耗内存_分析golang内存占用情况
- 90%的人都做错的用户画像,到底应该怎么做?
- php数字转千分制,JS实现金额千分制的转换以及还原
- python3+ selenium3开发环境搭建-手把手教你安装python(详细)
- ArcGIS API for Silverlight开发入门(0):为什么要用Silverlight API?
- 线上解决Resin服务响应过慢的几个方法(转)
- Raki的读paper小记:EDA: Easy Data Augmentation Techniques for Boosting Performance on Text Classification
- 安装配置管理 之 NVIDIA nForce Linux Drivers 集成声网卡和声卡的安装说明
- 网站推广优化教程100条(完整版)
- 迪斯科算法_为什么迪斯科极乐世界如此可重播
- 【C语言】案例十六:掷骰子(随机数)
- VS2015中更改项目名称
- 古体字与简体字对照表_常用繁体字与简体字对照表
热门文章
- Oracle 11.2.0.3 ORA-12012 ORA-29280 ORA-06512 错误 解决方法
- python语句结束符号_Python从文本中提取hashtags;以标点符号结尾
- DDR和MIG使用小结
- idea如何连接达梦数据库
- [胡说八道]我的时间我做主——读《小强升职记》有感
- RN 与 Android 代码交互
- jinja2.exceptions.TemplateNotFound 报错处理
- 基于人本理念的绩效管理体系设计(一)
- [Java]Java文件读写
- 线程中断:interrupt、interrupted、isInterrupted