Javascript实时柱状图实现代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Javascript实时柱状图实现代码

Javascript: javascript radio list的实现细节(多浏览器兼容); IE在DOM操作有表单控件时的bug; trim原型函数看js正则表达式的性能; js 禁用浏览器的后退功能的简单方法; IE和Firefox下javascript的兼容写法小结; 兼容ie和firefox js关闭代码; 用tip解决Ext列宽度不够的问题; firefox getyear() getFullYear数获取年份的问题; javascript iFrame研究; FLASH 广告之外的链接; firefox TBODY 用js显示和隐藏时出现错位的解决方法; Javascript 获取LI里的内容; 比较全的JS checkbox全选、取消全选、删除功能代码; JS checkbox控制操作代码; document.all与getElementById、getElementsByName、getElementsByTagName用法区别-document.all; document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById; 简单通用的JS滑动门代码; Javascript select控件操作大全（新增、修改、删除、选中、清空、判断存在等）; js 提交和设置表单的值; flash javascript之间的通讯方法小结

No. « ‹ 120 121 122 123 › »

技术文章搜索

关键字

Javascript实时柱状图实现代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 389 ::

收藏到网摘: n/a

利用递增的数字返回循环渐变的颜色的js代码 JS实现即点即编辑功能代码

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.ruanchen.com
</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代码 JS实现即点即编辑功能代码

Javascript实时柱状图实现代码

评论 (0) All