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

44
历届学生/front-end-team/每天课程/2022-03-21/Function.html Normal file
View File

@@ -0,0 +1,44 @@
<!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>Function</title>
</head>
<body>
</body>
<script>
// Function 函数 方法 作用：实现代码的封装，降低代码冗余提高复用率
// 定义 function 方法名(方法参数1,方法参数2,.....) { // 你的代码 }
// 返回结果 返回值 return
// 匿名函数
// function xyf(money, action) {
// console.log("你的室友收到了你给的钱：", money);
// return "衣服洗完了，给你衣服"
// }
// 变量作用域
// 局部作用域
// 变量提升
var xyf = function () {
b = 2;
console.log("1: ",b);
}
xyf();
// var a = xyf(10, "我的衣服");
// console.log(a);
</script>
</html>

88
历届学生/front-end-team/每天课程/2022-03-21/array.html Normal file
View File

@@ -0,0 +1,88 @@
<!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>数组 array </title>
</head>
<body>
</body>
<script>
// 数组 Array ：一组数据（什么数据都可以存）的组合
// 注意：数组里面的数据是通过下标来存储读取的
// 从 0 开始
// 定义：
// var arr = new Array()
// arr[0] = "你好"
// arr[1] = "你好2"
// arr[2] = "你好3"
// var arr = new Array("你好", "你好1", "你好2")
var arr = ["刘兵", 18, ["骑车", "编程"]]
// console.log(arr);
// 循环语句
// for (循环开始的变量;循环结束条件;循环的步增变量;) {}
// break 终止循环语句
// for (i = 1; i <= 10; i++) {
// console.log(i);
// if (i == 3) {
// break;
// }
// }
// for (var i = 0; i<arr.length; i++) {
// console.log(arr[i]);
// }
// while 循环
// do {
// } while (condition);
// 先上车，后补票
// var i = 0;
// while (i<arr.length) {
// console.log(arr[i]);
// i++
// }
// var a = 10
// do {
// console.log(a);
// } while (a <= 9);
// 模板字符串拼接 `在这里面的都是字符串，如果需要写变量，参考这个${我是变量}`
// ${变量名}
// 九九乘法表
var result = ""
for (var i = 1; i <= 9; i++) { // i = 2
for (var j = 1; j <= i; j++) { //
// result += " "+j + 'x' + i +"="+ j * i // 1x1=1
result += ` ${j}x${i}=${j * i}`
}
result+= "<br/>"
}
document.write(result)
</script>
</html>

63
历届学生/front-end-team/每天课程/2022-03-21/event.html Normal file
View File

@@ -0,0 +1,63 @@
<!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>
<button class="demo">登 录</button>
</body>
<script>
// 事件：在网页上完成的操作
// 构成：
// 事件源 事件类型 事件处理函数
// 写法
// dom document
// var button = document.querySelector("button");
// button.onclick = function () {
// alert("点我干什么1？？")
// }
// 方法的回调 （重点！！！等会提）
// button.addEventListener('click', function (){
// alert("点我干什么2？？")
// } )
// button.addEventListener('click', function (){
// alert("点我干什么3？？")
// } )
// 同步
//
// 异步 数据请求
// setTimeOut 延时 ？ 定时
// 如何拿到异步的返回值 回调函数
// function a(money, callback) {
// var c = 0;
// setTimeout(function () {
// c = money * 10;
// callback(c)
// }, 3000)
// // return c
// }
// a(10, function(hb) {
// console.log(hb);
// })
</script>
</html>

182
历届学生/front-end-team/每天课程/2022-03-21/hb.html Normal file
View File

