first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/front-end-team/每天课程/2022-03-24/game/video.html
+++ b/历届学生/front-end-team/每天课程/2022-03-24/game/video.html
@@ -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>