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

96
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/hb.html Normal file
View File

@@ -0,0 +1,96 @@
<!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;
}
img{
width: 130px;
height: 103px;
position: fixed;
cursor: pointer;
}
body{
height: 100vh;
}
</style>
</head>
<body>
</body>
<script>
// 生成随机出现的红包
// 计算红包随机出现的最大x轴范围
//{client}
// 创建红包img，为红包设置定位（left 随机最大范围出现 0 ~ offsetLeft）
// 让红包动起来
// 点击红包可以拆开（弹窗，告诉你中了什么奖项）
// 注意：弹窗打开时候，所有红包需要先暂停运动(停止创建红包)，关闭弹窗的时候，你点击的红包消失，其他红包继续运动
//获取body的宽度，doucmen.body(虚拟对象)
// var clientWidth = document.body.clientWidth,
// clientHeight = document.body.clientHeight
var { clientWidth,clientHeight } = document.body
var offsetLeft = clientWidth - 130;
// console.log(clientWidth)
function createdHB() {
// console.log("创建红包")
var rendomLeft = Math.random() * offsetLeft
var img = document.createElement("img");
//创建ing图像
img.src = "./hb1.png";
img.style = `left:${rendomLeft}px ;
top: -130px`;
// console.log(img);
$("body").appendChild(img);
sport(img);
}
createdHB();
function sport(img){
//定义新曾一个img的id 用于清空每个图片的定时器
img.intervalId = setInterval(() => {
var oldTop = Number(img.style.top.replace("px",""));
//console.log("img.style.top:",);
var newTop = oldTop + 1;
img.style.top = `${newTop}px`
if( newTop > clientHeight){
$("body").removeChild(img);
clearInterval(img.intervalId);
}
},4)
}
setInterval(() =>{
createdHB()
},500)
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

BIN
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/hb1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

181
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/hb2.html Normal file
View File