@@ -0,0 +1,182 @@
<!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>
<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"), // 获取 alert里的hidden
text = $(".alert_body"),
close = $(".alert_title .close"), //绑定关闭按钮
chickImg = null, // 保存你点击的图片的虚拟dom对象
body = $("body"), // 红包放网页上
createdId = null; // 保存创建红包的定时器
function createdHb() { //创建红包
var x = parseInt(Math.random() * (clientWidth - 80)) //拿到屏幕X轴 (放里面)
var img = document.createElement("img"); //创建img对象
img.src = "./hb.png" // img地址
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) //开始运行
}
// motion 运动
function motion(el) {
el.num = setInterval(function () { //设置定时器让红包移动
var topSet = parseInt(el.style.top) + 1 //一次移动的距离 1px
el.style.top = `${topSet}px`
if (topSet > clientHeight) { //top值大于屏幕高度删除红包
$("body").removeChild(el)
clearInterval(el.num) //清除定时器
}
}, 6)
}
//关闭弹窗
close.onclick = function () {
// 删除你点击的红包
$("body").removechild(chickImg)
alert.classList.add("hidden")
// 让页面上的其他红包重新运动起来
allImgAction(1)
// 开始重新创建红包
aotoCreated()
}
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 () { // setInterval 每隔一段时间执行一次代码
createdHb()
}, 1000)
}
autoCreated()
function $(className) {
return document.querySelector(className)
}
</script>
</html>

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

@@ -0,0 +1,60 @@
<!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>
</body>
<script>
// console 调试
// console.log("大青蛙多无群")
// documente dom 文档 dom 树
// console.log(document)
// console.log(window);
// alert("哈哈哈哈")
// js 基础语法
// 变量
// 含义：计算机中用来存储临时可以变得数值
// 作用：用来保存数值（类似用户的账户）
// 定义：用 var 关键字（js里面内置一些单词，这些单词具有特定的含义）
// 格式：var 变量名称 = 变量值 (可以不给变量值，如果不给 那么变量默认就是 undefined)
// 注意：先定义后使用
// 变量名称 的 规范：
// 变量名必须的字母，特$）殊符号（_ 开头
// 变量名区分大小写
// 变量名 不能中文
// 变量名 命名 最好采用 驼峰命名法
// 常量
// 含义：不能改变的
// 定义：用 const 关键字（js里面内置一些单词，这些单词具有特定的含义）
const drr = "你好"
drr = "ddd"
console.log(drr);
var UserName = "刘兵",
a = "哈哈哈",
test = "sddd";
var ddd;
UserName = "张三"
console.log(ddd);
console.log(UserName);
</script>
</html>

95
历届学生/front-end-team/每天课程/2022-03-21/object.html Normal file
View File

@@ -0,0 +1,95 @@
<!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>object</title>
</head>
<body>
</body>
<script>
// 对象 object
// 1：存储数据的方式（通过名字来存数据 key（键）-value(值)），
// 类似数组（下标来存数据的）
// 2：类似后端编程语言中 类 class 的 概念
// 类：对现实生活中事物的描述（特征，功能）
// 封装 继承 多态 （一车多用）
// 构造函数 constructor 当类被初始化的时候，第一个默认运行的方法（代码） 析构函数
// 面向对象的编程
// 面向过程的编程
// 以前的js 都是 通过 object 来模拟 class
// 但是 js 是不断升级的语言 class
class people {
name = ""
age = ""
eat() { }
}
class peopleA extends people {
constructor() {
super()
this.name = "张三"
}
}
class peopleB extends people {
constructor() {
super()
this.name = "李四"
}
}
var a = new peopleA()
var b = new peopleB()
console.log(a.name);
console.log(b.name);
// var obj = new Object();
// obj.name = "刘兵"
// obj.age = 18
// console.log(obj);
// var obj = new Object({ name: '刘兵', age: 18 });
// var obj = {
// name: '刘兵',
// age: 18,
// like: [
// '骑车', '编程'
// ]
// }
// delete obj.like // 删除数据
// obj.test = "测试增加数据"
// console.log(obj);
// for in 循环
// for (var key in obj) {
// if (key == 'like') {
// for (var i = 0; i<obj[key].length; i++) {
// console.log( obj[key][i] );
// }
// } else {
// console.log(obj[key])
// }
// }
// console.log(obj.name);
</script>
</html>

