**
简单原生html创建一个由电压，电流的指针图
**
由于工作中其他部门项目有个小的需求，制作了一个小小的指针动效图。
效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电流 电压指针</title>
<style type="text/css">
.circle{
position: relative;
border: 2px solid #333;
border-radius: 50%;
box-sizing: border-box;
margin: 0 auto;
}
.origin{
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
margin-left: -1px;
margin-top: -1px;
border-radius: 50%;
background-color: #333;
transition: all .5s;
}
.line{
position: absolute;
left: 1px;
top: 1px;
height: 2px;
padding-right: 10px;
text-align: right;
box-sizing: border-box;
cursor: pointer;
transition: all .5s;
}
.line::before{
display: inline-block;
content: ' ';
position: absolute;
right: -16px;
top: -7px;
width: 0;
height: 0;
border: 8px solid;
border-top-color: transparent;
border-bottom-color: transparent;
border-right-color: transparent;
}
.origin.black .line{
background-color: black;
}
.origin.black .line::before{
border-left-color: black;
}
.origin.red .line{
background-color: red;
}
.origin.red .line::before{
border-left-color: red;
}
.origin.yellow .line{
background-color: yellow;
}
.origin.yellow .line::before{
border-left-color: yellow;
}
.legend{
padding: 15px;
display: flex;
justify-content: space-around;
box-sizing: border-box;
margin: 0 auto;
}
.legend .item{
display: inline-block;
height: 12px;
width: 20px;
margin-right: 5px;
}
.legend .item.black{
background-color: black;
}
.legend .item.red{
background-color: red;
}
.legend .item.yellow{
background-color: yellow;
}
.text{
position: absolute;
top: 2px;
right: 5px;
}
.num{
position: absolute;
top: -22px;
right: 5px;
}
</style>
<script type="text/javascript">
window.onload = function(){
let isTimer = true
let circle = document.getElementById('circle')
let legend = document.getElementById('legend')
let VR_origin = document.getElementById('VR_origin')
let IR_origin = document.getElementById('IR_origin')
let VS_origin = document.getElementById('VS_origin')
let IS_origin = document.getElementById('IS_origin')
let VT_origin = document.getElementById('VT_origin')
let IT_origin = document.getElementById('IT_origin')
let VR_line = document.getElementById('VR_line')
let IR_line = document.getElementById('IR_line')
let VS_line = document.getElementById('VS_line')
let IS_line = document.getElementById('IS_line')
let VT_line = document.getElementById('VT_line')
let IT_line = document.getElementById('IT_line')
let VR_line_text = document.getElementById('VR_line_text')
let IR_line_text = document.getElementById('IR_line_text')
let VS_line_text = document.getElementById('VS_line_text')
let IS_line_text = document.getElementById('IS_line_text')
let VT_line_text = document.getElementById('VT_line_text')
let IT_line_text = document.getElementById('IT_line_text')
let VR_line_value = document.getElementById('VR_line_value')
let IR_line_value = document.getElementById('IR_line_value')
let VS_line_value = document.getElementById('VS_line_value')
let IS_line_value = document.getElementById('IS_line_value')
let VT_line_value = document.getElementById('VT_line_value')
let IT_line_value = document.getElementById('IT_line_value')
let legend_R = document.getElementById('legend_R')
let legend_T = document.getElementById('legend_T')
let legend_S = document.getElementById('legend_S')
//========================设定circle圆的宽高
let setCirR = 700
circle.setAttribute('style',`height: ${
setCirR}px;width: ${
setCirR}px`);
//======================== 数据处理
let circleWidth = circle.clientWidth // 获取圆的宽高
//======================== 传入的V/I （电流/电压）值
let VR_value = 230
let VS_value = 200
let VT_value = 220
let IR_value = 90
let IS_value = 45
let IT_value = 35
let scaleV = VR_value / (circleWidth/2) // 获取缩放比例
let scaleI = IR_value / (circleWidth/2) // 获取缩放比例
scaleV = scaleV/9*10
scaleI = scaleI/9*10
setLineWidth(setCirR,legend);
setLineWidth(VR_value/scaleV,VR_line)
setLineWidth(IR_value/scaleI,IR_line)
setLineWidth(VS_value/scaleV,VS_line)
setLineWidth(IS_value/scaleI,IS_line)
setLineWidth(VT_value/scaleV,VT_line)
setLineWidth(IT_value/scaleI,IT_line)
VR_line_value.innerHTML = VR_value
IR_line_value.innerHTML = IR_value
VS_line_value.innerHTML = VS_value
IS_line_value.innerHTML = IS_value
VT_line_value.innerHTML = VT_value
IT_line_value.innerHTML = IT_value
function setLineWidth(wid,ele){
ele.setAttribute('style',`width:${
wid}px;`)
}
//======================== 传入的V/I （电流/电压角度） deg值
let VR_deg = 0
let VS_deg = 120+VR_deg
let VT_deg = 60+VS_deg
let IR_deg = 90+VR_deg
let IS_deg = 90+VS_deg
let IT_deg = 90+VT_deg
setOriginDeg(VR_deg,VR_origin)
setOriginDeg(IR_deg,IR_origin)
setOriginDeg(VS_deg,VS_origin)
setOriginDeg(IS_deg,IS_origin)
setOriginDeg(VT_deg,VT_origin)
setOriginDeg(IT_deg,IT_origin)
function setOriginDeg(odeg,ele){
ele.setAttribute('style',`transform: rotate(${
odeg}deg);`)
}
if(isTimer){
setInterval(function(){
let ramdomNum = Math.random()*10
let VR_deg = 0 + Math.random()*10
let VS_deg = 120+VR_deg+ Math.random()*10
let VT_deg = 60+VS_deg+ Math.random()*10
let IR_deg = 90+VR_deg+ Math.random()*10
let IS_deg = 90+VS_deg+ Math.random()*10
let IT_deg = 90+VT_deg+ Math.random()*10
setOriginDeg(VR_deg,VR_origin)
setOriginDeg(IR_deg,IR_origin)
setOriginDeg(VS_deg,VS_origin)
setOriginDeg(IS_deg,IS_origin)
setOriginDeg(VT_deg,VT_origin)
setOriginDeg(IT_deg,IT_origin)
let VR_value = 230+ Math.round(Math.random()*10)
let VS_value = 200+ Math.round(Math.random()*10)
let VT_value = 220+ Math.round(Math.random()*10)
let IR_value = 90+ Math.round(Math.random()*10)
let IS_value = 45+ Math.round(Math.random()*10)
let IT_value = 35+ Math.round(Math.random()*10)
let scaleV = VR_value / (circleWidth/2) // 获取缩放比例
let scaleI = IR_value / (circleWidth/2) // 获取缩放比例
scaleV = scaleV/9*10
scaleI = scaleI/9*10
setLineWidth(setCirR,legend);
setLineWidth(VR_value/scaleV,VR_line)
setLineWidth(IR_value/scaleI,IR_line)
setLineWidth(VS_value/scaleV,VS_line)
setLineWidth(IS_value/scaleI,IS_line)
setLineWidth(VT_value/scaleV,VT_line)
setLineWidth(IT_value/scaleI,IT_line)
VR_line_value.innerHTML = VR_value
IR_line_value.innerHTML = IR_value
VS_line_value.innerHTML = VS_value
IS_line_value.innerHTML = IS_value
VT_line_value.innerHTML = VT_value
IT_line_value.innerHTML = IT_value
VR_line.setAttribute('title',`${
VR_line_text.innerHTML}: ${
VR_value}`)
IR_line.setAttribute('title',`${
IR_line_text.innerHTML}: ${
IR_value}`)
VS_line.setAttribute('title',`${
VS_line_text.innerHTML}: ${
VS_value}`)
IS_line.setAttribute('title',`${
IS_line_text.innerHTML}: ${
IS_value}`)
VT_line.setAttribute('title',`${
VT_line_text.innerHTML}: ${
VT_value}`)
IT_line.setAttribute('title',`${
IT_line_text.innerHTML}: ${
IT_value}`)
},1000)
}
//======================== 传入Legend text值
legend_R.innerHTML = 'Voltage R'
legend_S.innerHTML = 'Voltage S'
legend_T.innerHTML = 'Voltage T'
//======================== 传入Line text值
VR_line_text.innerHTML = 'VR'
IR_line_text.innerHTML = 'IR'
VS_line_text.innerHTML = 'VS'
IS_line_text.innerHTML = 'IS'
VT_line_text.innerHTML = 'VT'
IT_line_text.innerHTML = 'IT'
VR_line.setAttribute('title',`${
VR_line_text.innerHTML}: ${
VR_value}`)
IR_line.setAttribute('title',`${
IR_line_text.innerHTML}: ${
IR_value}`)
VS_line.setAttribute('title',`${
VS_line_text.innerHTML}: ${
VS_value}`)
IS_line.setAttribute('title',`${
IS_line_text.innerHTML}: ${
IS_value}`)
VT_line.setAttribute('title',`${
VT_line_text.innerHTML}: ${
VT_value}`)
IT_line.setAttribute('title',`${
IT_line_text.innerHTML}: ${
IT_value}`)
}
</script>
</head>
<body>
<div id="circle" class="circle">
<div class="origin black" style="z-index: 99;"></div>
<div id="VR_origin" class="origin black"><abbr id="VR_line" class="line"><span id="VR_line_text" class="text">--</span><span id="VR_line_value" class="num">--</span></abbr></div>
<div id="IR_origin" class="origin black"><abbr id="IR_line" class="line"><span id="IR_line_text" class="text">--</span><span id="IR_line_value" class="num">--</span></abbr></div>
<div id="VS_origin" class="origin red"><abbr id="VS_line" class="line"><span id="VS_line_text" class="text">--</span><span id="VS_line_value" class="num">--</span></abbr></div>
<div id="IS_origin" class="origin red"><abbr id="IS_line" class="line"><span id="IS_line_text" class="text">--</span><span id="IS_line_value" class="num">--</span></abbr></div>
<div id="VT_origin" class="origin yellow"><abbr id="VT_line" class="line"><span id="VT_line_text" class="text">--</span><span id="VT_line_value" class="num">--</span></abbr></div>
<div id="IT_origin" class="origin yellow"><abbr id="IT_line" class="line"><span id="IT_line_text" class="text">--</span><span id="IT_line_value" class="num">--</span></abbr></div>
</div>
<div id="legend" class="legend">
<div><span class="item black"></span><span id="legend_R">--</span></div>
<div><span class="item red"></span><span id="legend_S">--</span></div>
<div><span class="item yellow"></span><span id="legend_T">--</span></div>
</div>
</body>
</html>