js实现是演示报表特效
<!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>
