jQuery插件可以帮助您创建一个动画化的、高度可定制的速度表,表示您在输入字段中键入的数字。
基于jQuery和CSS3转换和转换。不需要图像。
1.将jQuery库与速度计.css
和速度计.js
在文档中。
- <link href="css/speedometer.css" rel="stylesheet">
- <script src="/path/to/cdn/jquery.min.js"></script>
- <script src="js/speedometer.js"></script>
2.在文档中创建一个输入字段。
- <input id="demo">
3.初始化插件。该插件将自动呈现一个附加到您刚刚创建的输入的速度表。
- $("#demo").speedometer({
- divFact:10
- });
4.所有默认设置。
- $("#demo").speedometer({
- /**Max value of the meter*/
- maxVal : 180,
- /**Division value of the meter*/
- divFact : 10,
- /**more than this leval, color will be red*/
- dangerLevel : 120,
- /**reading begins angle*/
- initDeg : -45,
- /**total angle of the meter reading*/
- maxDeg : 270,
- /**radius of the meter circle*/
- edgeRadius : 150,
- /**speed nobe height*/
- speedNobeH : 4,
- /**speed nobe width*/
- speedoNobeW : 95,
- /**speed nobe left position*/
- speedoNobeL : 13,
- /**radius of indicators position*/
- indicatorRadius : 125,
- /**radius of numbers position*/
- indicatorNumbRadius : 90,
- /**speedo-meter current value cont*/
- speedPositionTxtWH : 80,
- /**indicator nob width*/
- nobW : 20,
- /**indicator nob height*/
- nobH : 4,
- /**indicator number width*/
- numbW : 30,
- /**indicator number height*/
- numbH : 16,
- /**indicator mid nob width*/
- midNobW : 10,
- /**indicator mid nob height*/
- midNobH : 3,
- /**no of small div between main div*/
- noOfSmallDiv : 2,
- /**type of event listener*/
- eventListenerType : 'change',
- /**Center value multiplier e.g. 1 x 1000 RPM*/
- multiplier : 1,
- /**Label on guage Face*/
- gagueLabel : 'km/h'
- });
2022-07-11
2022-07-07
2021-06-24
2021-03-16
2018-03-15
2016-11-18
2016-08-26