快捷導(dǎo)航

js實現(xiàn)圓盤記速表

更新時間：2015年08月03日 11:34:20 投稿：lijiao

本文分享了一個利用AmCharts制作的汽車速度計速表，通過設(shè)置不同的速度（數(shù)字）來動態(tài)改變計速表的指針。使用也非常簡單，下面給出方法。

如何利用AmCharts制作的汽車速度計速表，通過設(shè)置不同的速度（數(shù)字）來動態(tài)改變計速表的指針

效果圖：

javascript代碼：

var chart = AmCharts.makeChart("chartdiv", {
        "type": "gauge",
        "theme": "none",
        "axes": [{
          "axisThickness": 1,
          "axisAlpha": 0.2,
          "tickAlpha": 0.2,
          "valueInterval": 20,
          "bands": [{
            "color": "#84b761",
            "endValue": 90,
            "startValue": 0
          }, {
            "color": "#fdd400",
            "endValue": 130,
            "startValue": 90
          }, {
            "color": "#cc4748",
            "endValue": 220,
            "innerRadius": "95%",
            "startValue": 130
          }],
          "bottomText": "0 km/h",
          "bottomTextYOffset": -20,
          "endValue": 320
        }],
        "arrows": [{}]
      });
      window.onload=function(){
        chart.arrows[0].setValue(80);
        chart.axes[0].setBottomText(80  " km/h");
      }
      document.getElementById("btnSure").onclick=function(){
        if(document.getElementById("txtNum").value>320){
          alert("超出最大值");
          return;
        }
        if(document.getElementById("txtNum").value<0){
          alert("不能低于0");
          return;
        }
        chart.arrows[0].setValue(document.getElementById("txtNum").value);
        chart.axes[0].setBottomText(document.getElementById("txtNum").value  " km/h");
      }

引入JS:

<script type="text/javascript" src="amcharts.js"></script>
 <script type="text/javascript" src="gauge.js"></script>
<script type="text/javascript" src="none.js"></script>

以上就是本文的全部內(nèi)容，希望大家喜歡。

您可能感興趣的文章:

javascript圓盤抽獎程序?qū)崿F(xiàn)原理和完整代碼例子

相關(guān)文章

javascript中window.location.href的用法
window.location.href?是一個用于獲取當(dāng)前頁面?URL?或讓瀏覽器跳轉(zhuǎn)到新?URL?的重要方法,本文就詳細(xì)的介紹一下javascript中window.location.href的用法,感興趣的可以了解一下
2023-08-08
js實現(xiàn)表格拖動選項
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)表格拖動選項，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
js實現(xiàn)簡單的貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡單的貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-04-04
Peer.js 構(gòu)建視頻聊天應(yīng)用使用詳解
這篇文章主要為大家介紹了Peer.js 構(gòu)建視頻聊天應(yīng)用使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
JS中頁面列表加載的常用方法總結(jié)
在日常前端開發(fā)過程中，常用到頁面列表加載。這篇文章主要為大家介紹三種常用方法，分別是分頁加載、按鈕加載以及滾動加載，需要的可以參考一下
2022-09-09
javascript中的異步調(diào)用機(jī)制
這篇文章主要介紹了javascript中的異步調(diào)用機(jī)制,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-02-02
跟我學(xué)習(xí)javascript的Date對象
跟我學(xué)習(xí)javascript的Date對象，文章主要介紹了Date 日期和時間對象的操作，文章末尾為大家附加了兩個案例，幫助大家更好的學(xué)習(xí)javascript的Date對象，對這方面感興趣的小伙伴們可以參考一下
2015-11-11
JavaScript AOP編程實例
這篇文章主要介紹了JavaScript AOP編程,實例分析了javascript實現(xiàn)AOP編程的基本技巧,需要的朋友可以參考下
2015-06-06
關(guān)于JS中的作用域中的問題思考分享
這篇文章主要介紹了關(guān)于JS中的作用域中的問題思考分享，scope和?closure是?javascript中兩個非常關(guān)鍵的概念，前者JS用多了還比較好理解而且容易體會到，而?closure就不一樣了。這玩意是真的很容易迷糊,需要的朋友可以參考下
2022-04-04
微信小程序?qū)崿F(xiàn)可拖動懸浮圖標(biāo)的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)可拖動懸浮圖標(biāo)的示例代碼,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-12-12