该代码不就是设置进度条的么
如果你能更改页面 你在标签中这样写:
<h5>(资料完整度<span id="wz_jd"></span>)</h5>然后在你的JS中
s[0].style.width = 100 - r / i * 100 + "%"的下面 写上:
document.getElementById("wz_jd").innerHTML = 100 - r / i * 100 + "%"不就OK了么
注意:你的JS中哪儿有那行代码 就在那行下面 追加
如果不能更改页面就在那行代码下面 这样写:
document.getElementsByTagName("h5")[0].innerHTML = "(资料完整度"+ (100 - r / i * 100) + "%)"里面的0 表示是第1个h5标签 如果你有多个 自己进行更改
建立两个canvas标签,先绘制底层的浅灰色圆圈背景,再绘制上层的红色进度条。WXML代码
开始动态绘制
WXSS代码
特别注意:底层的canvas最好使用
z-index:-99;放置于底层
page { width: 100% height: 100% background-color: #fff
}.circle-box { text-align: center margin-top: 10vw
}.circle { position: absolute left: 0 right: 0 margin: auto
}.draw_btn { width: 35vw position: absolute top: 33vw right: 0 left: 0 margin: auto border: 1px #000 solid border-radius: 5vw
}
JS代码
//获取应用实例var app = getApp()var intervalvar varNamevar ctx = wx.createCanvasContext('canvasArcCir')
Page({ data: {
}, drawCircle: function () {
clearInterval(varName) function drawArc(s, e) {
ctx.setFillStyle('white')
ctx.clearRect(0, 0, 200, 200)
ctx.draw() var x = 100, y = 100, radius = 96
ctx.setLineWidth(5)
ctx.setStrokeStyle('#d81e06')
ctx.setLineCap('round')
ctx.beginPath()
ctx.arc(x, y, radius, s, e, false)
ctx.stroke()
ctx.draw()
}var step = 1, startAngle = 1.5 * Math.PI, endAngle = 0 var animation_interval = 1000, n = 60 var animation = function () { if (step