关于超棒的仪表盘javascript类库-justGage

2023-12-20 分类：网站建设

今天这里我们再介绍一款兼容性更好的动画仪表盘javascript类库：JustGage，这个类库基于著名的绘图类库Raphaël ，能够提供更好的绘图兼容性。

支持浏览器

几乎支持所有的浏览器，包括：

IE6+

Chrome

Firefox

Safari

Opera

Android

其它

如何使用

使用非常简单，首先导入Raphaël和JustGage的类库，如下：

<script src="js/raphael.2.1.0.min.js"></script> <script src="js/justgage.1.0.1.min.js"></script>

调用js生成一个新的仪表盘：

var g1 = new JustGage({ id: "g1", value: getRandomInt(0, 30), min: 0, max: 100, title: "Speedometer", label: "km/h", levelColors: [ "#222222", "#555555", "#CCCCCC" ] });

这里调用了一些常用的参数，你可以设置相关仪表盘属性。

完整代码如下：

<!doctype html>

<html> <head> <title>JustGage Demo By GBin1.com</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> body { text-align: center; font-family: Arial; }

#g1 { width:400px; height:320px; display: inline-block; margin: 1em; border: 1px soild #202020; box-shadow: 0px 0px 15px #101010; margin-top: 120px; border-radius: 8px; }

p { display: block; width: 400px; margin: 2em auto; text-align: center; border-top: 1px soild #CCC; border-bottom: 1px soild #CCC; background: #333333; padding:10px 0px; color: #CCC; text-shadow: 1px 1px 25px #000000; border-radius: 0px 0px 5px 5px; box-shadow: 0px 0px 10px #202020; } </style>

<script src="js/raphael.2.1.0.min.js"></script> <script src="js/justgage.1.0.1.min.js"></script> <script> var g1;

window.onload = function(){ var g1 = new JustGage({ id: "g1", value: getRandomInt(0, 30), min: 0, max: 100, title: "Speedometer", label: "km/h", levelColors: [ "#222222", "#555555", "#CCCCCC" ] });

setInterval(function() { g1.refresh(getRandomInt(80, 100)); }, 800); }; </script> </head> <body> <div id="g1"></div> <p> super cool speedometer demo by gbin1.com</p> </body> </html>

使用是不是非常简单，希望大家喜欢这个类库。

本文来自成都品牌网站建设网站设计公司-创新互联

网站栏目：关于超棒的仪表盘javascript类库-justGage
文章网址：https://www.cdcxhl.com/news45/309495.html

成都网站建设公司_创新互联，为您提供域名注册、ChatGPT、移动网站建设、网站建设、云服务器、服务器托管

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容