这篇文章主要为大家详细介绍了Java脚本语言实现进度条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Java脚本语言实现进度条效果的具体代码，供大家参考，具体内容如下
这次的效果图如下：
这个案例做起来不难，在我练习的时候，新知识点是使用window.getComputedStyle()函数获取元素的宽度值
总的思路是在一个差异盒子初始放入一个宽度为0的差异盒子，然后在按钮的onclick回调函数中使用定时器改变其宽度值
代码如下：
！文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
meta http-equiv=' X-UA-Compatible ' content=' IE=edge '
meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '
标题文档/标题
风格
#容器{
宽度：500像素
高度：200像素
边距：50px自动；
位置：相对；
}
#框{
宽度：260像素
高度：30px
边框：1px粉色纯色；
边框半径：16px
边距-底部：20px
填充：1px
溢出：隐藏；
}
#续
宽度：0;
身高：100%;
背景色：粉色；
边框半径：16px
}
#btn {
位置：绝对；
左边距：110像素
宽度：50px
高度：30px
}
#text {
显示：块；
位置：相对；
左：120像素
边距-底部：20px
}
/风格
/头
身体
div id='容器'
div id=' box ' data-content-before=' 22 '
div id='cont'/div
/div
div id='text'0%/div
按钮id='btn '提交/按钮
/div
脚本
信箱=文件。getelementbyid(' box ')；
设BTN=文件。getelementbyid(' BTN ')；
让cont=document。getelementbyid(' cont ')；
让文本=文档。getelementbyid(“text”)；
函数getstyle(obj，name) {
if (window.getComputedStyle) {
返回窗口。getcomputedstyle(obj，null)[name]；
}
否则{
返回对象。当前样式[名称]；
}
}
btn.onclick=function () {
设ini=0；
设num=setInterval(()={
设tem=parse int(window。getcomputedstyle(cont，null)[' width '])；
let now=tem 26
if (tem=260) {
console.log(现在);
间隙(数字);
返回；
}
内容风格。width=now ' px
ini=ini 10
文字。innertext=ini " %
}, 80);
}
/脚本
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。