模拟仪表是一种带有针的仪器,您可以在数字刻度上移动。这种仪器是用 javascript 模拟的,您可以轻松地在网页中使用它。You 可以根据需要配置它,并将数字刻度设置为测量单位.自定义仪表外观,模拟车速表、仪表等。
用法
首先在您的 .html 文件中添加一个 div。
<div id='gaugeDiv' style="width: 750px; height: 700px;background-color: rgb(145, 145, 145); "></div>
接下来加载 Javascript 文件。
<script src='gauge.js' ></script>
接下来创建 Gauge 的实例并给出 div 的 id。
var gKm = new Gauge('gaugeDiv'); // gKm instance
现在根据需要自定义仪表。
例子:
gKm.Scale(1.8,1.5); // size scale of gauge
gKm.Position(-10,0); // position in div element
gKm.MinValue=0; // min number to measure
gKm.MaxValue=220; // max number to measure
gKm.StartPos=-140; // start position min number
gKm.EndPos=140; // start position max number
gKm.Numbers=12; // counter number to displayed
gKm.Text='Km/h'; // text to display
gKm.FontSize=10; // size of numbers and text
gKm.NumberColor='#ffffff';
gKm.BackColor='#111111';
gKm.OutlineColor='#dd4433';
gKm.NeedleColor='#ffffff';
gKm.SetValue=120; // the needle moves to 120
gKm.MoveTime=.3; // move time from one position to another in seconds.(Default is .7 sec)
只有帆布。
不依赖于其他插件。
兼容浏览器:Edge、Chrome、Firefox、Opera