ふがー

YumizSui · Jun 26, 2020 · da67604 · da67604
1 parent cba6ed2
commit da67604
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 26 deletions.
diff --git a/counter/counter.css b/counter/counter.css
@@ -0,0 +1,4 @@
+#red_button {
+    color: rgb(255, 255, 0);
+    background: #ff0000;
+  }
diff --git a/counter/counter.html b/counter/counter.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="./counter.css">
+    <script src="./counter.js"></script>
+    <title>押してはいけないボタン</title>
+</head>
+<body>
+    <h1>押してはいけないボタン</h1>
+    <div id="count">回数: 0</div>
+    <button onclick="countUp()">普通のボタン</button>
+    <button onclick="dontClick()" id="red_button">赤いボタン</button>
+    <button onclick="reset()">reset</button>
+    <div><a href="../index.html"> 戻るhomeに </a></div>
+</body>
+</html>
diff --git a/counter/counter.js b/counter/counter.js
@@ -0,0 +1,20 @@
+let count = 0
+let n = 0;
+const countUp = () => {
+    count++
+    const countElement = document.querySelector('#count')
+        countElement.innerText = '回数: ' + count   
+}
+
+const reset = () => {
+    count = 0
+    const countElement = document.querySelector('#count')
+        countElement.innerText = '回数: ' + count   
+}
+
+const dontClick = () => {
+    while (n < 100) {
+        n++;
+        alert('押すなって言ったのに…（100回押せば抜けられます）');
+    }
+}
diff --git a/index.html b/index.html
@@ -12,7 +12,9 @@ <h2>はい</h2>
         <li>YumizSui</li>
         <a href="https://twitter.com/YumizSui">湯水🐧水</a>
         <li>これは自己紹介です．</li>
-        <a href="work/counter.html"> 押してはいけないボタン </a>
+        <h2>つくられたも</h2>
+        <li><a href="counter/counter.html"> 押してはいけないボタン </a></li>
+        <li><a href="stopwatch/stopwatch.html"> 33.4challenge </a></li>
     </div>
 </body>
 </html>
diff --git a/stopwatch/stopwatch.html b/stopwatch/stopwatch.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <script src="./stopwatch.js"></script>
+    <title>33.4challenge</title>
+</head>
+<body>
+    <h1>33.4challenge</h1>
+    <div id="watch">33.4してください！</div>
+    <button onclick="watchStart()　"　id="start">Start</button>
+    <button onclick="watchStop()" id="stop">Stop</button>
+    <button onclick="watchReset()"　id="reset">Reset</button>
+    <div><a href="../index.html"> 戻るhomeに </a></div>
+</body>
+</html>
diff --git a/stopwatch/stopwatch.js b/stopwatch/stopwatch.js
@@ -0,0 +1,44 @@
+var is_count = false;
+var result;
+var over_minute = 0;
+var minute= 0;
+var second = 0;
+var milisecond = 0;
+var elapsed_time =0;
+const watchStart = () => {
+    if (!is_count) {
+        is_count = true;
+        start_time = new Date();
+        setInterval(countTime, 1)
+        const countElement = document.querySelector('#watch')
+        countElement.innerText ='計測中…'
+    }
+}
+
+const watchStop = () => {
+    const countElement = document.querySelector('#watch')
+    if (over_minute >= 1)
+    countElement.innerText = ':ha:'
+    else if (second < 33)
+        countElement.innerText = '記録:' + result + ' :zako:'
+    else if(second <= 33&&milisecond == 4)
+        countElement.innerText = '記録:' + result + ' :tuyoi:'
+    else if(second <= 33)
+        countElement.innerText = '記録:' + result + ' :sad_parrot:'
+    else if(second >= 33)
+        countElement.innerText = '記録:' + result + ' :zekkizekki:'    
+}
+const watchReset = () => {
+    const countElement = document.querySelector('#watch')
+        countElement.innerText ='33.4してください！'
+}
+
+function countTime() {
+    now_time = new Date();
+    elapsed_time = now_time.getTime() - start_time.getTime();
+    over_minute = (elapsed_time / 1000/60);
+    second = Math.floor(elapsed_time / 1000) % 60;
+    milisecond = Math.floor((elapsed_time % 1000)/100);
+    result = second + "." + milisecond;	
+    is_count = false;
+}
diff --git a/work/counter.html b/work/counter.html
diff --git a/work/counter.js b/work/counter.js