<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY style="background:#E78CF5;">
<div id = "counterArea" style="position:absolute;left:450px;top:40px;"></div>
<div id="TB_1" STYLE="position:absolute;left:50px;bottom:95px;">
<TABLE STYLE="width:430px">
<TR>
<TD>
媒体：<select ><option value='1'>上海<option value='1'>北京<option value='1'>湖北</select>
</TD>
<TD>
频道：<select ><option value='1'>随心看<option value='1'>彩票</select>
</TD>
</TR>
<TR>
<TD colspan=2>
<TABLE STYLE="BORDER:1PX SOLID #F57F3E;width:420px;">
<Th>广告位</Th>
<Th>累积访客</Th>
<Th>累积访次</Th>
<Th>今日访客</Th>
<Th>今日访次</Th>
<TR>
<TD>SXK_AAA_001</TD>
<TD>1000</TD>
<TD>3000</TD>
<TD>100</TD>
<TD>300</TD>
</TR>
<TR>
<TD>SXK_AAA_002</TD>
<TD>1000</TD>
<TD>3000</TD>
<TD>100</TD>
<TD>300</TD>
</TR>
<TR>
<TD>SXK_BBB_002</TD>
<TD>1500</TD>
<TD>3500</TD>
<TD>100</TD>
<TD>300</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</div>
<div id="barArea" style="position:absolute;left:500px;bottom:95px;">
</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var moveArr = new Array();
var counter = 0;
var counterUser = 0;
function moveDiv(id){
var d = document.getElementById(id);
var l = d.offsetLeft;
var t = d.offsetTop;
var w = d.clientWidth;
var h = d.clientHeight;
var r = Math.round(Math.random()*10);
var r2 = Math.round(Math.random()*10);
//alert(l+" "+t+" "+r);
var k = id%2;
var nl = l-r;
if(k == 0){
var nl = l+r;
}
var nt = t-r2;
var nh = h+r;
var nw = w+r2;
if(nh>250){
nh = nh - r2;
}
if(nw>350){
nw = nw - r;
}
//alert(h+" "+w +" "+nl+" "+nt);
if(k==1 && (nl<20 || nt<20) ){
var r3 = Math.round(Math.random()*10);
d.style.left = (nl+r3)+"px";
d.style.top = (nt+r3)+"px";
}else if(k==0 && (nl>950 || nt<20)){
var r3 = Math.round(Math.random()*10);
d.style.left = (nl-r3)+"px";
}else{
d.style.width = nw+"px";
d.style.height = nh +"px";
d.style.left = nl+"px";
d.style.top = nt+"px";
}
}
//moveDiv();
//var move = setInterval(moveDiv,100);
function move(){
var id = Math.round(Math.random()*100000);
var date = new Date();
var colors = "1895F5,F53473,F57F3E,76F55D,15F51A,2548F5,8920F5,F526DF,371208,073715".split(",");
var r = Math.round(Math.random()*10);
var r2 = Math.round(Math.random()*10);
var names = "张三,李四,王五,赵六,陈小二,钱七,刘八,林一,孙九,史十".split(",");
var value = "<font color='#"+colors[r]+"'>"+names[r]+r+"<br>点击了<br>彩票广告"+r2+"：<br>"+ date.pattern("yyyy-MM-dd hh:mm:ss")+"</font><img src='ad"+r2+".jpg' width='40px' height='40px'>" ;
var d = document.createElement("<div id='"+id+"' style='position:absolute;width:173px;height:226px;left:600px;bottom:20px;border:0px solid red;'>1212121212</div>");
//d = document.createElement("div");
//d.innerHTML = "<font>"+value+"</font>";
d.innerHTML = "<div style='width:173px;height:226px;background:url(popo6.gif) no-repeat;padding:30px 30px 30px 30px;'>"+value+"</div>";
document.body.appendChild(d);
var obj = setInterval("moveDiv('"+id+"')",100);
moveArr[moveArr.length-1] = obj;
timeoutClear(obj,id);
}
function clearInt(obj,id){
clearInterval(obj);
var d = document.getElementById(id);
document.body.removeChild(d);
}
function timeoutClear(obj,id){
setTimeout("clearInt("+obj+","+id+")",15000);
}
function timeoutMove(){
counter ++;
counterUser ++;
document.getElementById("counterArea").innerHTML = "<font size='6px' color='#8920F5'><b>总访问人数为： " +counterUser+"</b><br></font>"+"<font size='6px' color='#8920F5'><b>总访问次数为： " +counter+"</b></font>";
setTimeout(move,1000);
}
setInterval(timeoutMove,5000);
var barVals = "200_1895F5_F53473,98_F57F3E,140_76F55D,180_15F51A,250_2548F5,230_8920F5,198_F526DF,220_F526DF,230_371208,290_073715,320_F5EA8A,290_74F5E1,230_917EAA";
var barArr = barVals.split(",");
function createBar(){
var colors = "1895F5,F53473,F57F3E,76F55D,15F51A,2548F5,8920F5,F526DF,371208,073715,F5EA8A,74F5E1,917EAA".split(",");
var r2 = Math.round(Math.random()*10);
var r3 = Math.round(Math.random()*500);
barVals = barVals.substring(barVals.indexOf(",")+1)+","+r3+"_"+colors[r2];
barArr = barVals.split(",");
document.getElementById("barArea").innerHTML = "";
for(var i=0;i<barArr.length-1;i++){
var value = barArr[i].substring(0,barArr[i].indexOf("_"));
var color = barArr[i].substring(barArr[i].indexOf("_")+1);
var span = document.createElement("<span id='bar"+i+"' style='width:30px;height:"+value+"px;background:#"+color+";border-bottom:1px solid #073715;'></span>");
var spaceSpan = document.createElement("<span style='width:10px;border-bottom:1px solid #073715;'></span>");
span.innerHTML = value;
document.getElementById("barArea").appendChild(span);
document.getElementById("barArea").appendChild(spaceSpan);
}
var lastBar = barArr[barArr.length-1];
var value = lastBar.substring(0,lastBar.indexOf("_"));
var color = lastBar.substring(lastBar.indexOf("_")+1);
var span = document.createElement("<span id='bar"+i+"' style='width:30px;height:1px;background:#"+color+";border-bottom:1px solid #073715;'></span>");
var spaceSpan = document.createElement("<span style='width:10px;border-bottom:1px solid #073715;'></span>");
document.getElementById("barArea").appendChild(span);
var barId = "bar"+(barArr.length-1)
var interObj = setInterval("growBar('"+barId+"',"+value+")",80);
timeoutClearGrow(interObj);
}
function growBar(barId,value){
var bar = document.getElementById(barId);
var h = bar.clientHeight;
if(h<value){
bar.style.height = h+5+"px";
bar.innerHTML = h+5;
}
}
setInterval(createBar,5000);
function clearGrow(obj){
clearInterval(obj);
}
function timeoutClearGrow(obj){
setTimeout("clearInterval("+obj+")",5000);
}
Date.prototype.pattern=function(fmt) {
var o = {
"M+" : this.getMonth()+1, //月u20221
"d+" : this.getDate(), //日
"h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小u26102
"H+" : this.getHours(), //小u26102
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季u24230
"S" : this.getMilliseconds() //毫u31186
};
var week = {
"0" : "\u65e5",
"1" : "\u4e00",
"2" : "\u4e8c",
"3" : "\u4e09",
"4" : "\u56db",
"5" : "\u4e94",
"6" : "\u516d"
};
if(/(y+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
if(/(E+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "\u661f\u671f" : "\u5468") : "")+week[this.getDay()+""]);
}
for(var k in o){
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
}
//-->
</SCRIPT>
</BODY>
</HTML>其实也没什么，就是有点好玩，希望大家喜欢
泡泡会随机移动，柱状会动态增长。
注：所有数据写死，大家可以用ajax更新数据
1 楼
ity2011
2011-07-01
2 楼
strongspeed
2011-07-01
linxiao
3 楼
strongspeed
2011-07-01
