添加一堆文件
This commit is contained in:
parent
c240751bac
commit
414a5c9416
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
63
html/random picture from unsplash.html
Normal file
63
html/random picture from unsplash.html
Normal file
@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>random picture from unsplash</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
|
||||
}
|
||||
img {
|
||||
box-shadow: 4px 4px 4px rgb(251, 255, 0);
|
||||
}
|
||||
.loading {
|
||||
border: 1px dashed rgb(0, 255, 242);
|
||||
opacity: 0.5;
|
||||
box-shadow: none;
|
||||
}
|
||||
.centered {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
text-shadow: 0 0 2px rgb(255, 0, 0);
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<p>click to change this picture</p>
|
||||
<img id="image" src="https://source.unsplash.com/random/200x200" onclick="changePicture()" />
|
||||
<div id="loading" class="centered hide">loading</div>
|
||||
</div>
|
||||
<script>
|
||||
function changePicture() {
|
||||
loading.classList.remove('hide')
|
||||
image.classList.add('loading')
|
||||
let tmpImg = new Image()
|
||||
tmpImg.crossOrigin = 'Anonymous'
|
||||
tmpImg.src = 'https://source.unsplash.com/random/200x200?random=' + performance.now()
|
||||
tmpImg.onload = function () {
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.height = this.naturalHeight
|
||||
canvas.width = this.naturalWidth
|
||||
const context = canvas.getContext('2d')
|
||||
context.drawImage(this, 0, 0)
|
||||
const picData = canvas.toDataURL()
|
||||
image.src = picData
|
||||
image.classList.remove('loading')
|
||||
loading.classList.add('hide')
|
||||
}
|
||||
}
|
||||
</script></body>
|
||||
</html>
|
||||
35
html/冰雹数列生成器.html
Normal file
35
html/冰雹数列生成器.html
Normal file
@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="" />
|
||||
<title>冰雹数列生成器</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>冰雹数列生成器</h1>
|
||||
<h2>作者: 赵海洋</h2>
|
||||
<p>
|
||||
随便想一个正整数。如果它是奇数，则把它乘以3再加1。如果它是偶数，则把它除以2。对每一个新产生的数都运用这个规则，你知道会发生什么情况吗？
|
||||
数学家猜想它们都会变成1。
|
||||
</p>
|
||||
<input type="text" id="number" placeholder="输入一个正整数" />
|
||||
<button onclick="go()">生成冰雹数列</button>
|
||||
<p><code id="seq"></code></p>
|
||||
<script>
|
||||
// 冰雹数列生成器
|
||||
function* hailstone(n) {
|
||||
yield n;
|
||||
while (n != 1) yield (n = n % 2 ? 3 * n + 1 : n / 2);
|
||||
}
|
||||
|
||||
function go() {
|
||||
if (number.value.match(/^\d+$/)) {
|
||||
seq.innerText = [...hailstone(number.value)].join(", ");
|
||||
number.value = "";
|
||||
} else alert("请输入一个正整数");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
30
html/判断是否是闰年.html
Normal file
30
html/判断是否是闰年.html
Normal file
@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="" />
|
||||
<title>判断是否是闰年</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>判断是否是闰年</h1>
|
||||
<h2>作者：赵海洋</h2>
|
||||
<input type="text" id="year" placeholder="输入年份" />
|
||||
<button onclick="check()">运行</button>
|
||||
<script>
|
||||
// 判断是否是闰年
|
||||
function isleap(y) {
|
||||
return (y % 100 !== 0 && y % 4 === 0) || y % 400 === 0;
|
||||
}
|
||||
|
||||
function check() {
|
||||
if (isleap(year.value)) {
|
||||
alert("是闰年");
|
||||
} else {
|
||||
alert("不是闰年");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
62
html/判断身份证号有效性.html
Normal file
62
html/判断身份证号有效性.html
Normal file
@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="" />
|
||||
<title>判断身份证号有效性</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>判断身份证号有效性</h1>
|
||||
<h2>作者: 赵海洋</h2>
|
||||
<input type="text" id="number" placeholder="输入身份证号" />
|
||||
<button onclick="check()">运行</button>
|
||||
<script src="https://momentjs.com/downloads/moment.js"></script>
|
||||
<script>
|
||||
// 判断身份证号有效性
|
||||
function isValidIdNumber(number) {
|
||||
if (typeof number !== "string") return false;
|
||||
if (!number.match(/^\d{17}[\dx]$/)) return false;
|
||||
const digits = number.split("");
|
||||
const 大区制代码 = number.substr(0, 1), // 大区制代码
|
||||
省级行政区代码 = number.substr(0, 2), // 省级行政区代码
|
||||
地级行政区代码 = number.substr(2, 2), // 地级行政区代码
|
||||
县级行政区代码 = number.substr(4, 2), // 县级行政区代码
|
||||
出生年 = number.substr(6, 4), // 出生年
|
||||
出生月 = number.substr(10, 2), // 出生月
|
||||
出生日 = number.substr(12, 2), // 出生日
|
||||
顺序码 = number.substr(14, 3); // 顺序码
|
||||
|
||||
// 判断出生日期是否有效
|
||||
const 出生日期 = new Date(`${出生年}-${出生月}-${出生日}`);
|
||||
if (出生日期 == "Invalid Date") return false;
|
||||
|
||||
// 判断校验码是否有效
|
||||
const coefficients = [
|
||||
7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2,
|
||||
];
|
||||
let sum = 0;
|
||||
for (let i = 0; i < 17; i++) sum += digits[i] * coefficients[i];
|
||||
if ("10x98765432"[sum % 11] !== digits[17]) return false;
|
||||
|
||||
console.log("身份证号码有效");
|
||||
console.log("省级行政区代码", 省级行政区代码);
|
||||
console.log("地级行政区代码", 地级行政区代码);
|
||||
console.log("县级行政区代码", 县级行政区代码);
|
||||
console.log("生日", 出生日期.toLocaleDateString());
|
||||
console.log("岁数", moment().diff(出生日期, "years"));
|
||||
console.log("性别", 顺序码 % 2 ? "男" : "女");
|
||||
return true;
|
||||
}
|
||||
|
||||
function check() {
|
||||
alert(
|
||||
isValidIdNumber(number.value)
|
||||
? `[${number.value}]是[有效]的身份证号码`
|
||||
: `[${number.value}]是[无效]的身份证号码`
|
||||
);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
23
html/如何响应鼠标点击事件.html
Normal file
23
html/如何响应鼠标点击事件.html
Normal file
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="" />
|
||||
<title>如何响应鼠标点击事件</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>如何响应鼠标点击事件</h1>
|
||||
<h2>作者：赵海洋</h2>
|
||||
<div>
|
||||
<button onclick="counter.innerText = Number(counter.innerText) - 1">
|
||||
➖
|
||||
</button>
|
||||
<var id="counter" title="counter">0</var>
|
||||
<button onclick="counter.innerText = Number(counter.innerText) + 1">
|
||||
➕
|
||||
</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
40
html/斐波那契数列生成器.html
Normal file
40
html/斐波那契数列生成器.html
Normal file
@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="" />
|
||||
<title>斐波那契数列生成器</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>斐波那契数列生成器</h1>
|
||||
<h2>作者：赵海洋</h2>
|
||||
<p>斐波那契数列由0和1开始，之后的斐波那契数就是由之前的两数相加而得出。</p>
|
||||
<div>
|
||||
<input type="text" id="number" placeholder="输入一个正整数" />
|
||||
<button onclick="go()">生成斐波那契数列</button>
|
||||
</div>
|
||||
<p><code id="seq"></code></p>
|
||||
<script>
|
||||
// 斐波那契数列生成器
|
||||
function* fibonacci(max = 1000) {
|
||||
let current = 0
|
||||
let next = 1
|
||||
while (current < max) {
|
||||
yield current
|
||||
let prev = current
|
||||
current = next
|
||||
next += prev
|
||||
}
|
||||
}
|
||||
|
||||
function go() {
|
||||
if (number.value.match(/^\d+$/)) {
|
||||
seq.innerText = [...fibonacci(number.value)].join(', ')
|
||||
number.value = ''
|
||||
} else alert('请输入一个正整数')
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
51
html/派生成器.html
Normal file
51
html/派生成器.html
Normal file
@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="" />
|
||||
<title>派生成器</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>派生成器</h1>
|
||||
<h2>作者：赵海洋</h2>
|
||||
<input type="text" id="number" placeholder="生成位数" />
|
||||
<button onclick="go()">生成派</button>
|
||||
<p>🥧 = <code id="seq" style="line-break: anywhere">3.14</code></p>
|
||||
<script>
|
||||
// 派生成器
|
||||
function* piGenerator(n = 10) {
|
||||
n = BigInt(n);
|
||||
let p, q, d, d1;
|
||||
let k = 3n,
|
||||
a = 0n,
|
||||
b = 4n,
|
||||
a1 = 40n,
|
||||
b1 = 24n;
|
||||
|
||||
while (n > 0n) {
|
||||
[p, q, k] = [k * k, 2n * k + 1n, k + 1n];
|
||||
[a, b, a1, b1] = [a1, b1, p * a + q * a1, p * b + q * b1];
|
||||
d = ~~(a / b);
|
||||
d1 = ~~(a1 / b1);
|
||||
while (d === d1) {
|
||||
yield Number(d);
|
||||
a = (a % b) * 10n;
|
||||
a1 = (a1 % b1) * 10n;
|
||||
d = ~~(a / b);
|
||||
d1 = ~~(a1 / b1);
|
||||
n--;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function go() {
|
||||
if (number.value.match(/^\d+$/)) {
|
||||
seq.innerText = "3.3." + [...piGenerator(number.value)].join("");
|
||||
number.value = "";
|
||||
} else alert("请输入一个正整数");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
103
html/海战.html
Normal file
103
html/海战.html
Normal file
@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>JS notebook</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#dropable {
|
||||
position: absolute;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
background-color: bisque;
|
||||
}
|
||||
|
||||
#dragable {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
background-color: aquamarine;
|
||||
}
|
||||
|
||||
#dragable.dragging,
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="dropable">
|
||||
<div id="dragable" draggable="true"></div>
|
||||
</div>
|
||||
<img id="pic" src="" />
|
||||
<script>
|
||||
dragable.addEventListener("dragstart", (e) => {
|
||||
setTimeout(() => e.target.classList.add("dragging"), 0);
|
||||
e.dataTransfer.setData("offsetX", e.offsetX - 30);
|
||||
e.dataTransfer.setData("offsetToCenterY", e.offsetY - 30);
|
||||
});
|
||||
|
||||
dropable.addEventListener("dragover", (e) => {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
dropable.addEventListener("drop", (e) => {
|
||||
e.preventDefault();
|
||||
const left =
|
||||
Math.floor((e.offsetX - e.dataTransfer.getData("offsetX")) / 60) * 60;
|
||||
const top =
|
||||
Math.floor((e.offsetY - e.dataTransfer.getData("offsetY")) / 60) * 60;
|
||||
dragable.style.left = `${left}px`;
|
||||
dragable.style.top = `${top}px`;
|
||||
});
|
||||
|
||||
dragable.addEventListener("dragend", (e) => {
|
||||
e.target.classList.remove("dragging");
|
||||
});
|
||||
|
||||
function toDataURL(src, callback) {
|
||||
const image = new Image();
|
||||
image.crossOrigin = "Anonymous";
|
||||
image.src = src;
|
||||
image.onload = function () {
|
||||
const canvas = document.createElement("canvas");
|
||||
const context = canvas.getContext("2d");
|
||||
canvas.height = this.naturalHeight;
|
||||
canvas.width = this.naturalWidth;
|
||||
context.drawImage(this, 0, 0);
|
||||
const dataURL = canvas.toDataURL();
|
||||
callback(dataURL);
|
||||
};
|
||||
}
|
||||
|
||||
async function a(src) {
|
||||
const image = new Image();
|
||||
image.crossOrigin = "Anonymous";
|
||||
image.src = src;
|
||||
const canvas = document.createElement("canvas");
|
||||
const context = canvas.getContext("2d");
|
||||
canvas.height = image.naturalHeight;
|
||||
canvas.width = image.naturalWidth;
|
||||
await context.drawImage(image, 0, 0);
|
||||
return canvas.toDataURL();
|
||||
}
|
||||
|
||||
// toDataURL('https://source.unsplash.com/random/100x100', (dataURL) => {
|
||||
// console.log(dataURL)
|
||||
// pic.src = dataURL
|
||||
// })
|
||||
pic.src = a("https://source.unsplash.com/random/100x100");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
87
html/点击翻动.html
Normal file
87
html/点击翻动.html
Normal file
@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>点击翻动</title>
|
||||
<style>
|
||||
/* The flip card container - set the width and height to whatever you want.
|
||||
We have added the border property to demonstrate that the flip itself
|
||||
goes out of the box on hover (remove perspective if you don't want the
|
||||
3D effect */
|
||||
.flip-card {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
perspective: 1000px; /* Remove this if you don't want the 3D effect */
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* This container is needed to position the front and back side */
|
||||
.flip-card-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* text-align: center; */
|
||||
transition: transform 0.8s;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
/* Do an horizontal flip when you move the mouse over the flip box container */
|
||||
/* .flip-card:hover .flip-card-inner, */
|
||||
.flip .flip-card-inner {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
/* Position the front and back side */
|
||||
.flip-card-front,
|
||||
.flip-card-back {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-backface-visibility: hidden; /* Safari */
|
||||
backface-visibility: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Style the front side (fallback if image is missing) */
|
||||
.flip-card-front {
|
||||
background-color: dodgerblue;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Style the back side */
|
||||
.flip-card-back {
|
||||
transform: rotateY(180deg);
|
||||
background-color: dodgerblue;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>点击翻动</h1>
|
||||
<h2>作者：赵鑫</h2>
|
||||
<div id="card" class="flip-card">
|
||||
<div class="flip-card-inner">
|
||||
<div class="flip-card-front">
|
||||
<h1>正面</h1>
|
||||
</div>
|
||||
<div class="flip-card-back">
|
||||
<h1>背面</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
card.onclick = function () {
|
||||
if (!card.classList.contains("flip")) {
|
||||
card.classList.add("flip");
|
||||
setTimeout(function () {
|
||||
card.classList.remove("flip");
|
||||
}, 2000);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
29
html/生成给定范围的随机整数.html
Normal file
29
html/生成给定范围的随机整数.html
Normal file
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>生成给定范围的随机整数</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>生成给定范围的随机整数</h1>
|
||||
<h2>作者：赵海洋</h2>
|
||||
<p>例如： 生成1-10范围的随机整数</p>
|
||||
<p>随机数: <span id="random"></span></p>
|
||||
<button onclick="change()">换一个</button>
|
||||
<script>
|
||||
function randint(min = 1, max = 10) {
|
||||
min = Math.ceil(min);
|
||||
max = Math.floor(max);
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
function change() {
|
||||
random.innerText=randint(1, 10)
|
||||
}
|
||||
|
||||
change()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
52
html/练习1.html
Normal file
52
html/练习1.html
Normal file
@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>练习</title>
|
||||
<style>
|
||||
.yingzi {
|
||||
box-shadow: 0 0 10px 0 cyan;
|
||||
}
|
||||
.poem {
|
||||
background-color: red;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
.poem h1{
|
||||
font-size: 40px ;
|
||||
text-shadow: 1 1 4 cyan;
|
||||
}
|
||||
.poem h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.poem p {
|
||||
font-size: 40px;
|
||||
line-height: 60px;
|
||||
color: aqua;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<h1>判断是否是闰年</h1>
|
||||
<h2>作者: 赵海洋</h2>
|
||||
<hr>
|
||||
<a href="判断是否是闰年.html">判断是否是闰年</a><br/>
|
||||
<a href="判断是否是闰年.html" target="_blank">判断是否是闰年（在新的页面显示）</a>
|
||||
<hr>
|
||||
<article class="poem">
|
||||
<h1><big>春晓</big></h1>
|
||||
<h2>[唐] 孟浩然</h2>
|
||||
<p>春眠不觉晓， <br> 处处闻蹄鸟。 <br> 夜来风雨声， <br>花落知多少？</p>
|
||||
</article>
|
||||
<p>
|
||||
<img src="../image/ryan.png" height="50" class="yingzi" title="小熊:香肠 儿子" style="border: 2px red dotted"/>
|
||||
<img src="../image/ryan.png" height="80" class="yingzi" title="小熊:香肠 爸爸" style="border: 2px red dotted"/>
|
||||
<img src="../image/ryan.png" height="120" class="yingzi" title="小熊:香肠 爷爷" style="border: 2px red dotted"/>
|
||||
<img src="../image/ryan.png" height="180" class="yingzi" title="小熊:香肠 曾祖父" style="border: 2px red dotted"/>
|
||||
<img src="../image/ryan.png" height="260" class="yingzi" title="小熊:香肠 高祖父" style="border: 2px red dotted"/>
|
||||
<img src="../image/ryan.png" height="390" class="yingzi" title="小熊:香肠 " style="border: 2px red dotted"/>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
41
html/练习2.html
Normal file
41
html/练习2.html
Normal file
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="../style/common.css" />
|
||||
<title>判断是否是闰年</title>
|
||||
</script></head>
|
||||
<body>
|
||||
<h1>判断是否是闰年</h1>
|
||||
<h2>作者: 赵海洋</h2>
|
||||
<input type="text" id="year" placeholder="输入年份" />
|
||||
<button onclick="check()">判断</button>
|
||||
<script>
|
||||
// 判断是否是闰年
|
||||
function isleap(year) {
|
||||
if (year == 0) return '没有公元0年'
|
||||
if (year < 0) return '不支持公元前的年份'
|
||||
if (!year.match(/\d+/)) return '年份格式不正确'
|
||||
if (!year.match(/\d+/)) return ''
|
||||
return (
|
||||
(year / 4 == Math.floor(year / 4) && year / 100 != Math.floor(year / 100)) ||
|
||||
(year / 400 == Math.floor(year / 400) && year / 3200 != Math.floor(year / 3200)) ||
|
||||
year / 172800 == Math.floor(year / 172800)
|
||||
)
|
||||
}
|
||||
|
||||
function check() {
|
||||
let result = isleap(year.value)
|
||||
if (result === true) {
|
||||
alert('是闰年')
|
||||
} else if (result === false) {
|
||||
alert('不是闰年')
|
||||
} else {
|
||||
alert(result)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
32
html/链接的练习.html
Normal file
32
html/链接的练习.html
Normal file
@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>链接的练习</title>
|
||||
<style>
|
||||
a {
|
||||
text-decoration: none;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
border: 1px black solid;
|
||||
color: darkred;
|
||||
background-color: aliceblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>链接的练习</h1>
|
||||
<div id="links">
|
||||
<a href="https://www.youtube.com">药罐</a>
|
||||
<a href="https://imzhao.synology.me:8888">赵云</a>
|
||||
<a href="https://www.zdic.net">汉典</a>
|
||||
<a href="https://www.runoob.com">菜鸟教程</a>
|
||||
<a href="https://github.com/archtaurus">github</a>
|
||||
<a href="https://www.w3school.com.cn">w3school</a>
|
||||
<a href="https://www.shuxuele.com">数学乐</a>
|
||||
<a href="https://zh.m.wikipedia.org/">维基百科</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
59
html/颜色记录器.html
Normal file
59
html/颜色记录器.html
Normal file
@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>颜色记录器</title>
|
||||
<style>
|
||||
#colors {
|
||||
display: flex;
|
||||
flex: wrap;
|
||||
margin-top: 20px;
|
||||
}
|
||||
#colors div {
|
||||
background-color: white;
|
||||
border: 1px black solid;
|
||||
border-radius: 5px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 10px;
|
||||
color: white;
|
||||
font-weight: 900;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>颜色记录器</h1>
|
||||
<input type="text" id="colorname" placeholder="颜色名" />
|
||||
<input type="text" id="colorvalue" placeholder="颜色值" />
|
||||
<button onclick="append()">添加</button>
|
||||
<div id="colors">
|
||||
<div style="background-color: red">红<br />red</div>
|
||||
<div style="background-color: green">绿<br />green</div>
|
||||
<div style="background-color: blue">蓝<br />blue</div>
|
||||
</div>
|
||||
<script>
|
||||
function append() {
|
||||
//创建一个div元素。
|
||||
const newcolor = document.createElement("div");
|
||||
newcolor.innerHTML = `${colorname.value}<br>${colorvalue.value}`;
|
||||
newcolor.setAttribute(
|
||||
"style",
|
||||
`background-color: ${colorvalue.value};`
|
||||
);
|
||||
colors.appendChild(newcolor);
|
||||
function lion() {
|
||||
const lion = bocument.createElement("img");
|
||||
lion.setAttribute("src", "../image/ryan.png");
|
||||
lion.setAttribute();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
image/cat.png
Normal file
BIN
image/cat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 287 KiB |
BIN
image/ryan.png
Normal file
BIN
image/ryan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
60
记忆游戏/game.js
Normal file
60
记忆游戏/game.js
Normal file
@ -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)
|
||||
|
||||
开始游戏()
|
||||
15
记忆游戏/index.html
Normal file
15
记忆游戏/index.html
Normal file
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>记忆游戏</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>记忆游戏 <time id="gameTime"></time> <button id="startButton">重新开始</button></h1>
|
||||
<div id="gameBoard"></div>
|
||||
<script src="game.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
43
记忆游戏/style.css
Normal file
43
记忆游戏/style.css
Normal file
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user