js实现圆盘记速表


Posted in Javascript onAugust 03, 2015

如何利用AmCharts制作的汽车速度计速表,通过设置不同的速度(数字)来动态改变计速表的指针

效果图:

js实现圆盘记速表

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>

以上就是本文的全部内容,希望大家喜欢。

Javascript 相关文章推荐
JavaScript 事件属性绑定带参数的函数
Mar 13 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
javascript三种代码注释方法
Jun 02 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
包含中国城市的javascript对象实例
Aug 03 #Javascript
jQuery跨域问题解决方案
Aug 03 #Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 #Javascript
提高jQuery性能优化的技巧
Aug 03 #Javascript
jquery简单实现幻灯片的方法
Aug 03 #Javascript
JS拖拽插件实现步骤
Aug 03 #Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 #Javascript
You might like
PHP新手上路(十)
2006/10/09 PHP
php 用sock技术发送邮件的函数
2007/07/21 PHP
PHP的加密方式及原理
2012/06/14 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
javascript中的作用域scope介绍
2010/12/28 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
python实现数组插入新元素的方法
2015/05/22 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
Python单元和文档测试实例详解
2019/04/11 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
Keras搭建自编码器操作
2020/07/03 Python
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
《花瓣飘香》教学反思
2014/04/15 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
赞助商致辞
2015/07/30 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js