html部分
<div class="jixulvcontent"><div class="jixulvmainball"><span class="jixulvpertext">70%</span><div id ="target" class="jixulvzhizhen"></div><div><ul class="jixulvitemwrap"></ul></div></div></div>
css部分
.jixulvcontent{margin-top: 100px;}.jixulvmainball {margin: 70px auto;/* background: #0AF135; */width: 150px;height: 150px;border-radius: 50%;line-height: 150px;text-align: center;position: relative;font-size: 80px;color: #fff;}.jixulvpertext{position:absolute;top:65%;left:33%;z-index: 9;font-size:40px;}.jixulvitemwrap {padding: 0;margin: 0;list-style: none;position: absolute;top: -150px;left: -158px;border: 235px solid rgba(190, 20, 20, 0);border-radius: 50%;transform: rotate(240deg);z-index: 3;}.jixulvitemwrap li {position: absolute;top: -100px;left: -4px;transform-origin: 4px 100px;transition: all .3s .5s;}.jixulvitem {width: 10px;height: 10px;background: #4e6a4f;}.jixulvzhizhen{position: absolute;z-index: 9;left: 6%;top: 33%;width: 80px;height:80px;/* transform:rotate(100deg); *//* -ms-transform:rotate(100deg); *//* -moz-transform:rotate(100deg); *//* -webkit-transform:rotate(100deg); *//* -o-transform:rotate(100deg); */transform-origin : 87% 50% 0;background:url('img/todo/1.png') no-repeat;background-size:cover;}.jixulvzhizhen img{width:100%;height:100%;}
中间指针部分主要调试指针旋转的圆心位置
transform-origin : X Y 0;
js部分
var current = 0;var turnRight = function (pers){current = pers*2.4-30;// current = (current)%360;document.getElementById('target').style.transform = 'rotate('+current+'deg)';}function render(pers){turnRight(pers);var fragment = document.createDocumentFragment();var itemnum = 72var deg = 360 / itemnumvar r=58var g=255var b=2var per = pers /100var text = document.querySelector('.jixulvpertext')text.innerText=per*100 + '%'for(var i=0;i<itemnum;i++){var item = document.createElement('div')item.className = "jixulvitem"if(per != 0 && i <= itemnum * per * 2/3 ){var bgcolor = 'rgb('+ (r+4*i)+','+(g-5*i)+','+b+')'item.style.background = bgcolor}var li = document.createElement('li')var curdeg = deg * iif(curdeg<=240){li.style.transform=`rotate(${curdeg}deg)`li.appendChild(item)fragment.appendChild(li)}}var itemwrap = document.querySelector('.jixulvitemwrap')itemwrap.appendChild(fragment)}render(50);
