js實(shí)現(xiàn)圓盤記速表
更新時(shí)間：2015年08月03日 11:34:20 投稿：lijiao
本文分享了一個(gè)利用AmCharts制作的汽車速度計(jì)速表，通過(guò)設(shè)置不同的速度（數(shù)字）來(lái)動(dòng)態(tài)改變計(jì)速表的指針。使用也非常簡(jiǎn)單，下面給出方法。
如何利用AmCharts制作的汽車速度計(jì)速表，通過(guò)設(shè)置不同的速度（數(shù)字）來(lái)動(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解構(gòu)賦值的5個(gè)常見(jiàn)場(chǎng)景與實(shí)例教程
解構(gòu)賦值是一種特殊的語(yǔ)法,它使我們可以將數(shù)組或?qū)ο蟆安鸢睘榈揭幌盗凶兞恐?因?yàn)橛袝r(shí)候使用變量更加方便,下面這篇文章主要給大家介紹了關(guān)于JavaScript解構(gòu)賦值的5個(gè)常見(jiàn)場(chǎng)景與實(shí)例的相關(guān)資料,需要的朋友可以參考下2021-11-11
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)滑動(dòng)插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
uniapp頁(yè)面回到頂部?jī)煞N實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于uniapp頁(yè)面回到頂部?jī)煞N實(shí)現(xiàn)方法的相關(guān)資料,在uniapp中要實(shí)現(xiàn)回到頂部的效果有兩種方法實(shí)現(xiàn),文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)換膚，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要為大家介紹了JS瀏覽器的首屏白屏?xí)r間計(jì)算示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
昨天在項(xiàng)目中發(fā)現(xiàn)IE6動(dòng)態(tài)生成的INPUT是不能改NAME的，微軟關(guān)于這個(gè)問(wèn)題有這么個(gè)說(shuō)法2010-09-09
這篇文章主要介紹了如何利用js在兩個(gè)html窗口間通信，如果讀者們有類似的需求，可以參考下2021-04-04
Javascript中apply、call、bind的巧妙使用
Javascript中apply、call、bind都是為了改變函數(shù)體內(nèi)部 this 的指向。下面通過(guò)本文重點(diǎn)給大家介紹js中apply，call，bind的巧妙使用方法，感興趣的朋友一起學(xué)習(xí)吧2016-08-08
JS實(shí)現(xiàn)模擬風(fēng)力的雪花飄落效果
這篇文章主要介紹了JS實(shí)現(xiàn)模擬風(fēng)力的雪花飄落效果,可在右側(cè)填入風(fēng)力值點(diǎn)擊按鈕即可看到伴隨風(fēng)力的雪花飄落效果,同時(shí)右側(cè)有實(shí)時(shí)雪花數(shù)量統(tǒng)計(jì)功能,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了Javascript中的匿名函數(shù)與封裝介紹,本文分析了jQuery 封裝、Backbone 封裝、Underscore 封裝等內(nèi)容,需要的朋友可以參考下2015-03-03