实现油门转盘的功能

只是一个模仿，并没有很细致的去标表盘的数值啥的

使用svg中的path标签先画两个大弧形，代码如下，一个作为表盘，一个作为指针

<svg width="500" height="500" viewBox = '0 0 500 500'>
<path d="M 200 300 A 100 100 0 1 1 300 300" class="bac"></path>
<path d="M 200 300 A 100 100 0 1 1 300 300" class="fro"></path>
</svg>

这两个弧形是完全重合的，我们赋予他们不同的颜色。但是我们要做到的是，给定一个百分比的值，让第二个圆弧能像仪表盘指针那样转动起来，覆盖掉表盘

然后我们想让fro动起来的话，需要两个参数，stroke-dasharry和stroke-dashoffset；

一开始我们的指针在0的位置，那么需要我们将指针隐藏起来

先用getTotalLength()获取到圆弧的长度，然后我们将这个长度值赋给stroke-dasharry 和 stroke-dashoffset， 此时指针所在位置为0

然后我们用input标签做一个输入框，在输入框中输入参数，可以让指针转动整个仪表盘的百分比

一开始我的想法是在js中动态的新建一个path标签，并动态的画弧，但是因为取点的问题导致画的弧覆盖的不是非常精确，后来的做法就是画一个一模一样的弧，然后先藏起来，再慢慢展现

这里需要一个动态效果，用到css3中animation 

在js中向style标签中动态插入innerHTML

keyframes.innerHTML = '@keyframes move{from{stroke-dashoffset:' + fro.style.strokeDashoffset +';}to{stroke-dashoffset: ' + (len - a) +'px;}}.fro{stroke: #f00;animation: move1s ease;animation-iteration-count: 1;animation-fill-mode: forwards;}';

但是这个只能第一次有动态效果，找了半天也没找到有什么毛病，后来试着在开始之前先把style标签中的元素清空，然后就可以了