这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
js 实现的实时柱状图, 非常有创意的想法。
[Ctrl+A 全选 注:
- <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);
- }
- //phperz 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>
- 200
- </div>
- <div>
- 100
- </div>
- <div>
- 0
- </div>
- </td>
- <td width="400" valign="bottom" id="show">
- </td>
- <td width="35" valign="bottom" align="center">
- 50
- </td>
- </tr>
- </table>
- </body>
- </html>
如需引入外部 Js 需刷新才能执行
]来源: http://www.phperz.com/article/17/0415/287816.html