Javascript实时柱状图实现代码

更新时间：2008年10月25日 01:52:38 作者：

js实现的实时柱状图,非常有创意的想法。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>实时柱状图</title> <style type="text/css"> span{ background-color:lime;font-size:1px;} </style> <script type="text/javascript"> var arr = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); function showimage() { var newdata = Math.ceil(Math.random()*200); //得到1-200之间的整数 arr = arr.slice(1); arr[99] = newdata; var str = ""; for(var i=0;i<arr.length;i++) { str += "<span style='width:4px;height:"+ arr[i] +"px'></span>"; } show.innerHTML = str ; span1.innerText = newdata; if(newdata>180)newdata=180 span2.style.height = newdata; window.setTimeout("showimage()",300); } //脚本之家 www.jb51.net </script> </head> <body bgcolor="black" style="color:white" onload="showimage()"> <table height="200" border="0px;" cellspacing="0" cellpadding="0"> <tr> <td width="20" valign="bottom" align="right"> <div style="height:90px;width:100%">200</div><div style="height:90px;width:100%">100</div><div style="height:20px;width:100%">0</div> </td> <td width="400" valign="bottom" id="show"></td> <td width="35" valign="bottom" align="center"> <span id="span1" style="width:100%;background-color:black;font-size:12px;">50</span> <span id="span2" style="width:10px;height:50px"></span> </td> </tr> </table> </body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JavaScript实现简易加法计算器
这篇文章主要介绍了JavaScript实现简易加法计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
JavaScript中boolean类型之三种情景实例代码
下面小编就为大家带来一篇JavaScript中boolean类型之三种情景实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
Three.js+React实现3D文字悬浮效果
这篇文章主要介绍了如何利用Three.js+React制作出神奇的3D文字悬浮效果，文中的示例代码讲解详细，感兴趣的小伙伴可以动手尝试一下
2022-03-03
js插件YprogressBar实现漂亮的进度条效果
ProgressBar.js 是一个借助动态 SVG 路径的漂亮的，响应式的进度条效果。使用 ProgressBar.js 可以很容易地创建任意形状的进度条。这个 JavaScript 库提供线条，圆形和方形等几个内置的形状，但你可使用 Illustrator 或任何其它的矢量图形编辑器创建自己的进度条效果。
2015-04-04
javascript 保存文件到本地实现方法
本文将提供两种方式保存图片，大家可以根据喜欢自由选择
2012-11-11
javascript实现类似于新浪微博搜索框弹出效果的方法
这篇文章主要介绍了javascript实现类似于新浪微博搜索框弹出效果的方法,涉及javascript弹出搜索框的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
JavaScript实现栈结构Stack过程详解
这篇文章主要介绍了JavaScript实现栈结构Stack过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-03-03
解析Javascript中中括号“[]”的多义性
这篇文章主要介绍了Javascript中中括号“[]”的多义性。需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
由JavaScript技术实现的web小游戏（不含网游）
伴随Ajax与网页游戏的崛起，曾几何时JavaScript也成了游戏开发时可供选择的技术之一，文本仅列举数项由JavaScript技术实现的web小游戏（不含网游），聊作参考之用。
2010-06-06
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
这篇文章主要介绍了《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法,需要的朋友可以参考下
2015-01-01