bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
历届学生/front-end-team/每天课程/2022-03-23/index.html Normal file
View File

@@ -0,0 +1,35 @@
<!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>Document</title>
</head>
<body>
<select name="" id="">
<option value="null">-请选择搜索引擎-</option>
<option value="https://www.baidu.com/s?wd=">百度</option>
<option value="https://www.google.com.hk/search?q=">谷歌</option>
<option value="https://www.so.com/s?q=">360搜索</option>
</select>
<input type="text" placeholder="输入关键字">
<button>搜索</button>
</body>
<script>
var button = document.querySelector("button"),
searchKeyWord = document.querySelector("input"),
select = document.querySelector("select");
button.onclick = function () {
var youSelect = select.selectedOptions[0].value;
if (youSelect == "null") {
alert("请选择搜索引擎")
} else {
open(`${youSelect}${searchKeyWord.value}`)
}
}
</script>
</html>

75
历届学生/front-end-team/每天课程/2022-03-23/message.html Normal file
View File

@@ -0,0 +1,75 @@
<!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>
* {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.main {
width: 400px;
height: 300px;
border: 1px solid #000;
position: relative;
}
.main textarea {
width: 100%;
height: 100%;
resize: none;
}
.main .tips {
position: absolute;
right: 10px;
bottom: 10px;
}
.hui {
color: #cfc8c8;
}
.red {
color: red;
}
</style>
</head>
<body>
<div class="main">
<textarea name="" id=""></textarea>
<span class="tips hui">100/100</span>
</div>
</body>
<script>
var message = document.querySelector("textarea"),
tips = document.querySelector(".main .tips"),
total = 100;
message.oninput = function () {
var sy = total - message.value.length;
if (sy <= 0) {
// 超过限制
tips.innerText = "已达限制"
// replace 替换，将 hui 替换 成 red
tips.classList.replace("hui", "red")
message.value = message.value.substring(0, 100)
} else {
tips.innerText = `100/${sy}`
tips.classList.replace("red", "hui")
}
}
</script>
</html>

64
历届学生/front-end-team/每天课程/2022-03-23/search.html Normal file
View File

@@ -0,0 +1,64 @@
<!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>
</head>
<body>
<input type="text" placeholder="输入关键字">
<ul></ul>
</body>
<script>
var result = [];
var list = [
'明天天气不好', '天气很好', '我的心情很好', '我不想学编程', '编程是我快乐',
'明天我想学习', '明天我们出去玩'
];
var mes = document.querySelector("input"),
ul = document.querySelector("ul");
mes.oninput = function () {
result = []
if (mes.value.length != 0) {
for (var i = 0; i < list.length; i++) {
if (list[i].includes(mes.value)) {
var spanText = `<span style="color:red">${mes.value}</span>`
var pushText = list[i].replace(mes.value, spanText)
result.push(pushText)
}
}
renderHTML()
} else {
ul.innerHTML = ""
}
}
function renderHTML() {
var html = ""
console.log(result); // 明天
// Array.prototype.forEach = function(callback) {
// for(var i = 0; i < this.length; i++) {
// callback(this[i], i, this)
// }
// }
result.forEach(function (v, i) {
html += `<li>${v}</li>`
})
ul.innerHTML = html
}
</script>
</html>

65
历届学生/front-end-team/每天课程/2022-03-23/富强.html Normal file
View File

@@ -0,0 +1,65 @@
<!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>
body {
height: 100vh;
position: relative;
}
span {
position: absolute;
transition: all 1s;
user-select: none;
}
</style>
</head>
<body>
</body>
<script>
var index = 0;
var text = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"]
var body = document.querySelector("body")
body.onclick = function (e) {
var x = e.x,
y = e.y;
var span = document.createElement("span")
span.innerText = text[index]
span.style = `
left: ${x}px;
top: ${y}px;
color: hsla(${parseInt(Math.random() * 360)},100%,50%,1);
`
body.appendChild(span)
motion(span)
index++
if (index > 11) {
index = 0
}
}
function motion(el) {
// 让span 的top 自减 150px，也就是向上运动
setTimeout(function() {
el.style.top = `${parseInt(el.style.top) - 150}px`
}, 100)
// 运动完成后从body中删除这个span标签
setTimeout(function() {
body.removeChild(el)
}, 1200)
}
</script>
</html>

25
历届学生/front-end-team/每天课程/2022-03-23/过渡.html Normal file
View File

@@ -0,0 +1,25 @@
<!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>
.box {
width: 100px;
height: 100px;
background: red;
transition: all 0.5s
}
.box:hover {
width: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>