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

202
历届学生/front-end-team/项目练习/学生项目/陆旗/js练习/hb.index.html Normal file
View File

@@ -0,0 +1,202 @@
<!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>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100%;
position: relative;
height: 100vh;
overflow: hidden;
}
img {
width: 80px;
position: absolute;
}
.alert {
position: fixed;
width: 100%;
height: 100%;
background: #0000008f;
display: flex;
align-items: center;
justify-content: center;
z-index: 8;
}
.alert .alert_warp {
width: 32%;
background: #fff;
height: 300px;
padding: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.alert_warp .alert_title {
display: flex;
justify-content: space-between;
height: 45px;
align-items: center;
border-bottom: 1px solid #e6e6e6;
}
.alert_title span {}
.alert_body {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.hidden {
display: none;
}
</style>
<body>
<div class="alert hidden">
<div class="alert_warp">
<div class="alert_title">
<span>恭喜中奖</span>
<span class="close">x</span>
</div>
<div class="alert_body">
恭喜抽中9折优惠券
</div>
</div>
</div>
</body>
<script>
//随机生成红包+红包移动
//点击开红包，红包点击时间，暂停红包，关闭弹窗时红包重新运动
var clientWidth = $("body").clientWidth, // 获取屏幕宽度
clientHeight = $("body").clientHeight, // 获取屏幕高度
alert = $(".alert"),
text = $(".alert_body"),
close = $(".alert_title .close"),
clickImg = null,// 保存你点击的图片的虚拟dom对象
body = $('body'),
createdId = null;// 保存创建红包的定时器
//var x = parseInt(Math.random() * (clientWidth - 80))//随机获取x坐标
//创建红包方法
function createdHb() {
var x = parseInt(Math.random() * (clientWidth - 80))
var img = document.createElement('img'); //创建红包时间和地址
img.src = './hb.png'
img.style = `
left :${x}px;
top:-105px;
`
//点击弹窗
img.onclick = function () {
clickImg = img;
probability()
alert.classList.remove("hidden")
// 停止生成红包
clearInterval(createdId)
// 停止页面上所有红包
allImgAction(2)
// var allImg = document.querySelectorAll('img') //获取所有的图片
// allImg.forEach(function (v) {
// clearInterval(v.num)
// })
// clearInterval(img.num)
}
body.appendChild(img) //插入红包事件
motion(img)
//console.log(img);
}
function motion(el) {
// 设置定时器让红包移动起来
el.num = setInterval(function () {
var topSet = parseInt(el.style.top) + 1
el.style.top = `${topSet}px`
// 超过屏幕高度删除
if (topSet > clientHeight) {
$("body").removeChild(el)
clearInterval(el.num)
}
}, 6)
}
//关闭弹窗
close.onclick = function () {
// 删除你点击的红包
$("body").removeChild(clickImg)
alert.classList.add("hidden")
// var allImg = document.querySelectorAll('img') //获取所有的图片
// allImg.forEach(function (v) {
// motion(v)
//})
// 让页面上的其他红包重新运动起来
allImgAction(1)
// 开始重新创建红包
autoCreated()
// 计算概率
}
function probability() {
var prob = Math.random();
if (prob <= 0.021) {
text.innerText = `${prob}恭喜您中了 1 折优惠券`
} else if (0.021 < prob && prob <= 0.8) {
text.innerText = `${prob}恭喜您中了 7 折优惠券`
} else if (prob > 0.8) {
text.innerText = `${prob}恭喜您中了 3 折优惠券`
}
}
function allImgAction(type) {
var allImg = document.querySelectorAll("img");
allImg.forEach(function (v) {
type == 1 ? motion(v) : clearInterval(v.num)
})
}
function autoCreated() {
createdId = setInterval(function () {
createdHb()
}, 1000)
}
autoCreated()
// createdId=setInterval(function () {
// createdHb()
// }, 1000)
function $(className) {
return document.querySelector(className) //封装统一类名
}
</script>
</html>

BIN
历届学生/front-end-team/项目练习/学生项目/陆旗/js练习/hb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

146
历届学生/front-end-team/项目练习/学生项目/陆旗/js练习/i.html Normal file
View File

@@ -0,0 +1,146 @@
<!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>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100%;
height: 100%;
position: relative;
height: 100vh;
overflow: hidden;
}
img {
width: 80px;
position: absolute;
}
.alert {
position: fixed;
width: 100%;
height: 100%;
background: #0000008f;
display: flex;
align-items: center;
justify-content: center;
z-index: 8;
}
.alert .alert_warp {
width: 32%;
background: #fff;
height: 300px;
padding: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.alert_warp .alert_title {
display: flex;
justify-content: space-between;
height: 45px;
align-items: center;
border-bottom: 1px solid #e6e6e6;
}
.alert_title span {}
.alert_body {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.hidden {
display: none;
}
</style>
<body>
<div class="alert hidden">
<div class="alert_warp">
<div class="alert_title">
<span>恭喜中奖</span>
<span class="close">x</span>
</div>
<div class="alert_body">
恭喜抽中9折优惠券
</div>
</div>
</div>
</body>
<script>
var clientHeight = $('body').clientHeigh,
clientWidth = $('body').clientWidth,
body = $('body');
img.onclick = function(){
}
function createdHb() {
var x = parseInt(Math.random() * clientHeight - 80);
var img = document.createElement('img');
img.src = './hb.png'
img.style = `
left:${x}px;
top:-100px
`
body.appendChild(img)
motion(img)
console.log(img);
}
function motion(el) {
setInterval(function () {
el.style.top = `${parseInt(el.style.top) + 1}px`
}, 6)
}
// setInterval(function () {
// createdHb()
//}, 1000)
createdHb()
function $(className) {
return document.querySelector(className) //封装统一类名
}
</script>
</html>

74
历届学生/front-end-team/项目练习/学生项目/陆旗/js练习/index.html Normal file
View File

@@ -0,0 +1,74 @@
<!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>
</body>
<script>
// console 调试
// console.log ("js学习")
//document.title = "hahaha"
//window.alert("hahah")
//var UserName="陆琪"
// console.log(UserName);
var money = 100;
(money > 20) ? console.log("吃点好的") : console.log("吃拉面")
//if (money>20) {
// console.log("吃点好的");
//}
// else{
//console.log("吃拉面");
// }
//var cj = 69
//if (cj < 60) {
// console.log("成绩不合格");
//} else if (cj >= 60 && cj <= 70) {
// console.log("成绩一般");
//} else if (cj >= 80 && cj <= 90) {
// console.log("成绩良好");
// } else if (cj > 90 && cj <= 100) {
// console.log("成绩优秀");
// }
// var name = "张三"
// switch (name) {
// case "张三":
// console.log("欢迎回家");
// break;
// case "李四":
// console.log("不是业主");
// default:
// break;
}
// var arr = new Array()
//arr[0] = "你好"
//arr[1] = "你好2"
//arr[2] = "你好3"
//console.log(arr);
// var result = ""
// for (var i = 1; i <= 9; i++) {
//for (var j = 1; j <= i; j++) {
// result += " " + j + 'x' + i + "=" + j * i
// result += ` ${j}x${i}=${j * i}`
// }
//result += "<br/>"
//}
//document.write(result)
</script>

58
历届学生/front-end-team/项目练习/学生项目/陆旗/js练习/search.html Normal file
View File

@@ -0,0 +1,58 @@
<!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>search</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);
result.forEach(function (v, i) {
html += `<li>${v}</li>`
})
ul.innerHTML = html
}
</script>
</html>

12
历届学生/front-end-team/项目练习/学生项目/陆旗/js练习/富强.html Normal file
View File

@@ -0,0 +1,12 @@
<!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>
</body>
</html>