diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..851cfe9 Binary files /dev/null and b/favicon.ico differ diff --git a/html/random picture from unsplash.html b/html/random picture from unsplash.html new file mode 100644 index 0000000..2a1e6df --- /dev/null +++ b/html/random picture from unsplash.html @@ -0,0 +1,63 @@ + + + + + + + random picture from unsplash + + + +
+

click to change this picture

+ +
loading
+
+ + diff --git a/html/冰雹数列生成器.html b/html/冰雹数列生成器.html new file mode 100644 index 0000000..eeda62b --- /dev/null +++ b/html/冰雹数列生成器.html @@ -0,0 +1,35 @@ + + + + + + + + 冰雹数列生成器 + + +

冰雹数列生成器

+

作者: 赵海洋

+

+ 随便想一个正整数。如果它是奇数，则把它乘以3再加1。如果它是偶数，则把它除以2。对每一个新产生的数都运用这个规则，你知道会发生什么情况吗？ + 数学家猜想它们都会变成1。 +

+ + +

+ + + diff --git a/html/判断是否是闰年.html b/html/判断是否是闰年.html new file mode 100644 index 0000000..e81a977 --- /dev/null +++ b/html/判断是否是闰年.html @@ -0,0 +1,30 @@ + + + + + + + + 判断是否是闰年 + + +

判断是否是闰年

+

作者：赵海洋

+ + + + + diff --git a/html/判断身份证号有效性.html b/html/判断身份证号有效性.html new file mode 100644 index 0000000..a2cea26 --- /dev/null +++ b/html/判断身份证号有效性.html @@ -0,0 +1,62 @@ + + + + + + + + 判断身份证号有效性 + + +

判断身份证号有效性

+

作者: 赵海洋

+ + + + + + diff --git a/html/如何响应鼠标点击事件.html b/html/如何响应鼠标点击事件.html new file mode 100644 index 0000000..a576594 --- /dev/null +++ b/html/如何响应鼠标点击事件.html @@ -0,0 +1,23 @@ + + + + + + + + 如何响应鼠标点击事件 + + +

如何响应鼠标点击事件

+

作者：赵海洋

+
+ + 0 + +
+ + diff --git a/html/斐波那契数列生成器.html b/html/斐波那契数列生成器.html new file mode 100644 index 0000000..64b01c9 --- /dev/null +++ b/html/斐波那契数列生成器.html @@ -0,0 +1,40 @@ + + + + + + + + 斐波那契数列生成器 + + +

斐波那契数列生成器

+

作者：赵海洋

+

斐波那契数列由0和1开始，之后的斐波那契数就是由之前的两数相加而得出。

+
+ + +
+

+ + + \ No newline at end of file diff --git a/html/派生成器.html b/html/派生成器.html new file mode 100644 index 0000000..adeb27f --- /dev/null +++ b/html/派生成器.html @@ -0,0 +1,51 @@ + + + + + + + + 派生成器 + + +

派生成器

+

作者：赵海洋

+ + +

🥧 = 3.14

+ + + diff --git a/html/海战.html b/html/海战.html new file mode 100644 index 0000000..23a6d2f --- /dev/null +++ b/html/海战.html @@ -0,0 +1,103 @@ + + + + + + + JS notebook + + + +
+
+
+ + + + diff --git a/html/点击翻动.html b/html/点击翻动.html new file mode 100644 index 0000000..46a836f --- /dev/null +++ b/html/点击翻动.html @@ -0,0 +1,87 @@ + + + + + + + 点击翻动 + + + +

点击翻动

+

作者：赵鑫

+
+
+
+

正面

+
+
+

背面

+
+
+
+ + + diff --git a/html/生成给定范围的随机整数.html b/html/生成给定范围的随机整数.html new file mode 100644 index 0000000..8aa004c --- /dev/null +++ b/html/生成给定范围的随机整数.html @@ -0,0 +1,29 @@ + + + + + + + 生成给定范围的随机整数 + + +

生成给定范围的随机整数

+

作者：赵海洋

+

例如： 生成1-10范围的随机整数

+

随机数:

+ + + + diff --git a/html/练习1.html b/html/练习1.html new file mode 100644 index 0000000..70f209c --- /dev/null +++ b/html/练习1.html @@ -0,0 +1,52 @@ + + + + + + + 练习 + + +

判断是否是闰年

+

作者: 赵海洋

+
+ 判断是否是闰年
+ 判断是否是闰年（在新的页面显示） +
+
+

春晓

+

[唐] 孟浩然

+

春眠不觉晓，
处处闻蹄鸟。
夜来风雨声，
花落知多少？

+
+

+ + + + + + +

