first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

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>Function</title>
</head>
<body>
</body>
<script>
// 函数 Function
// 作用:实现代码 封装
// 定义
// function 方法名(参数1参数2.....) {}
// 返回方法的运行结果 return
// 调用
// 方法名()
// function Test(a,b) {
// return a + b
// }
// var a = Test(10, 100)
// var b = Test(1, 1)
// var c = Test(1, 2)
// var d = Test(1, 3)
// console.log(a,b,c,d);
// 匿名方法
var ddd = 1;
var a = function () {
console.log(ddd);
// 不加 var会做变量提升
var fff = 2222
console.log("fff1: ", fff);
console.log("我是function的另外一种写法");
}
a();
// 作用域
// 全局作用域
// 局部作用域
// 回调函数
// 把B方法作为参数传入到A方法中然后A调用B方法回传数据
// 解决 异步编程 返回值的问题
// 2 第二种方案,将异步转化为同步
// 同步
// 异步
function asyncFun(callback) {
var num = 1
setTimeout(function(){
num += 100;
callback(num)
}, 3000)
}
asyncFun( function(res) {
console.log(res);
} )
// function a1(callback) {
// var h = "100元钱"
// callback(h)
// }
// a1( function (res) {
// console.log(res)
// } )
// var hhhh = function () {
// console.log("111");
// }
// var u = hhhh
// u()
</script>
</html>

View File

@@ -0,0 +1,109 @@
<!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>
var page =1
var name = 1;
// window
// 控制台 使用 控制台 的 log 日志输出一个信息window
// console
// 作用:用来调试程序的
// debugger
// debug 断点
// console.log("你好js")
// console.warn("我是警告")
// // bug 语法bug 逻辑bug
// console.error("我是报错")
// // 打印数据结构
// console.dir("我是报错")
// console.log(window);
// alert("我是alert弹窗");
// js 编程语言
// 编程语言基础语法
// 变量
// 在计算机中用来存储可变的数据
// 如何定义:
// var系统关键字 变量名 = 变量值 (初始值)
// 不给默认数值,就是 undefined
// var name = "刘兵1", age,test,ddd;
// 变量名命名的规则?
// 变量名不能以数字,特殊符号开头
// 变量名不可以包含特殊符号_ $
// 杜绝使用中文
// 变量名 区分大小写
// 变量名命名的时候遵守 驼峰命名法
// console.log(name);
// name = "刘兵2"
// console.log(name);
// console.log(age);
// 常量
// 在计算机中用来存储不可变的数据
// const like = "哈哈哈哈";
// console.log(like);
// 数据类型
// 基本数据类型
// 字符串String、数字(Number)、布尔(Boolean)、空Null、未定义Undefined、Symbol。
// String 就是单引号 和 双引号 包裹起来的
// Number
// Boolean 真(true 1) 假(false 0)
// Null 不存在
// 用来定义一个唯一的变量 Symbol
// var age = 18, name = "张三";
// console.log(age,name);
// var name1 = Symbol(1);
// var name2 = Symbol(1);
// console.log(name1 == name2);
// 运算符
// + - * / % ++ --
// +
// 必须+号两边都是number才可以进行数学加法运行
// 变成 拼接字符串
var a = 1, b = 2, c = 3;
// console.log(
// (1 + 2 - 2) - (2 + 3 + 0) + ( 1 - 3 + 2 )
// );
// 变量名++ 先用变量用完后再加1
// ++变量名 先加1再用变量
// += -= *= /= %=
console.log(a+=c); // a = a+c
// = 赋值
// == 判断是否相等
// === 判断数值和类型是否相等
// && and 两个都必须为true则为true否则为false
// || 两个只要有一个为true那么就为true
// ! 取反
// 引用数据类型
// 对象(Object)、数组(Array)、函数(Function)
</script>
<!-- <script src="./js/index.js"></script> -->
</html>

View File

