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

158
历届学生/front-end-team/每天课程/2022-03-24/game/video.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>弹幕</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
outline: none;
border: none;
}
.mian {
width: 800px;
height: 400px;
background: #000;
text-align: center;
position: relative;
overflow: hidden;
}
.mian span {
position: absolute;
color: #fff;
white-space: nowrap;
}
.mian video {
height: 360px;
}
.bulletchat {
height: 40px;
display: flex;
background: #fff;
align-items: center;
}
.bulletchat .inputText {
flex: 1;
}
</style>
</head>
<body>
<div class="mian">
<video src="./video.mp4" controls autoplay muted></video>
<div class="bulletchat">
<input class="inputText" type="text" placeholder="请输入弹幕">
<input value="#ffffff" type="color" class="color">
<div class="all">全屏&nbsp;</div>
<div class="half">半屏&nbsp</div>
<div class="small">3/1屏&nbsp</div>
<button>发送</button>
</div>
</div>
</body>
<script>
// 我做半屏弹幕，你们自己实现 全屏 和 3/1弹幕
// 点击按钮获得输入框的文字，用文字生成标签放到网页上，运动起来。
var send = $(".bulletchat button"),
input = $(".bulletchat .inputText"),
color = $(".bulletchat .color"),
mian = $(".mian"),
height = $(".mian video").clientHeight,
<<<<<<< HEAD
offsetTop = null,
h=height - 21,
width = $(".mian").clientWidth;
send.onclick = function () {
var span = document.createElement("span");
offsetTop = Math.random() * h;
=======
h = height - 21, // 默认全屏
width = $(".mian").clientWidth;
console.log(h);
send.onclick = function () {
var span = document.createElement("span");
>>>>>>> 1cf4dd3941996ba23835ad4cc9146a85a3ba8f6b
span.innerText = input.value;
// input.value = ""
var offsetTop = Math.random() * h;
mian.appendChild(span)
span.style = `
top: ${offsetTop}px;
right: ${-span.clientWidth}px;
color: ${color.value}
`
motion(span)
}
$(".all").onclick=function(){
h=height - 21
}
$(".half").onclick=function(){
h=height/2 - 21
<<<<<<< HEAD
}
$(".small").onclick=function(){
h=height/3 - 21
}
=======
$(".all").onclick = function () {
h = height - 21;
}
//
$(".half").onclick = function () {
h = height / 2 - 21;
}
$(".small").onclick = function () {
h = height / 3 - 21;
}
>>>>>>> 1cf4dd3941996ba23835ad4cc9146a85a3ba8f6b
function motion(el) {
el.intervalId = setInterval(function () {
var rightOffset = parseInt(el.style.right) + 1;
el.style.right = `${rightOffset}px`
if (rightOffset > width) {
mian.removeChild(el)
clearInterval(el.intervalId)
}
}, 6)
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

BIN
历届学生/front-end-team/每天课程/2022-03-24/game/video.mp4 Normal file
View File

Binary file not shown.

BIN
历届学生/front-end-team/每天课程/2022-03-24/hb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

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

@@ -0,0 +1,186 @@
<!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: 100%;
position: relative;
height: 100vh;
overflow: hidden;
}
img {
position: absolute;
width: 80px;
/* transition: all 0.2s; */
}
.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>
</head>
<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; // 保存创建红包的定时器
// 创建红包的方法
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)
}
body.appendChild(img)
motion(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")
// 让页面上的其他红包重新运动起来
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()
function $(className) {
return document.querySelector(className)
}
</script>
</html>