feat: 修改了代码段

eveningwater · Oct 23, 2023 · d909757 · d909757
1 parent 5eb0978
commit d909757
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 40 deletions.
diff --git a/codes/css/zig-zag-pattern.md b/codes/css/zig-zag-pattern.md
@@ -1,33 +1,39 @@
-| 标题                             | 标签           |
-| -------------------------------- | -------------- |
-| zig-zag-pattern(锯齿形背景图案) | visual(视觉的)) |
+| 标题                            | 标签           |
+| ------------------------------- | -------------- |
+| zig-zag-pattern(锯齿形背景图案) | visual(视觉的) |
 
 创建锯齿形背景图案。
 
-* 使用 background-color 设置白色背景。
-* 使用具有四个 linear-gradient() 值的背景图像来创建锯齿形图案的各个部分。
-* 使用 background-size 指定图案的大小。 使用 background-position 将图案的各个部分放置在正确的位置。
-* 注意：元素的固定高度和宽度仅用于演示目的。
+- 使用 background-color 设置白色背景。
+- 使用具有四个 linear-gradient() 值的背景图像来创建锯齿形图案的各个部分。
+- 使用 background-size 指定图案的大小。 使用 background-position 将图案的各个部分放置在正确的位置。
+- 注意：元素的固定高度和宽度仅用于演示目的。
 
 ```html
 <div class="zig-zag"></div>
 ```
 
 ```css
 .zig-zag {
-    width: 240px;
-    height: 240px;
-    background-color: #fff;
-    background-size: 60px 60px;
-    background-repeat: repeat;
-    background-position: -30px 0,-30px 0,0 0,0 0;
-    background-image: linear-gradient(135deg, #000 25%,transparent 25%),
-                      linear-gradient(225deg, #000 25%,transparent 25%),
-                      linear-gradient(3155deg, #000 25%,transparent 25%),
-                      linear-gradient(455deg, #000 25%,transparent 25%);
+  width: 240px;
+  height: 240px;
+  background-color: #fff;
+  background-size: 60px 60px;
+  background-repeat: repeat;
+  background-position: -30px 0, -30px 0, 0 0, 0 0;
+  background-image: linear-gradient(135deg, #000 25%, transparent 25%),
+    linear-gradient(225deg, #000 25%, transparent 25%), linear-gradient(
+      3155deg,
+      #000 25%,
+      transparent 25%
+    ), linear-gradient(455deg, #000 25%, transparent 25%);
 }
 ```
 
 > 应用场景
 
-<iframe src="codes/css/html/zig-zag-pattern.html"></iframe>
+<div class="code-editor" data-url="codes/css/html/zebra-striped-list.html" data-language="html"></div>
+
+结果如下:
+
+<iframe src="codes/css/html/zebra-striped-list.html"></iframe>
diff --git a/codes/javascript/counter.md b/codes/javascript/counter.md
@@ -1,32 +1,32 @@
-|  标题   | 标签  |
-|  ----  | ----  |
+| 标题                | 标签                             |
+| ------------------- | -------------------------------- |
 | counter(定时计数器) | browser,advanced(浏览器，高级的) |
 
 为指定的选择器创建一个具有指定范围、步长和持续时间的计数器。
 
-* 检查 `step` 是否具有正确的符号并相应地进行更改。
-* 将 `setInterval()` 与 `Math.abs()` 和 `Math.floor()` 结合使用来计算每次新文本绘制之间的时间。
-* 使用 `Document.querySelector()`, `Element.innerHTML` 更新所选元素的值。
-* 省略第四个参数 `step` 以使用默认步长 `1`。
-* 省略第五个参数，持续时间，以使用 `2000` 毫秒的默认持续时间。
+- 检查 `step` 是否具有正确的符号并相应地进行更改。
+- 将 `setInterval()` 与 `Math.abs()` 和 `Math.floor()` 结合使用来计算每次新文本绘制之间的时间。
+- 使用 `Document.querySelector()`, `Element.innerHTML` 更新所选元素的值。
+- 省略第四个参数 `step` 以使用默认步长 `1`。
+- 省略第五个参数，持续时间，以使用 `2000` 毫秒的默认持续时间。
 
 > 代码如下:
 
 ```js
-const counter = (selector,start,end,step = 1,duration = 2000) => {
-    const $ = v => document.querySelector(v);
-    let current = start,
-        _step = (end - start) * step < 0 ? -step : step,
-        timer = setInterval(() => {
-            current += _step;
-            $(selector).innerHTML = current;
-            if(current >= end){
-                $(selector).innerHTML = end;
-                clearInterval(timer);
-            }
-        },Math.abs(Math.floor(duration / (end - start))));
-    return timer;
-}
+const counter = (selector, start, end, step = 1, duration = 2000) => {
+  const $ = v => document.querySelector(v);
+  let current = start,
+    _step = (end - start) * step < 0 ? -step : step,
+    timer = setInterval(() => {
+      current += _step;
+      $(selector).innerHTML = current;
+      if (current >= end) {
+        $(selector).innerHTML = end;
+        clearInterval(timer);
+      }
+    }, Math.abs(Math.floor(duration / (end - start))));
+  return timer;
+};
 ```
 
 > 调用方式:
@@ -36,4 +36,10 @@ counter('#my-id', 1, 1000, 5, 2000);
 // Creates a 2-second timer for the element with id="my-id"
 ```
 
-> 应用场景
+> 应用场景
+
+<div class="code-editor" data-url="codes/javascript/html/counter.html" data-language="html"></div>
+
+结果如下:
+
+<iframe src="codes/javascript/html/counter.html"></iframe>
diff --git a/codes/javascript/html/counter.html b/codes/javascript/html/counter.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>counter</title>
+</head>
+
+<body>
+    <div id="counter"></div>
+    <button id="btn" type="button">点击我重新计数</button>
+    <script>
+        const counter = (selector, start, end, step = 1, duration = 2000) => {
+            const $ = v => document.querySelector(v);
+            let current = start,
+                _step = (end - start) * step < 0 ? -step : step,
+                timer = setInterval(() => {
+                    current += _step;
+                    $(selector).innerHTML = current;
+                    if (current >= end) {
+                        $(selector).innerHTML = end;
+                        clearInterval(timer);
+                    }
+                }, Math.abs(Math.floor(duration / (end - start))));
+            return timer;
+        };
+        counter('#counter', 1, 1000, 5, 2000);
+        const btn = document.querySelector('#btn');
+        btn.onclick = () => counter('#counter', 1, 1000, 5, 2000);
+    </script>
+</body>
+
+</html>