这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript 实现动态统计图开发实例,需要的朋友可以参考下
本文实例讲述了 javascript 实现动态统计图的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:
具体代码如下 html 代码:
- <div id="content">
- <div class="legend">
- <h1>
- 汽车销量:
- </h1>
- <div class="skills">
- <ul>
- <li class="jq">
- 大众
- </li>
- <li class="CSS">
- 丰田
- </li>
- <li class="html">
- 别克
- </li>
- <li class="php">
- 福特
- </li>
- <li class="sql">
- 长安
- </li>
- </ul>
- </div>
- </div>
- <div id="diagram">
- </div>
- </div>
- <div class="get">
- <div class="arc">
- <span class="text">
- 大众
- </span>
- <input type="hidden" class="percent" value="95" />
- <input type="hidden" class="color" value="#97BE0D" />
- </div>
- <div class="arc">
- <span class="text">
- 丰田
- </span>
- <input type="hidden" class="percent" value="90" />
- <input type="hidden" class="color" value="#D84F5F" />
- </div>
- <div class="arc">
- <span class="text">
- 别克
- </span>
- <input type="hidden" class="percent" value="80" />
- <input type="hidden" class="color" value="#88B8E6" />
- </div>
- <div class="arc">
- <span class="text">
- 福特
- </span>
- <input type="hidden" class="percent" value="53" />
- <input type="hidden" class="color" value="#BEDBE9" />
- </div>
- <div class="arc">
- <span class="text">
- 长安
- </span>
- <input type="hidden" class="percent" value="45" />
- <input type="hidden" class="color" value="#EDEBEE" />
- </div>
- </div>
css 代码:
- #content {
- position:absolute;
- top:50%;
- left:50%;
- margin:-340px 0 0 -450px;
- width:900px;
- height:600px;
- }
- .legend {
- float:left;
- width:250px;
- margin-top:140px;
- }
- #content h1 {
- font-family:'Cabin Sketch', arial, serif;
- text-shadow:3px 3px 0 #ddd;
- color:#193340;
- font-size:40px;
- margin-bottom:40px;
- text-align:right;
- }
- .skills {
- float:left;
- clear:both;
- width:100%;
- }
- .skills ul,
- .skills li {
- display:block;
- list-style:none;
- margin:0;
- padding:0;
- }
- .skills li {
- float:right;
- clear:both;
- padding:0 15px;
- height:35px;
- line-height:35px;
- color:#fff;
- margin-bottom:1px;
- font-size:18px;
- }
js 代码:
- var o = {
- init: function() {
- this.diagram();
- },
- random: function(l, u) {
- return Math.floor((Math.random() * (u - l + 1)) + l);
- },
- diagram: function() {
- var r = Raphael('diagram', 600, 600),
- rad = 73;
- r.circle(300, 300, 85).attr({
- stroke: 'none',
- fill: '#193340'
- });
- var title = r.text(300, 300, 'loading...').attr({
- font: '20px Arial',
- fill: '#fff'
- }).toFront();
- r.customAttributes.arc = function(value, color, rad) {
- var v = 3.6 * value,
- alpha = v == 360 ? 359.99 : v,
- random = o.random(91, 240),
- a = (random - alpha) * Math.PI / 180,
- b = random * Math.PI / 180,
- sx = 300 + rad * Math.cos(b),
- sy = 300 - rad * Math.sin(b),
- x = 300 + rad * Math.cos(a),
- y = 300 - rad * Math.sin(a),
- path = [['M', sx, sy], ['A', rad, rad, 0, +(alpha > 180), 1, x, y]];
- return {
- path: path,
- stroke: color
- }
- }
- $('.get').find('.arc').each(function(i) {
- var t = $(this),
- color = t.find('.color').val(),
- value = t.find('.percent').val(),
- text = t.find('.text').text();
- rad += 30;
- var z = r.path().attr({
- arc: [value, color, rad],
- 'stroke-width': 26
- });
- z.mouseover(function() {
- this.animate({
- 'stroke-width': 50,
- opacity: .75
- },
- 1000, 'elastic');
- if (Raphael.type != 'VML') //solves IE problem
- this.toFront();
- title.animate({
- opacity: 0
- },
- 500, '>',
- function() {
- this.attr({
- text: text + '\n' + value + '%'
- }).animate({
- opacity: 1
- },
- 500, '<');
- });
- }).mouseout(function() {
- this.animate({
- 'stroke-width': 26,
- opacity: 1
- },
- 1000, 'elastic');
- });
- });
- }
- }
- $(function() {
- o.init();
- });
希望本文所述对大家学习 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0411/268588.html