用javascript写的进度条,怎么获取进度条的值,按百分比显示出来?

JavaScript011

用javascript写的进度条,怎么获取进度条的值,按百分比显示出来?,第1张

s[0].style.width = 100 - r / i * 100 + "%"

该代码不就是设置进度条的么

如果你能更改页面 你在标签中这样写:

<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