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