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需再刷新一下页面才能执行]

您可能感兴趣的文章:

Node.js API详解之 zlib模块用法分析
这篇文章主要介绍了Node.js API详解之 zlib模块用法,结合实例形式分析了Node.js API中zlib模块基本功能、函数使用方法与操作注意事项,需要的朋友可以参考下
2020-05-05
基于Asp.net与Javascript控制的日期控件
使用Asp.net+Javascript控制的日期控件，需要的朋友可以参考下。
2010-05-05
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
这篇文章主要介绍了推荐三款日期选择插件，My97DatePicker、用于PC端的jquery.datepicker，以及专注于移动端的Mobiscroll，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
前端处理二进制流文件导出为excel表代码示例
这篇文章主要给大家介绍了关于前端处理二进制流文件导出为excel表的相关资料,后台管理系统,常会出现导出excel表格功能,需要的朋友可以参考下
2023-08-08
微信小程序实现录音功能
这篇文章主要为大家详细介绍了微信小程序实现录音功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
这篇文章主要介绍了JavaScript+html5 canvas绘制缤纷多彩的三角形效果,以完整实例形式分析了html5的canvas绘制图形的相关技巧,需要的朋友可以参考下
2016-01-01
JavaScript数据结构之二叉树的删除算法示例
这篇文章主要介绍了JavaScript数据结构之二叉树的删除算法,简单分析了javascript删除数据结构中二叉树节点时所遇到的各种情况与相关的处理原理与算法实现技巧,需要的朋友可以参考下
2017-04-04
JavaScript中字符串分割函数split用法实例
这篇文章主要介绍了JavaScript中字符串分割函数split用法,实例分析了javascript中split函数操作字符串的技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
JavaScript文件上传功能详解与实现过程
现代Web开发中,文件上传一般通过JavaScript来处理,以便实现更好的用户体验,如异步上传(AJAX)、进度条显示等,这篇文章主要介绍了JavaScript文件上传功能详解与实现过程的相关资料,需要的朋友可以参考下
2025-04-04
PHP配置文件php.ini中打开错误报告的设置方法
这篇文章主要介绍了PHP配置文件php.ini中打开错误报告的设置方法,需要的朋友可以参考下
2015-01-01

Javascript实时柱状图实现代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具