统计秒

iVapor · Jun 19, 2020 · 51a656b · 51a656b
1 parent 1fad603
commit 51a656b
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 4 deletions.
diff --git a/index.css b/index.css
@@ -16,7 +16,7 @@ body {
 
     cursor: pointer;
     font-size: 0;
-    border: 1px solid black;
+    border: 1px solid silver;
     text-align: center;
     padding: 10px;
     margin: 4px;
@@ -75,7 +75,7 @@ body {
     cursor: pointer;
 
     font-size:14px;
-    font-family:SFUIDisplay-Light,SFUIDisplay;
+    /*font-family:SFUIDisplay-Light,SFUIDisplay;*/
     font-weight:300;
     color:rgba(105,105,116,1);
     line-height:24px;
@@ -85,9 +85,27 @@ body {
     background: rgba(196, 194, 194, 0.4);
 }
 
-.time-fruit {
+.time-container {
+    display: flex;
+    justify-content: center;
     background:linear-gradient(225deg, rgb(123, 204, 247) 0%, rgb(180, 223, 255) 100%);
     border-radius:6px;
+    padding: 10px;
+}
+
+.time-count {
+    padding-left: 10px;
+}
+
+.time-icon .iconfont {
+    vertical-align: middle;
+    font-size: 40px;
+    color: white;
+}
+
+.time-count {
+    vertical-align: middle;
+    font-size: 30px;
 }
 
 .apple {

diff --git a/index.html b/index.html
@@ -23,7 +23,14 @@
     </main>
 
     <div class="action-panel">
-        <div class="time-fruit">00:00</div>
+        <div class="time-container">
+            <div class="time-icon">
+                <span><i class="icon iconfont mine-shizhong"></i></span>
+                <span class="time-count">
+                    <span class="show-min">00</span>:<span class="show-second">00</span>
+                </span>
+            </div>
+        </div>
         <div class="new-game">新开局</div>
     </div>
 </div>

diff --git a/index.js b/index.js
@@ -50,6 +50,28 @@ const renderSquare = function(square) {
     eleRoot.insertAdjacentHTML( 'beforeend', container)
 }
 
+const changeTime = () => {
+    let secondEle = eleSelector('.show-second')
+    let current = secondEle.innerHTML
+    let updateSecond = Number(current) + 1
+
+    if (String(updateSecond).length === 1) {
+        updateSecond = `0${ updateSecond }`
+    }
+
+    if (updateSecond === 61) {
+
+    }
+    secondEle.innerHTML = updateSecond
+
+}
+
+const startTime = () => {
+    setInterval(function () {
+        changeTime()
+    }, 1000)
+}
+
 const bindEventDelegate = function(square) {
     let allCell = eleSelector('#id-div-mime')
     allCell.addEventListener('click', (e) => {
@@ -59,6 +81,7 @@ const bindEventDelegate = function(square) {
             vjkl(self, square)
         }
 
+        startTime()
     })
 }