js实现是演示报表特效

alex.Lin

浏览: 65005 次
性别:
来自: 上海

最近访客更多访客>>

topcloud

NigelChow

promiseloney

kencsdn

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

<!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更新数据