+ + diff --git a/html/练习2.html b/html/练习2.html new file mode 100644 index 0000000..fe301f2 --- /dev/null +++ b/html/练习2.html @@ -0,0 +1,41 @@ + + + + + + + + 判断是否是闰年 + + +

判断是否是闰年

+

作者: 赵海洋

+ + + + + \ No newline at end of file diff --git a/html/链接的练习.html b/html/链接的练习.html new file mode 100644 index 0000000..62cc42f --- /dev/null +++ b/html/链接的练习.html @@ -0,0 +1,32 @@ + + + + + + + 链接的练习 + + + +

链接的练习

+ + + diff --git a/html/颜色记录器.html b/html/颜色记录器.html new file mode 100644 index 0000000..e7d7dfa --- /dev/null +++ b/html/颜色记录器.html @@ -0,0 +1,59 @@ + + + + + + + 颜色记录器 + + + +

颜色记录器

+ + + +
+
红
red
+
绿
green
+
蓝
blue
+
+ + + diff --git a/image/cat.png b/image/cat.png new file mode 100644 index 0000000..139e30f Binary files /dev/null and b/image/cat.png differ diff --git a/image/ryan.png b/image/ryan.png new file mode 100644 index 0000000..3023ed2 Binary files /dev/null and b/image/ryan.png differ diff --git a/记忆游戏/game.js b/记忆游戏/game.js new file mode 100644 index 0000000..38833f3 --- /dev/null +++ b/记忆游戏/game.js @@ -0,0 +1,60 @@ +const 表情包 = Array.from("🐈🐕🐟🔮🍎⚡⛵🐰"); +const 翻开的卡片 = []; +let 开始时间, 翻对的数量; + +document.body.addEventListener("click", (e) => { + if (e.target.tagName == "BUTTON") 开始游戏(); + else if (e.target.tagName == "CARD") 翻开(e.target); +}); + +function 开始游戏() { + startButton.style.display = "none"; + gameBoard.replaceChildren(); // 清空元素的所有子元素 + 翻开的卡片.length = 0; // 清空数组 + 开始时间 = new Date(); + 翻对的数量 = 0; + const 候选表情 = [...表情包, ...表情包]; + while (候选表情.length > 0) { + const x = Math.floor(Math.random() * 候选表情.length); + const 卡片 = document.createElement("card"); //创建一个card元素 + 卡片.dataset["表情"] = 候选表情[x]; + gameBoard.appendChild(卡片); + 候选表情.splice(x, 1); + } +} + +function 翻开(卡片) { + if (翻开的卡片.length < 2 && 卡片.innerText == '') { + 翻开的卡片.push(卡片) + 卡片.innerText = 卡片.dataset['表情'] + + if (翻开的卡片.length == 2) { + setTimeout(() => { + if (翻开的卡片[0].innerText == 翻开的卡片[1].innerText) { + 翻对的数量++ + 翻开的卡片[0].classList.add('gray') + 翻开的卡片[1].classList.add('gray') + if (翻对的数量 == 表情包.length) { + if (confirm('恭喜你成功了！再玩一次么？')) 开始游戏() + else startButton.style.display = 'inline-block' + } + } else { + 翻开的卡片[0].innerText = '' + 翻开的卡片[1].innerText = '' + } + 翻开的卡片.length = 0 // 清空数组 + }, 400) + } + } +} + + + +setInterval(() => { + if (翻对的数量 !== 表情包.length) { + const seconds = Math.round((new Date() - 开始时间) / 1000) + gameTime.innerText = `${seconds} 秒` + } +}, 500) + +开始游戏() diff --git a/记忆游戏/index.html b/记忆游戏/index.html new file mode 100644 index 0000000..26bf027 --- /dev/null +++ b/记忆游戏/index.html @@ -0,0 +1,15 @@ + + + + + + + + 记忆游戏 + + +

记忆游戏

+
+ + + diff --git a/记忆游戏/style.css b/记忆游戏/style.css new file mode 100644 index 0000000..d3beb05 --- /dev/null +++ b/记忆游戏/style.css @@ -0,0 +1,43 @@ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; +} + +body { + color: white; + padding: 50px ; + background-color: rgb(42, 91, 219); + user-select: none; +} + +#gameBoard { + margin-top: 10px; + width: 430px; + display: flex; + flex-flow: row wrap; + gap: 10px; +} + +card { + width: 100px; + height: 100px; + font-size: 80px; + line-height: 100px; + text-align: center; + border-radius: 8px; + background-color: rgb(42, 42, 133); + cursor: pointer; +} + +.gray { + filter: grayscale(75%); +} + +time { + font-size: 20px; +} + +button { + padding: 5px; +} \ No newline at end of file