javascript 进度条例子 

 1 <!DOCTYPE html>
 2 <html lang = "zh-cmn-Hans">
 3     
 4     <head>
 5         <title>MyGame</title>
 6         <meta charset = "utf-8" />
 7         <script src = "./js/Utils.js" type = "text/javascript"></script>
 8     </head>
 9 
10     <body>
11 
12         <script type = "text/javascript">
13             
14             //进度条例子
15             const progressView = new ProgressView({
16                 width: 300,
17                 height: 20,
18                 bgColor: '#666', //背景色
19                 textColor: '#000', //文字色
20                 scrollColor: '#0000ff', //游标色
21                 textSize: 12, //文字大小
22                 textBar: true, //显示进度条进度
23             })
24 
25             .pos(100, 100) //设置元素的位置
26             .render(); //把元素添加到body
27 
28             progressView.domElement.style.borderRadius = '20px';
29 
30             
31             //模拟某个项目的进度 Timer
32             new Timer(t => {
33                 //console.log(t.readyState, t.number, t.step)
34                 progressView.set(t.number / t.step, true);
35                 if(t.readyState === 'done') alert('进度完成');
36 
37             }, 1000, 30);
38 
39             console.log(progressView);
40 
41         </script>
42 
43     </body>
44 
45 </html>

源码下载: https://pan.baidu.com/s/18Ux9fHZVlV45-MMKSUgm7A

提取码: 1111

 

posted @ 2022-05-28 12:28  鸡儿er  阅读(35)  评论(0)  编辑  收藏  举报