63
历届学生/front-end-team/每天课程/2022-03-21/type.html Normal file
View File

@@ -0,0 +1,63 @@
<!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>
</body>
<script>
// 数据类型
// 基本类型：
// 字符串（String） 用双引号 "" 和 单引号'' 包裹起来的就是字符串
// 数字(Number) 0-9
// 布尔(Boolean) 真(true 1) 或者 假(false 0)
// 对空（Null） 不存在，没有
// 未定义（Undefined） 未赋值
// 现在不说（留坑）
// 引用数据类型：对象(Object)、数组(Array)、函数(Function)
var a = 1, b = "1", c = 3;
// 算数运算符 + - * /
// + + 号两边如果都是number 类型，可以直接数学运算
// + 号只要有一个(两个)不是number，那么进行 字符串拼接
// console.log(a * b);
// ++ 让数值自己+1
// -- 让数值自己-1
// ++a 先让变量 + 1，然后使用 变量
// a++ 先用变量，之后变量再+1
// console.log(
// ( (a++) + ( ++a - (b --) ) ) + (++b - (a++))
// );
// console.log(
// ( (--c)+ (++b-c) - (c++) ) + ( --a + (b--) + (a++) ) - ( a+b+c )
// );
// 赋值运算符
// += -= *= /= %=
// console.log(a-=c);
// 比较运算符
// =
// == 判断数值是否一样
// === （强等于） 判断数值 和 数据类型 是否都一样
// 逻辑运算符
// && || !
// && 表达式两边都为true才能返回true
// || 表达式两边只要有一个为true，则返回 true
// console.log(a === b);
</script>
</html>

61
历届学生/front-end-team/每天课程/2022-03-21/条件语句.html Normal file
View File

@@ -0,0 +1,61 @@
<!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>
</body>
<script>
// 控制语句
// if 条件语句
// 简写：三元运算
// var money = 10;
// money > 20 ? console.log("吃点好的") : console.log("吃拉面")
// if (money > 20) {
// console.log("吃点好的");
// } else {
// console.log("吃拉面");
// }
// var cj = 56;
// if (cj<60) {
// console.log("成绩不及格");
// } else if ( cj >= 60 && cj <= 70 ) {
// console.log("一般");
// } else if ( cj > 70 && cj <= 80 ) {
// console.log("普通");
// } else if ( cj > 80 && cj <= 90 ) {
// console.log("良好");
// } else if ( cj > 90 && cj <= 100 ) {
// console.log("优秀");
// } else {
// console.log("成绩不合法");
// }
// switch
// var name = "李低洼瞧得起我四搜索"
// switch (name) {
// case "张三":
// console.log("欢迎业主，给你开门");
// break;
// case "李四":
// console.log("不是业主，不给开门");
// break;
// default:
// console.log("你是谁？");
// break;
// }
</script>
</html>

49
历届学生/front-end-team/每天课程/2022-03-21/案例.html Normal file
View File

@@ -0,0 +1,49 @@
<!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;
}
.box {
background: red;
}
</style>
</head>
<body>
<button>点我</button>
<div class="box" style="width: 100px; height: 100px;"></div>
</body>
<script>
var button = $("button"),
box = $(".box");
button.onclick = function () {
box.style.width = `${parseInt(box.style.width) + 20}px`
box.style.height = `${parseInt(box.style.height) + 20}px`
console.dir(box);
}
button.oncontextmenu = function () {
box.style.width = `${parseInt(box.style.width) - 20}px`
box.style.height = `${parseInt(box.style.height) - 20}px`
// 阻止 浏览器的默认事件
return false;
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

4
历届学生/front-end-team/每天课程/2022-03-21/笔记.txt Normal file
View File

@@ -0,0 +1,4 @@
js : 思想 控制 html 和 css