@@ -0,0 +1,97 @@
<!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="one">点我</button>
<button class="two" onclick="test()">哈哈哈</button>
<button class="three" >哈哈哈22333</button>
<a href="https://www.baidu.com/">百度</a>
</body>
<script>
// 事件
// 事件有三要素
// 事件源 事件类型 事件处理函数
// 事件冒泡
var a = document.querySelector(".one")
// a.innerHTML = "<span>你好</span>"
console.dir(a);
document.querySelector("a").onclick = function (e) {
// 阻止默认事件
e.preventDefault();
console.log("hahaah");
}
a.onclick = function (event) {
console.log(event);
alert("点我干什么1")
}
// function test() {
// alert("two")
// }
// document.querySelector(".three").addEventListener('click', function() {
// alert("哈哈哈1")
// })
// document.querySelector(".three").addEventListener('click', function() {
// alert("哈哈哈2")
// })
// var dom = {
// tagName: 'div',
// className: 'main',
// idName: null,
// children: [
// {
// tagName: 'h2',
// className: 'title',
// idName: null,
// children: [
// {
// tagName: 'img',
// className: null,
// idName: null,
// children: null
// }
// ]
// },
// {
// tagName: 'button',
// className: null,
// idName: null,
// children: [
// {
// tagName: '#text',
// className: null,
// idName: null,
// children: null
// }
// ]
// }
// ]
// }
// 虚拟domjs对象
// 影子dom
// 真实dom
</script>
</html>

View File

@@ -0,0 +1,24 @@
<!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>
<div class="main">
<h2>你好</h2>
</div>
</body>
<script>
document.querySelector(".main").onclick = function () {
alert("详情")
}
document.querySelector(".main h2").onclick = function (e) {
e.stopPropagation()
alert("增加数量")
}
</script>
</html>

View File

@@ -0,0 +1,111 @@
<!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>
// 引用数据类型
// 对象(Object)、数组(Array)、函数(Function)
// 数组
// 概念:就是一组数据的集合
// 下标从0开始
// 三种
// var arr = new Array();
// arr[0] = "哈哈哈1"
// arr[1] = "哈哈哈2"
// arr[2] = "哈哈哈3"
// 数组都具有 length 长度属性
// console.log(arr.length);
// var arr = new Array("哈哈哈1", "哈哈哈2", "哈哈哈3")
// var arr = ["哈哈哈1", "哈哈哈2", "哈哈哈3"]
// var test = ["哈哈哈4", "哈哈哈5"]
// for (var index = 0; index < test.length; index++) {
// arr.push(test[index])
// }
// console.log(
// [
// ...arr,
// ...test
// ]
// );
// console.log(arr.concat(test));
// 对象
// 用 key value 来存储数据
// var obj = new Object();
// obj.name = "刘兵"
// obj.age = "18"
// var obj = new Object({
// name: '刘兵',
// age: 18
// });
// var obj = {
// name: '刘兵',
// age: 18,
// }
// console.log(obj.age);
// console.log(obj['age']);
// for in
// for (const key in obj) {
// console.log(obj[key]);
// }
// 面向 对象 编程
// 万物 皆 对象
// 对象(类):对一个事物的具体描述的集合
var car = {
color: 'red',
speed: '7.3s',
start: () => {
},
stop: () => { }
}
// class 类
// 三大特征
// TODO 留坑.......
// 封装
// 继承
// 多态
class car {
color = 'red';
speed = '7.3s';
start() { }
stop() { }
}
</script>
</html>

View File

@@ -0,0 +1,110 @@
<!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>
span {
border: 1px solid #000;
padding: 5px 10px;
}
</style>
</head>
<body>
</body>
<script>
// 条件语句
// var money = 10
// if (money > 50) {
// console.log("去吃好吃的");
// } else {
// console.log("简单吃一点");
// }
// 简写 三元运算符
// money > 50 ? console.log("去吃好吃的") : console.log("简单吃一点");
var cj = 98;
if (cj < 60 && cj >= 0) {
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("分数不正确");
}
// if switch
// switch 对固定的数值进行判断,一般代码比较简洁
var vipType = 0; // 0 1 2
switch (vipType) {
case 1:
console.log("普通vip");
break;
case 0:
console.log("普通用户");
break;
case 2:
console.log("超级vip");
break;
default:
console.log("不知道你是什么用户")
break;
}
// for (循环起始变量;循环结束条件;循环递增) {
// }
// for (var i = 1; i <= 100; i++) {
// console.log(i);
// }
// var i = 101;
// while (i <= 100) {
// console.log(i);
// i++;
// }
// do {
// console.log(i);
// i++;
// } while (i <= 100);
// 九九乘法表
var result = "";
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
// es6 新的字符串拼接方案
// `是字符串` ${写的是变量}
// result += j + " x " + i + " = " + i * j
result += `<span>${j} x ${i} = ${i * j}</span> `
}
result += " <br/><br/>"
}
document.write(result)
console.log(result);
</script>
</html>

View File

@@ -0,0 +1,9 @@
javascript 他是运行在客户端浏览器(服务器)上脚本语言
作用用来控制html和css进而实现网页上的各种特效 和 功能
es5
es6 const
es7
es7++