完成进度条

wkstudy · Nov 24, 2018 · 085ace6 · 085ace6
1 parent d6c717d
commit 085ace6
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 0 deletions.
diff --git a/progressbar/README.md b/progressbar/README.md
@@ -0,0 +1,15 @@
+## 进度条
+[demo](https://wkstudy.github.io/smallplugs/progressbar/index.html)
+
+
+### knowledge
+* z-index只对定位元素有效
+*  关于定时器的使用，自己了解的太少，需要参考[阮一峰](http://javascript.ruanyifeng.com/advanced/timer.html)
+
+> * 比如定时器执行环境为全局
+> * 参数的传递（apply、匿名函数、bind方法），都是用来解决定时器的执行环境为全局的问题
+> * 防抖技术
+
+### 注意
+* 自己原来将change函数放在外面定义，导致t不被识别，所以定义到了里面
+* 使用obj.num而不适用num的原因是，对象传递的引用，而基本类型（Undefined、Null、Boolean、Number、String 5种基本数据类型）是进行复制。
diff --git a/progressbar/index.css b/progressbar/index.css
@@ -0,0 +1,25 @@
+html{
+  font-size: 62.5%;
+}
+
+#progress-bar {
+  margin: 20rem auto;
+  width: 40rem;
+  height: 2rem;
+  border: .1rem solid gray;
+  text-align: center;
+  color: black;
+  padding: 0;
+  position: relative;
+}
+#bar {
+  background-color: red;
+  width: 0%;
+  height: 100%;
+  transition: width 1s;
+}
+#txt {
+  position: absolute;
+  line-height: 2rem;
+  top: 0
+}
diff --git a/progressbar/index.html b/progressbar/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>progressbar</title>
+  <link rel="stylesheet" href="./index.css">
+</head>
+<body>
+  <div id="progress-bar">
+    <div id="bar"></div>
+    <span id="txt">0%</span>
+  </div>
+</body>
+<script src="./index.js"></script>
+</html>
diff --git a/progressbar/index.js b/progressbar/index.js
@@ -0,0 +1,19 @@
+function move () {
+  var bar = document.getElementById('bar'),
+      txt = document.getElementById('txt'),
+      obj = {};
+      obj.num = 0;
+  var t = setInterval(change, 100, bar, txt, obj);
+  function change (bar, txt, obj) {
+    if (obj.num <= 100) {
+      bar.style.width = obj.num + '%';
+      txt.innerHTML = obj.num + '%';
+      obj.num++;
+    }else {
+      clearInterval(t);
+    }
+
+  }
+}
+
+move();