js实现圆盘记速表

2024-04-08 22:45:42

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

效果图：

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圆盘抽奖程序实现原理和完整代码例子

效果预览: 一.模拟抽奖的实现过程旋转原理:当支持CSS3属性采用transform: rotate(角度deg)设置,当角度为正数时顺时针旋转,当为负数时逆时针旋转.如果是IE8及其以下,采用采用绝对定位设置top和left,模拟角度旋转. run方法,参数angle指角度复制代码代码如下: function run(angle) { if (isIE) { cosDeg = Math.cos(angle
js实现圆盘记速表

如何利用AmCharts制作的汽车速度计速表,通过设置不同的速度(数字)来动态改变计速表的指针效果图: javascript代码: var chart = AmCharts.makeChart("chartdiv", { "type": "gauge", "theme": "none", "axes": [{ "axisThickness": 1, "ax
html+js+highcharts绘制圆饼图表的简单实例

实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type&q
js实现文件上传表单域美化特效

一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法这些文件上传域的美化使用的方法都是隐藏原生的<input type="file">元素,然后使用一个<label>元素来制作美化效果. HTML结构该文件上传域美化效果最基本的HTML结构如下: <input type="file" name="file" id="file" class=&q
JS模拟并美化的表单控件完整实例

本文实例讲述了JS模拟并美化的表单控件效果实例.分享给大家供大家参考.具体如下: 这里演示使用JS美化并模拟网页表单控件,十分漂亮的表单效果,使用时可以将代码内的JS保存为文件, 方便调用,使用方法:WellForm(element) //element 为表单元素. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-like-table-control-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
JS+DIV+CSS实现仿表单下拉列表效果

本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果.分享给大家供大家参考.具体如下: JS+DIV+CSS实现仿表单下拉列表效果,是完全用CSS技术再配合JS实现的效果,用来代替传统的Select下拉框,虽然目前来说,此代码还有些粗糙,但对于美化列表的样式来说,可能以后会更方便,要比Select方便的多. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-fselect-codes/ 具体代码如下: <!DOCTYPE
纯JS实现可拖拽表单的简单实例

因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mousedown判断鼠标点击的位置是否在触发控件的位置,如果是,mousemove的时候clone一个控件,修改透明度,然后放入容器内的时候remove这个控件,并且在容器内生成一个放入的控件(放入的控件和触发的控件可以不一样) 拖拽:同样的, mousedown的时候判断是哪个控件,mousemove的时候需要放一个占位div放在原有的位置上,并将元素修改透明度然
浅谈Node.js ORM框架Sequlize之表间关系

Sequelize模型之间存在关联关系,这些关系代表了数据库中对应表之间的主/外键关系.基于模型关系可以实现关联表之间的连接查询.更新.删除等操作.本文将通过一个示例,介绍模型的定义,创建模型关联关系,模型与关联关系同步数据库,及关系模型的增.删.改.查操作. 数据库中的表之间存在一定的关联关系,表之间的关系基于主/外键进行关联.创建约束等.关系表中的数据分为1对1(1:1).1对多(1:M).多对多(N:M)三种关联关系. 在Sequelize中建立关联关系,通过调用模型(源模型)的belon
JS两种类型的表单提交方法实例分析

本文实例分析了JS两种类型的表单提交方法.分享给大家供大家参考,具体如下: 1.原始的 <form method="post" action="/student/stureg/add" id="form1" onsubmit="return subForm();"> <button type="submit" class="button red" style="
JS判断form内所有表单是否为空的简单实例

如下所示: function checkForm(){ var input_cart=document.getElementsByTagName_r("INPUT"); for(var i=0; i<input_cart.length; i++) { if(input_cart[i].value==""||input_cart[i].value==null) { alert("信息不能为空!"); input_cart[i].focus()
Vue.js 踩坑记之双向绑定

这篇体验一下VUE的双向绑定 <html> <head> <meta charset="utf-8"> </head> <body> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <div id="app"> <input type="text" v

js实现圆盘记速表

相关推荐

随机推荐