@@ -0,0 +1,181 @@
<!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>红包雨2</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
}
img {
width: 110px;
height: 83px;
position: fixed;
}
.alert {
width: 100%;
height: 100%;
position: fixed;
z-index: 999;
display: none;
}
.zz {
width: 100%;
height: 100%;
background: #000000a8;
position: fixed;
z-index: 1;
}
.text {
width: 300px;
height: 250px;
background: #fff;
position: fixed;
z-index: 2;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
padding: 11px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.text .title {
height: 40px;
display: flex;
align-items: center;
border-bottom: 1px solid #d5d5d5;
}
.text .close {
position: absolute;
right: 10px;
top: 4px;
font-size: 20px;
cursor: pointer;
user-select: none;
}
.text .content {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
</style>
</head>
<body>
<div class="alert">
<div class="zz"></div>
<div class="text">
<div class="close"> x </div>
<div class="title">恭喜中奖</div>
<div class="content"></div>
</div>
</div>
</body>
<script>
//1、获取屏幕的宽高（clineWidth，clienHight）
//2、创建图片元素
//3、产生随机数加到图片的top值上
//4、改变图片的top值，让图片动起来
//5、点击红包，所有红包暂停
var { clientHeight, clientWidth } = document.body;
//console.log(clientWidth);
var offetLeft = clientWidth - 110,
gid = null,
gimg = null;
function createdHB() {
var randomLeft = Math.random() * offetLeft;
var img = document.createElement("img");
img.src = "./hb1.png"
img.style = `left:${randomLeft}px ;
`;
//console.log(img)
$("body").appendChild(img);
img.onclick = () => {
probability()
gimg = img;
img.src = "./hb2.png"
$(" .alert").style.display = "block";
//使用img的虚拟dom清空setinterval
_("img").forEach((v, i) => {
clearInterval(v.clienId)
})
clearInterval(gid);
}
sport(img);
}
$(".text .close").onclick = () => {
$(" .alert ").style.display = "none";
$("body").removeChild(gimg);
_("img").forEach((v) => {
sport(v);
})
auto();
}
createdHB();
function sport(img) {
img.clienId = setInterval(() => {
var oldTop = Number(img.style.top.replace("px", ""));
img.style.top = `${oldTop + 1}px`;
if (oldTop > clientHeight) {
$("body").removeChild(img);
clearInterval(img.clienId);
}
}, 10)
}
function auto() {
gid = setInterval(() => {
createdHB();
}, 500)
}
//随机中奖率
function probability() {
var probabilityNums =Number(( Math.random()*10).toFixed(4))
if( probabilityNums < 0.0002){
$(".content").innerHTML = "恭喜中得一等奖！"
}else if(probabilityNums > 0.0001 && probabilityNums <8){
$(".content").innerHTML = "恭喜中得三等奖！"
}else{
$(".content").innerHTML = "恭喜中得二等奖！"
}
}
auto();
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

BIN
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/hb2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

79
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/tabs2.html Normal file
View File

@@ -0,0 +1,79 @@
<!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>tabs切换</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 20px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<ul class="title">
<div></div>
<li class="active">社会</li>
<li>娱乐</li>
<li>体育</li>
<li>军事</li>
</ul>
<ul class="content">
<li class="active">社会内容</li>
<li>娱乐内容</li>
<li>体育内容</li>
<li>军事内容</li>
</ul>
</body>
<script>
var title = $("title"),
content = $("content");
_(".title li").forEach((v,i) => {
v.onclick = () => {
//console.dir(v);
_(".title li").forEach((val,index) => {
val.className = ""
_(".content li")[index].className = ""
})
v.className = "active";
_(".content li")[i].className = "active"
}
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

64
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/tabs_js案例.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>tabs_js案例</title>
<style>
.title {
display: flex;
}
.title li {
margin-right: 20px;
}
.active {
color: red;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<ul class="title">
<li class="active">社会</li>
<li>娱乐</li>
<li>体育</li>
<li>军事</li>
</ul>
<ul class="content">
<li class="active">社会内容</li>
<li>娱乐内容</li>
<li>体育内容</li>
<li>军事内容</li>
</ul>
</body>
<script>
_(".title li").forEach((v,i) => {
v.onclick = () =>{
// console.log(v);
_(".title li").forEach((val,index) => {
val.className=""
_(".content li")[index].className = ""
})
v.className = "active"
_(".content li")[i].className = "active"
}
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

160
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/tabsv2.html Normal file
View File

@@ -0,0 +1,160 @@
<!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>tabsv2</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 20px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<!-- <ul class="title"></ul>
<ul class="content"></ul> -->
<ul class="title">
</ul>
<ul class="content">
</ul>
</body>
<script>
var tabsList = [
{
title: '社会',
content: [
{
title: '社会新闻',
time: '2023',
text: '主题内容部分'
}
]
},
{
title: '娱乐',
content: [
{
title: '娱乐新闻1',
time: '2023',
text: '主题内容部分'
},
{
title: '娱乐新闻2',
time: '2023',
text: '主题内容部分'
}
]
},
{
title: '体育',
content: [
{
title: '娱乐新闻1',
time: '2023',
text: '主题内容部分'
},
{
title: '体育新闻2',
time: '2023',
text: '主题内容部分'
},
{
title: '体育新闻3',
time: '2023',
text: '主题内容部分'
}
]
},
{
title: '军事',
content: [
{
title: '娱乐新闻1',
time: '2023',
text: '主题内容部分'
},
{
title: '军事新闻2',
time: '2023',
text: '主题内容部分'
},
{
title: '军事新闻3',
time: '2023',
text: '主题内容部分'
}
]
}
]
var title = $(".title"),
content = $(".content");
function renderTitle() {
tabsList.forEach((v, i) => {
title.innerHTML += `<li class=" ${ i == 0 ? 'active' : ''}"> ${v.title}</li>`//三目运算符给第一个添加样式
content.innerHTML += `<li class="${ i == 0 ? 'active' : ''}">
${v.content.map(v => {
return `<p>${v.title}</p>`
}).toString().replaceAll(",", "")
}
</li> `
})
bindClick()
}
function bindClick() {
_(".title li").forEach((v,i) => {
v.onclick = () => {
_(".title li").forEach((val,index) => {
//先清空样式，再添加样式
val.className=""
_(".content li")[index].className = ""
})
v.className = "active"
_(".content li")[i].className = "active"
}
})
}
renderTitle()
function SearchBaidu(text) {
open(`https://www.baidu.com/s?wd=${text}`)
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

69
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/关闭弹窗.html Normal file
View File

@@ -0,0 +1,69 @@
<!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;
}
body {
height: 3000px;
}
.gg {
width: 200px;
height: 200px;
background: red;
position: fixed;
right: 0;
bottom: 0;
}
.gg span {
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
cursor: pointer;
user-select: none;
}
</style>
</head>
<body>
<div class="gg">
<span> x </span>
</div>
</body>
<script>
var close = $(".gg span"),
gg = $(".gg"),
nums = 0
close.onclick = () => {
nums += 1;
if (nums == 1){
SearchBaidu()
}
if (nums == 3){
gg.style.display = "none"
}
}
function SearchBaidu() {
open("https://www.baidu.com")
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

84
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/富强2.html Normal file
View File

@@ -0,0 +1,84 @@
<!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>富强2</title>
<style>
* {
margin: 0;
padding: 0;
}
span {
user-select: none;
position: fixed;
transition: all 1s;
}
.box{
width: 50px;
height: 50px;
border-radius: 100%;
background: red;
}
body {
height: 100vh;
}
</style>
</head>
<body>
</body>
<script>
// 产生文字
// 给网页绑定点击事件，获取到鼠标点击时候产生的 x y 坐标
// 使用下标来依次读取 数组中的文字，如果读完了回第一个继续轮回
// 使用 文字 生成 标签，并用js为标签设置定位，left top 距离 就是 xy 坐标
// 把生成好的 标签 放到 网页上，显示出来
// 让文字消失
var textArr = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"];
var i = 0;
$("body").onclick = (e) =>{
//e是个对象 e = {}
var { x,y } = e;
//console.log( x,y );
//读数组
//console.log(textArr[i])
var span = document.createElement("div");
//把数组中的内容放到span的标签中
span.innerText = textArr[i]
span.style = `
color: hsla(${parseInt(Math.random() * 360)},100%,50%,1);
left:${x}px;
top: ${y}px;
`
console.log(span);
$("body").appendChild(div)
sport(span,y);
i++
if( i > 11){
i=0
}
}
function sport(span,y){
setTimeout(() => {
span.style.top = `${y-100}px`
}, 200)
setTimeout(() => {
$("body").removeChild(span)
}, 1350);
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

84
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/富强_js案例.html Normal file
View File

@@ -0,0 +1,84 @@
<!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>富强_js案例</title>
<style>
* {
margin: 0;
padding: 0;
}
span {
user-select: none;
transition: all 1s;
position: fixed;
}
body {
height: 100vh;
}
</style>
</head>
<body>
</body>
<script>
// 产生文字
// 给网页绑定点击事件，获取到鼠标点击时候产生的 x y 坐标
// 使用下标来依次读取 数组中的文字，如果读完了回第一个继续轮回
// 使用 文字 生成 标签，并用js为标签设置定位，left top 距离 就是 xy 坐标
// 把生成好的 标签 放到 网页上，显示出来
var textarr = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
var i = 0
$("body").onclick = (e) => {
//var x=e.x,
//y=e.y;
var { x, y } = e;//对象
//console.log(x,y);
var span = document.createElement("span");
span.innerText = textarr[i]
span.style = `
color:hsla(${parseInt(Math.random() * 360)},100%,50%,1);
left:${x}px;
top:${y}px;
`
console.log(span);
$("body").appendChild(span)//添加元素
sport(span, y)
i++
if (i > 11) {
i = 0
}
}
function sport(span, y) {
setTimeout(() => {
span.style.top = `${y - 200}px`
}, 200)
setTimeout(() => {
$("body").removeChile(span)
}, 1250)
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

158
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/测试.html Normal file
View File

@@ -0,0 +1,158 @@
<!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>tabs切换</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 20px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<ul class="title">
</ul>
<ul class="content">
</ul>
</body>
<script>
var tabsList = [
{
title: '社会',
content: [
{
title: '社会新闻',
time: '2023',
text: '主题内容部分'
}
]
},
{
title: '娱乐',
content: [
{
title: '娱乐新闻1',
time: '2023',
text: '主题内容部分'
},
{
title: '娱乐新闻2',
time: '2023',
text: '主题内容部分'
}
]
},
{
title: '体育',
content: [
{
title: '娱乐新闻1',
time: '2023',
text: '主题内容部分'
},
{
title: '体育新闻2',
time: '2023',
text: '主题内容部分'
},
{
title: '体育新闻3',
time: '2023',
text: '主题内容部分'
}
]
},
{
title: '军事',
content: [
{
title: '娱乐新闻1',
time: '2023',
text: '主题内容部分'
},
{
title: '军事新闻2',
time: '2023',
text: '主题内容部分'
},
{
title: '军事新闻3',
time: '2023',
text: '主题内容部分'
}
]
}
]
var title = $(".title"),
content = $(".content");
function renderTitle() {
tabsList.forEach((v, i) => {
// console.log(v)
//向title中添加li
title.innerHTML += `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`
content.innerHTML += `<li class="${i == 0 ? 'active' : ''}">
${
v.content.length == 0 ? `<p>暂无数据</p>` : v.content.map(v => {
return `<p>${v.title}</p>`//p中间显示title部分内容
}).toString().replaceAll(",", "")
}
</li>`
})
bindClick()
}
renderTitle()
function bindClick() {
_(".title li").forEach((v, i) => {
v.onclick = () => {
_(".title li").forEach((val,index) => {
val.className = ""
_(".content li")[index].className = ""
})
v.className = "active"
_(".content li")[i].className = "active"
}
})
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

128
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/淘宝头部2.html Normal file
View File

@@ -0,0 +1,128 @@
<!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>淘宝头部定位2</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
outline: none;
}
body {
height: 3000px;
background: rosybrown;
}
.header {
width: 100%;
height: 60px;
display: flex;
justify-content: center;
}
.header ul {
height: 100%;
display: flex;
margin-left: 10px;
}
.header li {
display: flex;
align-items: center;
}
.header input {
width: 600px;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border: 1px solid #39bc30;
box-sizing: border-box;
background: white;
padding-left: 42px;
}
.header .btn {
width: 116px;
height: 100%;
background: #39bc30;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
font-size: 16px;
font-weight: 700;
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
}
.test {
width: 100%;
height: 60px;
margin-bottom: 60px;
}
</style>
</head>
<body>
<div class="test"></div>
<div class="header">
<input type="text" placeholder="请输入内容">
<div class="btn">搜索</div>
<ul class="list">
<li>首页1</li>
<li>首页2</li>
<li>首页3</li>
<li>首页4</li>
</ul>
</div>
</body>
<script>
// 网页绑定滚动事件
//获取跟动的距离
// 大于某个值 给html固定定位，反之不加
var body = $("body"),
header = $(".header"),
test = $(".test"),
list = $(".list");
body.onscroll = () => {
var offsetTop = document.documentElement.scrollTop;
console.log("offsetTop:", offsetTop);
if (offsetTop > 60) {
// header.style = `
// position:"fixed"
// top:"0"
// background:"white"
// `
header.style.position = "fixed"
header.style.top = "0"
header.style.background = "white"
} else {
header.style.position = "static";
header.style.background = "red";
}
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

56
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/淘宝头部定位_js案例.html Normal file
View File

@@ -0,0 +1,56 @@
<!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>淘宝头部定位_js案例</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 3000px;
}
.header{
width: 100%;
height: 60px;
background: red;
}
.test{
width: 100%;
height: 60px;
margin-bottom: 60px;
}
</style>
</head>
<body>
<div class="test"></div>
<div class="header"></div>
</body>
<script>
// 网页绑定事件
// 获取滚动的距离
// 大于某个值 给html固定定位，反之不加
var body=$("body"),
header = $(".header");
body.onscroll = () =>{
var offsetTop = document.documentElement.scrollTop;
console.log("offsetTop:",offsetTop);
// if(offsetTop > 60){
// header.style.position = "fixed"
// header.style.top = "0"
// }else{
// header.style.position = "static";
// }
}
//封装获取元素
function $(className){
return document.querySelector(className)//返回虚拟DOM
}
</script>
</html>

85
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/百度建议3.html Normal file
View File

@@ -0,0 +1,85 @@
<!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>百度搜索建议2</title>
<style>
.list li {
cursor: pointer;
}
</style>
</head>
<body>
<input type="text" name="" id="">
<button>搜索</button>
<ul class="list"></ul>
</body>
<script>
// 实现搜索建议
// 1 放置input，button，ul li
// 2 给input绑定 oninput 事件，实时获取用户输入的 东西
// 3 从本地的所有搜索建议的数组中，筛选出包含 用户 输入内容 的 搜索建议
// 4 把符合条件的 展示 在 ul li 里面给用户看
// 5 给 ul li 中所有 li 都绑定点击事件，点击时候获取 li 的文本内容，并为输入框重新赋值，
// 然后实现百度搜索。
// 关键字加红
var keyWordList = [
'今天出太阳了', '太阳很好', '不喜欢js学习',
'js编程很简单', '喜欢很简单的html', '今天不想学习html，只想出去玩',
'今天不想学习css', '今晚出去飙车', '明天出去修车'
];
var newKeyList = []
var input = $("input"),
ul = $("ul"),
ul_li = $("ul li");
input.oninput = () => {
// console.log(input.value);
newKeyList = []
keyWordList.forEach( (v,i) => {
// console.log(v);
if(v.includes(input.value)){
newKeyList.push(v)//在数组中添加数据
}
})
renderUl()
}
function renderUl(){
var liHtml = ""
newKeyList = forEach(v => {
ul.innerHTML +=`<li>${V}</li>`
})
bindLiClick()
}
function bindLiClick() {
_("ul li").forEach(v => {
v.onclick =() => {
input.value= v.innerText
SearchBaidu(v.innerText)
}
})
}
function SearchBaidu(text) {
open(`https://www.baidu.com/s?wd=${text}`)
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

94
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/百度搜索建议2.html Normal file
View File

@@ -0,0 +1,94 @@
<!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>百度搜索建议2</title>
<style>
.list li{
cursor: pointer;
}
</style>
</head>
<body>
<input type="text" name="" id="">
<button>搜索</button>
<ul class="list"></ul>
</body>
<script>
// 实现搜索建议
// 1 放置input，button，ul li
// 2 给input绑定 oninput 事件，实时获取用户输入的 东西
// 3 从本地的所有搜索建议的数组中，筛选出包含 用户 输入内容 的 搜索建议
// 4 把符合条件的 展示 在 ul li 里面给用户看
// 5 给 ul li 中所有 li 都绑定点击事件，点击时候获取 li 的文本内容，并为输入框重新赋值，
// 然后实现百度搜索。
// 关键字加红
//创建数据
var keyWordList = [
'今天出太阳了', '太阳很好', '不喜欢js学习',
'js编程很简单', '喜欢很简单的html', '今天不想学习html，只想出去玩',
'今天不想学习css', '今晚出去飙车', '明天出去修车'
];
var newKeyList = []
var input = $("input"),
button = $("button"),
ul = $(".list");
ul_li = $("ul li")
input.oninput = () => {
newKeyList = []
// console.log(newKeyList)
if (input.value.length > 0) {
keyWordList.forEach(v => {
if (v.includes($("input").value)) {
var text = v.replace(input.value, `<span style="color:red;">${input.value}</span>`)
newKeyList.push(text)
}
})
console.log("符合条件的数据：",newKeyList);
renderUl()
}else{
ul.innerHTML = ""
}
}
//给ul li添加内容
function renderUl (){
ul.innerHTML = ""
newKeyList.forEach( v => {
ul.innerHTML += `<li>${v}</li>`
})
bindClick()
}
//利用forEach循环给li绑定点击事件
function bindClick() {
_("ul li").forEach(v => {
v.onclick = () =>{
input.value = v.innerText
SearchBaidu(v.innerText)
}
})
}
button.onclick = () => SearchBaidu(input.value)
//打开新的窗口
function SearchBaidu(text) {
open(`https://www.baidu.com/s?wd=${text}`)
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

89
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/百度搜索建议_js案例.html Normal file
View File

@@ -0,0 +1,89 @@
<!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>百度搜索建议_js案例</title>
</head>
<body>
<input type="text" name="" id="">
<button>搜索</button>
<ul>
</ul>
</body>
<!-- 实现搜索建议
给input绑定oninput事件，实时获取用户输入的文本
从本地的所有搜索建议的数组中，筛选出包含用户输入内容的搜索建议
把符合条件的展示再ul li 里面给用户看
给ul li 中所有的li都绑定点击事件，点击时获取 li的文本内容，并为输入框赋值
然后实现百度搜索
关键字加红 -->
<script>
var keywordList = [
'今天出太阳了', '太阳很好', '不喜欢js学习',
'js编程很简单', '喜欢很简单的html', '今天不想学习html，只想出去玩',
'今天不想学习css', '今晚出去飙车', '明天出去修车'
];
var newKeyList = [];
$("input").oninput = () => {
// console.dir($("input").value);
newKeyList = []
if ($("input").value.length > 0) {
keywordList.forEach((v, i) => {
if (v.includes($("input").value)) {
var text = v.replace($("input").value,`<span style="color:red;">${$("input").value}</span>`)
newKeyList.push(text)
}
})
console.log("符合条件的数据：", newKeyList);
renderUl()
}
else {
$("ul").innerHTML = ""
}
}
function renderUl() {//渲染ul 添加标签
var liHtml = ""//清空上一次的记录
newKeyList.forEach(v => {
liHtml += `<li>${v}</li>`
})
// console.log(liHtml);
$("ul").innerHTML = liHtml
bindLiClick();
}
function bindLiClick() {
// console.log(v);
_("ul li").forEach(v => {//循环添加onclick事件
v.onclick = () => {
console.log(v);
$("input").value = v.innerText
SearchBaidu(v.innerText)
}
})
}
$("button").onclick = () =>{
SearchBaidu($("input").value)
}
// for(var i = 0;i<keywordList.length; i++){
// console.log(keywordList[i]);
// console.log(i);
// }
//封装获取元素
function SearchBaidu(text){
open(`https://www.baidu.com/s?wd=${text}`)
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>