Qing/HTML
Qing/HTML
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
landaiqing 2023-05-01 19:37:40 +08:00
commit da2c0fadf7
133 changed files with 29002 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Html-Css/.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"liveServer.settings.multiRootWorkspaceName": "Html-Css"
}

45
Html-Css/00-css写法.html Normal file
View File

@ -0,0 +1,45 @@
<!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>
<!-- No.3
rel="stylesheet"
引入外部文件
作用范围：被引入文件
href 各种路径都可以
-->
<link rel="stylesheet" href="./Html-Css/style.css">
<!-- No.2
内部样式
范围：当前文件
-->
<style>
p {
color: salmon;
}
</style>
</head>
<body>
<p><span>【第一章】</span>人之初,性本善。性相近,习相远。苟不教,性乃迁。教之道,贵以专。昔孟母,择邻处。
子不学,断机杼。窦燕山,有义方。教五子,名俱扬。养不教,父之过。教不严,师之惰。
</p>
<!-- No.1
行内样式
范围：当前标签
-->
<div style="color: pink;">【第一章】人之初,性本善。性相近,习相远。苟不教,性乃迁。教之道,贵以专。昔孟母,择邻处。
子不学,断机杼。窦燕山,有义方。教五子,名俱扬。养不教,父之过。教不严,师之惰。
</div>
</body>
</html>

65
Html-Css/01-选择器.html Normal file
View File

@ -0,0 +1,65 @@
<!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>
/* 选择器 { css代码 } */
/* div {
color: salmon;
} */
/* 00- 基础选择器 */
/* 标签选择器 */
/* 标签名 { css代码 } */
/* div {
color: salmon;
} */
/* 类选择器 | class选择器 */
/* .class名 { css代码 } */
/* .app {
color: salmon;
} */
/* id选择器 */
/* #id名 { css代码 } */
/* #divid {
color: salmon;
} */
/* 通配符选择器 */
/* * {
color: salmon;
} */
</style>
</head>
<body>
<p><span>【第五章】</span> 天地不仁,以万物为刍狗,圣人不仁,以百姓为刍狗。天地之间,其犹橐龠
乎,虚而不屈,动而愈出。多言数,穷,不如守中。 〖译文〗</p>
<!-- No.1
行内样式
范围: 当前标签
-->
<div class="app app2" id="divid">
【第五章】天地不仁,以万物为刍狗,圣人不仁,以百姓为刍狗。天地之间,其犹橐龠
乎,虚而不屈,动而愈出。多言数穷,不如守中。 〖译文〗
</div>
</body>
</html>

77
Html-Css/02-选择器进阶.html Normal file
View File

@ -0,0 +1,77 @@
<!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>
/* 子元素选择器 */
/* 父>子>子的子... { css代码 } */
/* #app>.top>p {
color: salmon;
} */
/* 后代选择器 */
/* 父 子(只要是父的后代)... { css代码 } */
/* #app p {
color: salmon;
} */
/* 组合选择器 */
/* 选择器1, 选择器2 { css代码 } */
/* .top,
#app>.bottom {
color: salmon;
} */
/* 复合选择器 (天选之子) */
div.top p.top-p.tp#ip {
color: salmon;
}
/* css3添加的 */
/* 正 */
/* ul li:nth-child(4){
color: salmon;
} */
/* 倒 */
/* ul li:nth-last-child(1) {
color: salmon;
} */
</style>
</head>
<body>
<div id="app">
<div class="top">
<p class="top-p tp" id="ip"> <span>天地不仁</span> ，以万物为刍狗；圣人不仁，以百姓为刍狗。 </p>
</div>
<div class="bottom">
<p> <span>天地不仁</span> ，以万物为刍狗；圣人不仁，以百姓为刍狗。 </p>
</div>
<p> <span>天地不仁</span> ，以万物为刍狗；圣人不仁，以百姓为刍狗。 </p>
</div>
<ul>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ul>
</body>
</html>

52
Html-Css/03-伪类.html Normal file
View File

@ -0,0 +1,52 @@
<!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>
#app {
height: 100px;
width: 100px;
background-color: salmon;
transition: all 0.3s; /*只针对数值的变化*/
/* 动画过渡 */
}
/* 鼠标悬停 */
#app:hover {
width: 200px;
height: 200px;
background-color: seagreen;
}
/* 在盒子最后面生成一个盒子 */
#app::after {
content: "后浪";
}
/* 在盒子最前面生成一个盒子 */
#app::before {
content: "前浪";
}
</style>
</head>
<body>
<div id="app">
--我是app正常内容--
</div>
</body>
</html>

BIN
Html-Css/04-选择器权重.html Normal file
View File

Binary file not shown.

86
Html-Css/05-选择器权重进阶.html Normal file
View File

@ -0,0 +1,86 @@
<!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>
#ip {
color: blue !important;
}
div .top p {
color: salmon !important;
}
p {
color: lightblue !important;
}
</style>
</head>
<body>
<div id="app">
<div class="top">
<p class="top-p tp" id="ip"> <span>天地不仁</span> ,以万物为刍狗,圣人不仁,以百姓为刍狗。 </p>
</div>
<div class="bottom">
<p> <span>天地不仁</span> ,以万物为刍狗,圣人不仁,以百姓为刍狗。 </p>
</div>
<p> <span>天地不仁</span> ,以万物为刍狗,圣人不仁,以百姓为刍狗。 </p>
</div>
</body>
</html>
<!--之前已证：
继承的样式的权重 < 通配符选择器的权重 < 标签选择器的权重 < class 选择器的权重 < id选择器的权重 < !important
!important 给个最高权重
-->
<!-- 每种权重 都会有当前权重的值
继承的样式的权重 0
通配符选择器的权重 01
标签选择器的权重 001
class 选择器的权重 0001
id选择器的权重 00001
!important 0000000001
计算权重：
1.肯定不能进位
2.同选择器相加
3.倒着逐一判断大小
提一：
#ip
div .top p p p p p...n (n>10)
计算：
00001
00(n>10)10
题二: 权重等于
A. #app .top-P p
B. .top-p p #ip
题三：权重A>B
A: #app .top-p div p
B: .top-p p #ip
-->

72
Html-Css/06-盒模型.html Normal file
View File

@ -0,0 +1,72 @@
<!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>
#app {
/* 盒子的大小
宽：
块：没设置宽 默认时父盒子宽
行：没有设置宽 默认时类容宽
高：
块，行 都一样，有内容决定发宽高 ,且无法设置宽高的
*/
width: 100px;
height: 100px;
background-color: salmon;
/* 内边距
会改变原有盒子的大小
*/
/* padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px; */
/* 边框
会改变原有盒子的大小
*/
/* border: style color width; */
border: solid pink 20px;
/* border-top-style: dashed;
border-top-width: 6px;
border-top-color: orangered; */
/* 外边框
盒子和盒子之间的额距离
块:
上下的margin会重合,如果一大一小(以大的为主)
行:margin 不会重合
*/
margin-top: 100px;
margin-bottom: 100px;
}
</style>
</head>
<body>
<div id="app">
</div>
<div id="app">
</div>
<div id="app">
</div>
</body>
</html>

50
Html-Css/07-外边距.html Normal file
View File

@ -0,0 +1,50 @@
<!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>
#app {
width: 300px;
height: 300px;
background-color: orangered;
/* No.1 设置内边距*/
padding-top: 1px;
/* No.2 边框 */
border: solid 1px pink;
}
.box {
width: 100px;
height: 100px;
background-color: lightseagreen;
margin-top: 100px;
/* 块盒子的margin上下穿透问题 , 左右不存在*/
}
</style>
</head>
<body>
<div id="app">
123
<div class="box"> </div>
</div>
</body>
</html>

45
Html-Css/08-盒子溢出.html Normal file
View File

@ -0,0 +1,45 @@
<!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>
#app {
width: 100px;
height: 100px;
background-color: orangered;
/* 盒子内容溢出
hidden 溢出隐藏
scroll 显示滚动条
auto 自动
*/
overflow: auto;
/* overflow-y: scroll; */
}
</style>
</head>
<body>
<div id="app">
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
</div>
<hr>
<div id="app">
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
</div>
</body>
</html>

38
Html-Css/09-怪异盒模型.html Normal file
View File

@ -0,0 +1,38 @@
<!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>
#app {
width: 100px;
height: 100px;
background-color: orangered;
/* 怪异盒模型 */
box-sizing: border-box;
padding: 20px;
/* 边框 和 内边距 都不会改变盒子的大小
注意 边框 边距 不能大于盒子本身的大小
*/
}
</style>
</head>
<body>
<div id="app">
</div>
</body>
</html>

52
Html-Css/10-字体样式.html Normal file
View File

@ -0,0 +1,52 @@
<!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>
/* 字体颜色 颜色单词 16进制 rgb() rgba()*/
p {
color:rgba(236, 15, 89, 0.3) ;
/* 字体大小 */
font-size: 20px;
/* 文字粗细 500是正常*/
font-weight: 600;
/* 字体 */
font-family: "微软雅黑","宋体";
/* 字体倾斜
normal 默认
italic 倾斜
oblique 强制倾斜
*/
font-style: oblique;
/* 行高 */
line-height: 50px;
}
</style>
</head>
<body>
<p>
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
</p>
</body>
</html>

93
Html-Css/11-文本样式.html Normal file
View File

@ -0,0 +1,93 @@
<!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>
p {
/* 水平对齐方式 */
/* text-align: right;
text-align: center; */
/*text-align: justify; *//* 两端对齐*/
/* 首行缩进 */
/* text-indent: 2em; */
/* 首行缩进*/
/* 文本线 */
/* text-decoration: none; 无文本线 */
/* text-decoration: underline; */
/* 下划线 */
/* text-decoration: line-through; */
/* 中划线 */
/* text-decoration: overline; */
/* 上划线 */
/* text-decoration-color: black; */
/* 设置线的颜色 */
/* text-decoration-style: dotted; */
/* 设置线的样式 */
/* 换行方式 */
/* white-space:normal; */
/* 换行 */
/* white-space:nowrap; */
/*不换行 */
/* text溢出方式 */
/* text-overflow: clip; */
/* 裁剪 */
/* text-overflow: ellipsis; */
/* 隐藏显示 */
/* 文本对齐方式 */
vertical-align: 100px;
color: salmon;
}
a {
color: aqua;
text-decoration: none;
}
</style>
</head>
<body>
<p>
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
</p>
<p>
<a href="">
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
</a>
</p>
</body>
</html>

41
Html-Css/12-文本溢出隐藏.html Normal file
View File

@ -0,0 +1,41 @@
<!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>
p {
color: sandybrown;
/* 文本溢出隐藏 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p>
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
</p>
</body>
</html>

78
Html-Css/13-背景属性.html Normal file
View File

@ -0,0 +1,78 @@
<!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>
html,body {
margin: 0;
min-height: 100vh;
/* 背景色 */
background-color: seagreen;
/* 背景图 */
background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.UM6yunmzITekW0TVUOwSLAHaLl?w=114&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7);
/* 背景图是否平铺 */
background-repeat: no-repeat;
/* 不平铺 */
/* background-repeat: repeat; 平铺 */
/* background-repeat: repeat-x;
background-repeat: repeat-y; */
/* 平铺某个方向 */
/* 背景定位 */
/* background-position: x y; */
/* background-position: 100px 200px; */
/* background-position: right top;
background-position: right bottom; */
/* background-position: center;
background-position: left top;
background-position:left bottom;
background-position: left center; */
/* 注意: 如果你只给一个值 那么另一个为center */
/* 精灵图 就是用定位这中方式实现的 */
/* 背景图的大小 */
/* background-size:w h; */
/* background-size: auto 600px; */
/* background-size: cover; */
/* 图片一定会沾满容器(盒子), but图片不一定显示的全 */
/* background-size: contain; */
/* 图片一定会显示完整,但是不一定沾满整个容器(盒子) */
/* 背景固定 */
/* background-attachment: fixed; */
/* 固定 */
/* background-attachment: scroll; */
/* 滚动 */
}
</style>
</head>
<body>
</body>
</html>

71
Html-Css/14-精灵图.html Normal file
View File

@ -0,0 +1,71 @@
<!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>
.ico0,
.ico1,
.ico2,
.ico3,
.ico4
{
/*将行类标签转成行内块标签 */
display: inline-block;
width: 105px;
height: 32px;
background-color: #EEEE ;
background-image: url(./jlt.png);
background-position-x: -205px;
background-repeat: no-repeat;
}
.ico1 {
/* baclground-position: ; */
background-position-y: -37px;
}
.ico2 {
/* baclground-position: ; */
background-position-y: -74px;
}
.ico3 {
/* baclground-position: ; */
background-position-y: -111px;
}
.ico4 {
/* baclground-position: ; */
background-position-y: -148px;
}
</style>
</head>
<body>
<div>
<span class="ico0"></span>
1
<span class="ic1"></span>
2
<span class="ico2"></span>
3
<span class="ico3"></span>
4
<span class="ico4"></span>
5
</div>
</body>
</html>

63
Html-Css/15-补充内容.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>
<style>
#app {
width: 300px;
height: 300px;
background-color: salmon;
/* 边框 */
border: #ccc solid 10px;
/* 边框居中 */
/* margin-right:auto ;
margin-left:auto ; */
/* 边距 - 内 */
padding:20px ; /*上下左右 都为20px*/
padding:20px 40px ;/*上下20px, 左右为40px*/
padding:20px 40px 60px;/*上20px 左右40px 下60px*/
padding:20px 40px 60px 80px;/*上20px 左40px 下60px 右80px*/
/* 边距 -外 :与内边距使用一致 */
/* margin: 20px; */
/* border: #ccc solid 1px; */
/* border-width: 1px;
border-style: solid;
border-color: #ccc; */
/* 背景复合写法 */
/* background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.UM6yunmzITekW0TVUOwSLAHaLl?w=114&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7) no-repeat; */
/* 字体 */
/* font: ; */
}
</style>
</head>
<body>
<div id="app" contenteditable="true">
</div>
<!-- <textarea name="" id="" cols="30" rows="10"></textarea> -->
<!-- contenteditable="true" 将盒子变为可编辑状态 -->
</body>
</html>

95
Html-Css/16-盒子类型display.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>display</title>
<style>
body {
}
div {
background-color: lightblue;
width: 100px;
height: 100px;
/* 块标签->行内标签 */
display: inline;
/* 块-> 行内块标签*/
display: inline-block;
vertical-align: middle;
/* 中线对齐 */
}
span {
background-color: salmon;
width: 100px;
height: 100px;
/* 行内标签->块 */
display: block;
}
img {
width: 300px;
vertical-align: middle;
/* 中线对齐 */
cursor:pointer ;
/* 鼠标悬停样式 */
display: none;
/* 关闭盒子 */
}
</style>
</head>
<body>
<div>
我是div
</div>
<div>
我是div
</div>
<span>
我是span
</span>
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.43Hx8xXHGxUiVTllqgR0XQHaKK?w=182&h=250&c=7&r=0&o=5&dpr=1.25&pid=1.7">
</body>
</html>
<!--
块标签
1.独占一行
2.他的宽度为父盒子内容宽度
行内标签
1.内容有空间就横着排，没有控件就换行 (可被文本样式更改)
2.宽高有内容决定，设置宽高无效
行内快标签（img）
1.宽高默认由内容决定，可以自定以宽高
2.他有行内的性质
-->

47
Html-Css/17-切换图片.html Normal file
View File

@ -0,0 +1,47 @@
<!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>
#img1 , #img2 {
width: 200px;
height: 300px;
vertical-align: middle;
}
#app {
background-color: lightblue;
width: 200px;
height: 300px;
}
#img2 {
display: none;
}
#app:hover #img1 {
display: none;
}
#app:hover #img2 {
display: inline-block;
}
</style>
</head>
<body>
<div id="app">
<img id="img1" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.C38tPmdN8_amlKOTvKp45AHaNK?w=182&h=324&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
<img id="img2" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Ca5vPlfNKm2z_DCvMe4QqwHaLi?w=182&h=284&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
</div>
</body>
</html>

73
Html-Css/18-布局-浮动.html Normal file
View File

@ -0,0 +1,73 @@
<!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>
.parent {
width: 800px;
/* height: 400px; */
border: 10px solid blue;
}
.parent::after {
/* 利用伪类清除父盒子的浮动 */
content: "";
display: block;
clear: both;
}
.box1 {
float: left;
width: 250px;
height: 80px;
background-color: #ed7d31;
}
.box2 {
width: 400px;
height: 100px;
background-color: #70ad47;
}
.box3 {
width: 200px;
height: 100px;
background-color: #7030a0;
}
</style>
</head>
<body>
<div class="parent">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div style="clear: both;"></div>
<!-- 清除父盒子浮动 -->
</div>
</body>
</html>
<!--
文档流
浮动
1.浮动单元 处于浮动
2.不会遮挡内容(文本内容)
3.要会想象有个眼睛
4.不占原有文档流的位置(可以给父盒子清除浮动)
-->

41
Html-Css/19-flex布局.html Normal file
View File

@ -0,0 +1,41 @@
<!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>flex</title>
<style>
#app {
/* 变flex容器 */
display: flex;
height: 200px;
background-color: lightcoral;
}
.box {
background-color: lightgreen;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<div class="box"><span>1</span></div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</body>
</html>

83
Html-Css/20-flex布局-2.html Normal file
View File

@ -0,0 +1,83 @@
<!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>flex</title>
<style>
#app {
/* 变flex容器 */
display: flex;
height: 200px;
width: 300px;
background-color: lightcoral;
/* 水平轴的方向控制 */
flex-direction: row;
/* 正常轴 左右 */
/* flex-direction: row-reverse; */
/* 右左 */
/* flex-direction: column; */
/* 上下 */
/* flex-direction: column-reverse; */
/* 下上 */
/* 如果项目在容器中挤不下,它也不会换行 */
/* flex-wrap: wrap; */
/* 换行 */
/* flex-wrap: nowrap; */
/* 不换行 */
/* 主轴对齐方式 */
/* justify-content: flex-start; */
/* 开始方向对齐 */
/* justify-content: flex-end; */
/* 结束方向对齐 */
/* justify-content:space-around ; */
/* 空余空间平均分配 */
/* justify-content: space-between; */
/* 两边靠边其余空间平均分配 */
/* 垂直交叉轴对齐方式 */
/* align-items: center; */
/* 居中 */
/* align-items: flex-start; */
/* 开始对齐 */
/* align-items: flex-end; */
/* 结束对齐 */
/* align-items: baseline; */
/* 文字基于一条线对齐 */
/* align-items: stretch; */
/* 其他标签 */
}
.box {
background-color: lightgreen;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<div class="box"><span>1</span></div>
<div class="box" style="height: 150px; font-size: 30px;">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</body>
</html>

62
Html-Css/21-flex布局-3.html Normal file
View File

@ -0,0 +1,62 @@
<!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>flex</title>
<style>
#app {
/* 变flex容器 */
display: flex;
height: 60px;
background-color: lightcoral;
align-items: center;
padding: 0 15px;
}
.input {
width: 100%;
height: 40px;
border-radius: 15px;
background-color: lightgrey;
}
span,
b {
/* 项目的缩放
0: 不缩放
*/
flex-shrink: 0;
margin: 0 15px;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div id="app">
<span>logo</span>
<div class="input">
</div>
<b>登陆</b>
</div>
</body>
</html>

114
Html-Css/22-定位.html Normal file
View File

@ -0,0 +1,114 @@
<!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>
body {
height: 100px;
}
p {
background-color: blue;
}
#app {
background-color: coral;
width: 400px;
height: 400px;
/* 相对定位 */ /* 正常布局不会影响文档流的布局 */
/* position: relative; */
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.box1 {
background-color:blue;
width: 100px;
height: 100px;
/* 绝对定位 */
/* position: absolute; */
/* top: 0; */
/* bottom: 0; */
/* left: 0; */
/* right: 0; */
}
.fixed {
/* 固定定位 */
position: fixed;
background-color: aqua;
width: 400px;
height: 400px;
padding: 20px;
bottom: 100px;
right: 100px;
}
.fixed span {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="fixed">
小广告
<a href="www.baidu.com">X</a>
</div>
<div id="app">
<div class="box1"></div>
<p>我是p标签</p>
</div>
<p>我是p标签</p>
<!--
相对定位
1.不会改变正常文档流的布局
2.相对的是盒子本身的四个角进行定位
绝对定位
1.脱离了正常的文本流
2.找o点
1.父盒子有定位属性:四个角是绝对定位的四个o点
2父盒子没有定位属性,那他就会往上找有定位属性的祖宗盒子,
如果有祖宗盒子有定位属性,即相对这个祖宗盒子的四个角.
3.如果他的父亲和祖宗都没有定位属性的盒子,那么就相对于html盒子的四个角为o点(可视化窗口)
固定定位
1.
注意:
所有定位的盒子,属性均会变成 行内块的类型
定位偏移量
top,bottom , left, right
不能同时使用相对方向
-->
</body>
</html>

67
Html-Css/22-定位层级.html Normal file
View File

@ -0,0 +1,67 @@
<!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>
#app,#app2 {
background-color: salmon;
width: 400px;
height: 400px;
position: relative;
z-index: 0;
}
#app {
z-index: 99;
}
.box {
width: 100px;
height: 100px;
}
.box1 {
height: 150px;
background-color: rgb(255, 0, 0);
position: absolute;
z-index: 1;
}
.box2 {
width: 150px;
background-color: antiquewhite;
position: absolute;
z-index: 0;
}
#app2 .box1 {
top: -249px;
}
#app .box2 {
top: 100px;
}
</style>
</head>
<body>
<div id="app">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
</div>
<div id="app2">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
</div>
<!-- 子绝父相 -->
</body>
</html>

4
Html-Css/css/style.css Normal file
View File

@ -0,0 +1,4 @@
/* 作用范围：谁引用作用谁 */
span {
color: red;
}

110
Html-Css/homework/05-作业.html Normal file
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>作业</title>
<style>
#app {
box-sizing: border-box;
border: 1px solid #ccc;
padding: 15px;
width: 300px;
margin: 0 auto;
}
#app .header h1 {
font-size: 18px;
border-bottom:solid 1px #ccc ;
padding-bottom: 10px;
}
#app .header h1 span {
padding-left: 15px;
color: rgba(200, 200,2000, .6);
}
ul {
padding-left: 0;
}
ul li {
list-style: none;
/* display: flex; */
align-items: center;
margin: 10px 0;
/* 文本溢出隐藏 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
ul li::before {
content: "";
display: inline-block;
width: 25px;
height: 25px;
padding-right: 10px 0;
padding-top: 3px;
background-image: url(https://static.zzhitong.com/lesson-files/html/img/7-3.png);
background-repeat: no-repeat;
background-position: 0px 5px;
}
ul li:nth-child(2)::before {
background-position: 0px -24px;
}
ul li:nth-child(3)::before {
background-position: 0px -52px;
}
ul li:nth-child(4)::before {
background-position: 0px -84px;
}
ul li:nth-child(5)::before {
background-position: 0px -115px;
}
ul li:nth-child(6)::before {
background-position: 0px calc(-115px + -32px);
}
ul li:nth-child(7)::before {
background-position: 0px calc(-115px + -32px + -30px);
}
</style>
</head>
<body>
<div id="app">
<div class="header">
<h1>潮流排行 <span>Most Read</span></h1>
</div>
<div class="content">
<ul>
<li>秋冬拗造型 你也需要一款时髦</li>
<li>秋冬拗造型 你也需要一款时髦</li>
<li>秋冬拗造型 你也需要一款时髦</li>
<li>秋冬拗造型 你也需要一款时髦</li>
<li>秋冬拗造型 你也需要一款时髦</li>
<li>秋冬拗造型 你也需要一款时髦</li>
<li>秋冬拗造型 你也需要一款时髦</li>
</ul>
</div>
</div>
</body>
</html>

103
Html-Css/homework/06-作业.html Normal file
View File

@ -0,0 +1,103 @@
<!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>
/* 预留样式 */
.border-right {
border-right:solid 1px #ccc ;
}
.border-bottom {
border-bottom:solid 1px #ccc ;
}
.flex {
display: flex;
}
img {
display: block;
}
/* 外壳 */
#app {
box-sizing: border-box;
width: 1200px;
margin: 0 auto;
border: solid 1px #ccc;
padding: 10px ;
}
/* 上面的样式 */
#app .top {
display: flex;
justify-content:center;
}
#app .top span {
border-right: solid 2px #ccc;
padding: 0 20px;
}
#app .top span:nth-child(1) {
border-right:none ;
padding: 0 20px;
}
/* 下面样式 */
.bottom {
margin: top 15px; ;
}
</style>
</head>
<body>
<div id="app">
<div class="top">
<span>护肤</span>
<span>彩妆</span>
<span>美发</span>
<span>美体</span>
<span>香氛</span>
<span>肌肤</span>
<span>产品</span>
<span>唇部</span>
<span>精华</span>
<span>修护</span>
</div>
<div class="bottom flex">
<!-- left -->
<div class="flex ">
<img class="border-right" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.C38tPmdN8_amlKOTvKp45AHaNK?w=182&h=324&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
<div class="border-right">
<img class="border-bottom" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.C38tPmdN8_amlKOTvKp45AHaNK?w=182&h=324&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.C38tPmdN8_amlKOTvKp45AHaNK?w=182&h=324&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
</div>
</div>
<!-- right -->
<div class="flex">
<div class="border-right">
<img class="border-bottom" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Ca5vPlfNKm2z_DCvMe4QqwHaLi?w=182&h=284&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
<img class="border-bottom" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Ca5vPlfNKm2z_DCvMe4QqwHaLi?w=182&h=284&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
<img class="border-bottom" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Ca5vPlfNKm2z_DCvMe4QqwHaLi?w=182&h=284&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
</div>
<div>
<div class="flex">
<img class="border-right border-bottom" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Ca5vPlfNKm2z_DCvMe4QqwHaLi?w=182&h=284&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
<img class="border-bottom" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Ca5vPlfNKm2z_DCvMe4QqwHaLi?w=182&h=284&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
</div>
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Ca5vPlfNKm2z_DCvMe4QqwHaLi?w=182&h=284&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
</div>
</div>
</div>
</div>
</body>
</html>

BIN
Html-Css/jlt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

40
Html-Css/怪异盒子练习.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>怪异盒子练习</title>
<style>
div{
width: 234px;
height: 460px;
background-color: #2e233e;
padding: 20px 0px;
box-sizing: border-box;
}
div li{
font-size: 14px;
height: 42px;
line-height: 42px;
padding-left: 30px;
}
a{color: white}
li:hover{background-color: #ff6700;}
</style>
</head>
<body>
<div>
<ul>
<li><a href="">电器商城</a></li>
<li><a href="">电器商城</a></li>
<li><a href="">电器商城</a></li>
<li><a href="">电器商城</a></li>
<li><a href="">电器商城</a></li>
<li><a href="">电器商城</a></li>
<li><a href="">电器商城</a></li>
<li><a href="">电器商城</a></li>
<li><a href="">电器商城</a></li>
<li><a href="">电器商城</a></li>
</ul>
</div>
</body>
</html>

33
Html-Javascript/.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,33 @@
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "${file}",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "nodeLauch", //单独调试js，即可以直接运行js
"type": "node",
"request": "launch",
"program": "${file}", //这个配置成你要调试的文件、${file}当前打开的文件
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"console": "internalConsole",
"preLaunchTask": "",
"sourceMaps": false
}
]
}

16
Html-Javascript/01-介绍js.html Normal file
View File

@ -0,0 +1,16 @@
<!--
1.javascript & ECMAscript 就是js & es
ECMAscript 是js的标准，每年都会发布
2015之后发布前，ECMAscript 统称es6
2015之后发布后，ECMAscript 统称es5
2.javascript & jQuery
jQuery 就是个函数库
3.vue react
也是函数库（框架)（形式区分）
vue 构建一个vue体系
react 构建有一个react体系
-->

25
Html-Javascript/02-javascript的使用.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- No.1 -->
<button onclick="console.log('点我干啥')"></button>
<!-- 事件 -->
<!-- No.2 -->
<script>
console.log("hello world");
</script>
<!-- No.3 -->
<script src="./js/hello.js"></script>
<a href="javascript: console.log('what?');">come</a>
</body>
</html>

44
Html-Javascript/03-输出,注释.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//输出
console.log('输出正常日志');
console.dir('打印对象用的');
console.error('输出红色警告,不会阻止代码运行');
//throw "输出红色警告,会阻止代码运行"
console.warn("黄色警告");
console.log("end");
//单行注释
/*
多行注释
*/
/*
* 多行注释
*
*/
//细节:
// 1.js代码与py代码每句结束 一般都多一个;
// 2.js中不是使用 代码位置来判断代码的 ( 代码) {代码块}
</script>
</body>
</html>

38
Html-Javascript/04-变量.html Normal file
View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//js 弱类型
//变量
var a0
var a1= "xxx"
let b0
let b1= "xxx"
const c0= "xxx"//只能赋值
//1.
//在全局变量 var 声名的变量,是挂在window全局对象上的
//在全局变量let 声名的变量,就是全局变量
//2.
//var可以重复声名
//let const 不可以重复声名
//3.
//const声名的是常量 无法修改
</script>
</body>
</html>

40
Html-Javascript/05-js基础数据类型.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//字符串
// let str0="xxxx";
// let str1='xxxx';
// let str2=`x xx x`;
// console.log("我是"+"谁"+"?");
// console.log(`你是谁 ${str0} ${"啥"}`);
//数字
//在js 中不区分整型和浮点型
// console.log(123);
// console.log(123.123);
// let n0=999;
// let n1=9.98;
// console.log(typeof no);
//布尔
// console.log(true);
// console.log(false);
//特殊的
// undefined 变量未定义
// null 空值
// NaN 非数字
</script>
</body>
</html>

88
Html-Javascript/06-复合数据类型.html Normal file
View File

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//Oject
//对象结构 -->字典
// let obj = {n:"hello 对象"};
//增加
// obj.xxx= "你是xxx";
//改
// obj.n="滚";
//删
// delete obj.xxx;
//查
// console.log(obj.n);
// for( let key in obj){
// }
//数组结构---列表
// let arr = [1,2,3,4,5,6,7];
// console.log(arr);
//长度
// console.log(arr.length);
//单纯循环
// arr.forEach((el,i) => {
// console.log("数组下表项"+el,'下标'+i);
// })
//查找(只针对简单数据类型)
// console.log(arr.includes(7));
// console.log(arr.includes(17));
//映射
// let ar0=arr.map((el,i) => {
// console.log("数组下标项"+el,'下标'+i);
// return {项:el,下标:i};
// })
//增
//头部
arr.unshift('0');
//尾部
arr.push("8");
//删
//头部删
arr.shift();
//尾部删
arr.pop();
//指定删
arr.splice(1,2); //参数一:下标位置 , 参数二:删除几个
//改
arr[1]="2";
//查
console.log(arr[3]);
console.log(arr);
</script>
</body>
</html>

88
Html-Javascript/07-基础语法-流程控制.html Normal file
View File

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log("街");
console.log("打酱油");
//true 看见西红柿
//false 没看见西红柿
if (true){
console.log("买一个");
j=1;
}else {
console.log("买两斤西瓜");
j=2;
}
console.log(`买${j}个西瓜`);
// No.1
// if (true){
// }else {
// }
//No.2
// if(true | false){
// code
// }
//No.3
// if(true | false) {
// }else if(true | false){
// }else {
// }
//No.4
// if(true | false) Code
//特殊的流程控制
//三元运算
// let san = true ? "code1":"code2";
// let san = true ?
// true ? "code1":"code2":
// "code2";
//swith
let a="厚度"
switch(a){
case "厚度":
//code
console.log("?");
break;
case "七零":
//code
console.log("?");
break;
default:
console.log("谁也不找");
}
console.log(san);
//阻断
console.log(true && "你好啊");
console.log(fale && "好"); //不会出现"好"
</script>
</body>
</html>

54
Html-Javascript/08-基础语法-循环.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//循环要素
//1.循环初始值
//2.循环变量
//3.循环结束条件(必须的结束)
// for(let i =0;i<10;i++){
// console.log(i);
// }
//break 结束当前循环任务
// for(let i =0;i<10;i++){
// console.log(i);
// break;
// }
//continue 结束本次循环 continue之后的代码不执行
// for(let i =0;i<10;i++){
// if(i %2==0){
// continue;
// }
// console.log(i);
// }
//while循环
// let ix=0;
// while(ix<10){
// ix++;
// console.log(ix);
// }
//do while
// let ix=0;
// do{
// console.log(ix);
// ix++;
// }while(ix<10);
</script>
</body>
</html>

60
Html-Javascript/09-字符串.html Normal file
View File

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: "水彩字体";
src: url(./字体.woff2);
}
html {
font-family: "水彩字体";
color: salmon;
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
The variable named var in the global variable is attached to the window global object
</div>
<script>
let str= "hello 厚度, i o y"
//获取字符串长度
console.log(str.length);
//获取字符串unicode编码
// console.log(str.charCodeAt(0));
//unicode 转字符串
// console.log(String.fromCharCode(1));
//字符串变数值 split()
let name = `章三,李四,王五,赵六`;
console.log(name.split(','));
//正则
let strr = "章三,李四,王五,赵六";
let reg= /,/;
//正则匹配
let b =reg.test(strr);
console.log(b);
//替换
let stt =strr.replace(/,/g,'--');
console.log(stt);
</script>
</body>
</html>

67
Html-Javascript/10-dom-获取dom.html Normal file
View File

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
app
<div class="box"></div>
<ul>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ul>
</div>
<script>
//00-获取dom
//选择 单
let app=document.querySelector("#app"); //参数为css中的选择器
//选择 多
let li = document.querySelectorAll("#app ul li");
// 01-获取的特殊的dom
// let html = document.documentElement;
// console.log(html);
//获取body的dom
// let body =document.body;
// console.log(body);
//获取header的dom
// let head = document.head;
// console.log(head);
//获取title的dom
// let title = document.title;
// console.log(title);
//查看 确定自己是否已经获取了dom
// console.dir(app);
// console.log(app);
// console.log(li);
// console.dir(li);
//获取dom的主要用于:
//1.添加事件
//2.修改样式
//3.修改属性
//4.修改标签内容
</script>
</body>
</html>

51
Html-Javascript/11-dom2.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">点我 </button>
<div id="app"></div>
<script>
let app = document.querySelector("#app");//获取dom
let btn = document.querySelector("#btn");
let i=0;
console.log(btn);
//01-添加事件
// dom.on事件名称= 函数
btn.onclick = ()=>{
i++;
console.log("被点了怎模板!","我很记仇的这是你点击我的第"+i+"下");
//02-修改内容
if(i>10){
// app.innerText=`找死!!`;
app.innerHTML=`<b>找死!!</b>`;
}else{
// app.innerText = `我很记仇的这是你点击我的第${i}下`;
app.innerHTML = `我很记仇的这是你点击我的第${i}下`;
}
}
//注意:
//innerText 不解析标签
//innerHTML 解析标签
</script>
</body>
</html>

65
Html-Javascript/12-dom3.html Normal file
View File

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#app {
width: 300px;
height: 200px;
background-color: salmon;
}
.box {
border: solid 5px #ccc;
color: salmon;
}
.box2 {
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
被点了怎模板!","我很记仇的这是你点击我的第"+i+"下
</div>
<script>
//修改样式
let app = document.querySelector("#app");//获取dom
//2-1直接写行内样式
// dom.style.样式属性(多单词变驼峰) = "样式属性值"
// app.style.color="pink";
// app.style.fontSize="25px";
// app.style.border="solid 10px #CCC";
//2-2修改class
// app.className = "box box2"; //有缺陷,不好修改, 不建议
// app.className = "box2 ";
//查
console.log(app.classList);
//增
app.classList.add("box");
//删
app.classList.remove("box");
//切换 有就删, 无就增加
app.classList.toggle("box");
//3.修改属性
//dom.属性 = "xxxx";
app.title ="我设置了title";
</script>
</body>
</html>

53
Html-Javascript/13-运算符.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//运算符
//+ - * /
// console.log(1+1);
// console.log(1-1);
// console.log(1*3);
// console.log(1/4);
// % **
//m % n 结果为0-n(不包含n)
//1.m<n 结果为m;
//2.m>n 递归 m =m-n; 直到满足 m<n;跳出递归 结果走第一个
//3.m=n 结果为0
// console.log(10 % 2);
//**幂
// console.log(5**2); 5的平方
//-- ++
// let i=0;
// let j=0;
// console.log(++i,j++);
// console.log(i,j);
//逻辑运算
// 与 或 非
// && || !
// and or not
// console.log(true && true); //true
// console.log(true && false) // false
// console.log(true || false ) //true
// console.log (true || true) //true
</script>
</body>
</html>

44
Html-Javascript/14-解构,对象合并.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//解构
let data = { key1:"value1",key2:"value2",key3:"value3"};
//常规
// let key1=data.key1;
//结果与上无异
// let { key1: 新名字 } = data;
// console.log(key1);
// console.log(新名字);
//合并
let o0= {name:'0',age:16,m:"好"};
let o1={name:'1',m:"额",f:"哭"};
// 将上述两个对象,合并成一个对象(o2),且当key 冲突时,以o1为主
let o2=Object.assign(o0,o1);//可以无数个,且最后面的优先级高
let o3 ={...o0,...o1};
console.log(o2);
</script>
</body>
</html>

104
Html-Javascript/15-函数.html Normal file
View File

@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//函数
//00-函数
//No.1
// function 函数名(){
// //function code
// }
//No.2
// let 函数名 = function (){
// //function code
// }
//No.3
// let 函数名 =()=>{
// //function code
// }
//01-匿名函数
//1.不会独立存在
//2.只要是函数去掉函数名就是匿名函数
//函数传参
// function func0(形参){
// //实参以形参的形式使用
// console.log("func0,start");
// console.log(`参数:${形参}`);
// }
// //调用函数,并传参(实参)
// func0('tututu');
// func0("突突突啥子");
//多参数
//形参和实参(一一对应)
// function func0(形参0, 形参1){
// //实参以形参的形式使用
// console.log("func0,start");
// console.log(`参数:${形参0 + 形参1}`);
// }
// //调用函数,并传参(实参)
// func0('tututu',`?`);
// func0("突突突啥子","不知道");
//正常传参
//1.有几个形参 不一定要传几个实参
//2.传输不能跳着传,必需一个一个排队传
//强上
//目的:
//我就要跳着传,我就不排队
// function func2(参数对象){
// let 默认参数 = {形参0:"请设置参数0",形参1:"请设置参数1"};
// let {形参0,形参1}= Object.assign({默认参数,参数对象});
// console.log("func0,start");
// console.log(`参数:${形参0 + 形参1}`);
// }
// func2({
// // 形参0:"突突突",
// 形参1:'兔子'
// })
//箭头函数
//（）=>{}
//No.1
let f0 =参数0=>{};
//NO.2
//let f1 = 参数0=> a=2;
let f2 = 参数0 =>{
return a=2;
};
//f1与f2一样的
</script>
</body>
</html>

107
Html-Javascript/16-函数进阶.html Normal file
View File

@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//00-return
// function func0(){
// return "小屁孩";
// console.log('return之后的代码,不会再执行')
// }
// //01-递归
// function quyu (m,n){
// let num;
// if(m<n) num=m;
// if(m==n) mun=0;
// if(m>n) {
// num=quyu(m-n,n);
// }
// return num;
// }
// console.log(quyu(10,4));
//02-arguments
// function func1(){
// // auguments.__proto__= Array.prototype
// console.loh(arguments);
// console.dir(Array);
// // arguments.array.forEach(element => {
// // console.log(element);
// // });
// // }
// func1(1,2,3,"第四参数",{c:"第五参数"});
//03-闭包
// function outer (){
// var a=0;
// function inner(){
// a++;
// return a;
// }
// return inner;
// }
// let f1 =outer();
// let f2= outer();
// console.log(f1());
// console.log(f2());
// console.log(f1());
// console.log(f2());
// console.log(f1());
// console.log(f2());
// 04-this
//谁调用它 它 的this就是谁
function f(){
console.log(this);
}
//它定义于哪个地方 它的this就属于谁 这种定义不能修改
let g = () =>
{
console.log(this);
}
f(); //window
g(); //window
let o = {
f,
g
}
let me = {name:"me"};
o.f();//o 对象
o.g();//window
//我命由我不由天
//call
o.f.call(me,"参数一","参数二");
o.f.apply(me,[,"参数一","参数二"]);
//bind 拷贝这个函数，映射
</script>
</body>
</html>

75
Html-Javascript/17-数学对象.html Normal file
View File

@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//Math
// console.log(Math);
//00-随机数
//0 - 1的随机数(不包含0和1)
// console.log(Math.random());
// for (let index =0; index<10000;index++){
// let n = Math.random();
// if(n==0){
// console.log("n包含0");
// }
// if(n==1){
// console.log("n包含1");
// }
// }
//00-1 如何生产0-25的随机数 (不包含边界值)
//生成0-n的随机数 直接*n
// console.log(Math.random()*25);
//00-2 如何生成 5-25 ？
//n-m的随机数
//Math.random()* (m-n) + n
// console.log(Math.random()*20 + 5);
//01-取整
//01-1 向上取整
// console.log(Math.ceil(1.1));
// console.log(Math.ceil(1.9));
//01-2 向下取整
// console.log(Math.floor(1.1));
// console.log(Math.floor(1.9));
//01-3 四舍五入
// console.log(Math.round(1.4));
// console.log(Math.round(1.5));
// console.log(Math.round(1.6));
//02-其他
// 绝对值
console.log(Math.abs(-99));
console.log(Math.abs(-99.222));
console.log(Math.abs(99));
console.log(Math.abs(99.222));
//保留小数
//针对number 结果为string
console.log(8.968).toFixed(2);
</script>
</body>
</html>

42
Html-Javascript/18-日期对象.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//00-创建当前日期
let newDate =new Date();
console.log(newDate);
//01-创建一个自定义日期
let customDate = new Date("2022-02-01 00:00:00");
console.log( customDate);
//02-获取日期对象中的属性
console.log( newDate.getFullYear()); //年
console.log( newDate.getMonth()+1); //月 （月份从0开始的）
console.log( newDate.getDate()); //日
console.log( newDate.getHours()); //时
console.log( newDate.getMinutes()); //分
console.log( newDate.getSeconds()); //秒
console.log( newDate.getMilliseconds());//毫秒
//特殊
//星期
console.log(newDate.getDay()); // 0星期天
console.log(newDate.getTime()); //时间戳 以毫秒为单位
</script>
</body>
</html>

43
Html-Javascript/19-定时器.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//01-定时炸弹
//只会执行一次
// let TimeOut =setTimeout(()=>{
// console.log("炸");
// },3*1000);
//拆除炸弹
// clearTimeout(TimeOut);
//02-定时任务
let n=0;
let interval =setInterval(()=>{
console.log(n);
console.log("你在哪");
console.log("你在干嘛");
n++;
if(n==5){
//清除定时任务
clearInterval(interval);
console.log("滚");
}
},3000);
</script>
</body>
</html>

83
Html-Javascript/20-倒计时-倒数.html Normal file
View File

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#app {
border: solid salmon 1px;
width: 270px;
height: 270px;
padding: 50px 15px;
}
.item {
display: flex;
justify-content: space-around;
}
</style>
</head>
<body>
<div id="app">
<div class="item">
<input type="text" placeholder="请输入验证码">
<button id="verificationCode" >获取验证码</button>
</div>
</div>
<script>
//倒数秒
let verificationCode =document.querySelector("#verificationCode");
let verificationCodeText = "获取验证码";
//倒计时的总数
let s=10;
//发送验证码
verificationCode.onclick =function(){
verificationCode.disabled=true;
//倒计时总数的 减数
let i=0;
//验证码 的倒计时
let interval = setInterval(()=>{
i++;
let ns = s-i;
//验证码倒计时结束
if(ns==0){
verificationCodeText="获取验证码"
verificationCode.disabled=false;
clearInterval(interval);
}else {
//验证码倒计时中
verificationCodeText=`请稍等，验证码发送中,${ns}s后再发送`;
}
//button内容更改
verificationCode.innerText =verificationCodeText;
},1000);
}
</script>
</body>
</html>

89
Html-Javascript/21-倒计时-秒杀倒计时.html Normal file
View File

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1 id="h1"></h1>
<script>
//秒杀倒计时
// 距离过年还剩多少天 时 秒
let h1Text =`距离过年还剩多少 00天 00时 00分 00秒`;
let h1DOM=document.querySelector("#h1");
//特定时间
let customDate = new Date("2023-01-22 00:00:00");
let interval =setInterval(()=>{
//当前时间
let newDate= new Date();
//拦截时间 ，以防时间不对
if(customDate<= newDate) return console.error("年已经过完了");
//准备
let d=`00`;
let h=`00`;
let m=`00`;
let s=`00`;
//做差
//以毫秒为单位的时差
let timeC = customDate-newDate;
let timeCM //计算后的时差
let dS =1000*60*60*24;//一天的毫秒
let hS=1000*60*60;//一小时的毫秒
let mS=1000*60;//一分钟的毫秒
let sS=1000;//一秒的毫秒
//计算倒计时
d=Math.floor( timeC/dS);
timeCM=timeC-d*dS; //不满一天的时间戳
h=Math.floor( timeCM/hS);
timeCM= timeCM-h*hS;//不满一小时的时间戳
m=Math.floor( timeCM/mS);
timeCM = timeCM-m*mS;//不满一分钟的时间戳
s=Math.floor( timeCM/sS);
h1DOM.innerText=`距离过年倒计时 ${twoNumber(d)}天 ${twoNumber(h)}时 ${twoNumber(m)}分 ${twoNumber(s)}秒`;
h1DOM.style.color=randomColorRGBA();
document.body.style.background=randomColorRGBA();
},1000)
//处理数
function twoNumber (num){
return num>=10 ? num: `0${num}`;
}
//随机色
function randomColorRGBA(params){
let r=Math.random()*255;
let g=Math.random()*255;
let b=Math.random()*255;
let a=Math.random();
return `rgba(${r},${g},${b},${a})`;
}
</script>
</body>
</html>

31
Html-Javascript/22-比较运算符.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// ==, >= ，<=, ===
console.log(1>=3); //false
console.log(1<=3);//true
console.log(1==1);//true
console.log(1===1);//true
console.log(1==true);//true
console.log(1==="1");//true
console.log(1===true);//false
//== 再js中用与比较结果
//=== js中用于比较结果，以及类型
</script>
</body>
</html>

46
Html-Javascript/23-隐式转换.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//正经的数据类型转换
//转string
console.log(String(123123));
console.log(String(true));
//转number
console.log(typeof Number("8898"));
console.log(typeof Number("这就是厚度")); //NaN
console.log(Number(true));
console.log(Number(false));
//转布尔(非0即为true)
console.log(Boolean(0));
console.log(Boolean(1));
//隐式转换
//转字符串 +
// console.log(1+1); // 2 number
// console.log( typeof(1+"1")); // 11 String
//转数字 - * /
// console.log(1+true); // 2 number
// console.log(1+flse); // 1 number
// console.log("12"-1); // 11 number
// console.log("12"*'2'); // 24 number
</script>
</body>
</html>

54
Html-Javascript/24-类.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//面向对象：封装， 继承 多态
// class 类名{}
class Animal {
//类的初始化 接受初始化的参数
constructor( name ,shengaoP ,miaosu){
//设置属性
this.name =name;
this.shengaoP= shengaoP;
this.miaosu=miaosu;
}
//设置方法
hit = (itx="别人")=>{
console.log(`${this.name}打->${itx}`);
}
//设置私有属性
static v =function() {
return "1.2.3"
};
// 注意 低版本的浏览器内核不支持
static xxx = "xxx";
}
let Ultraman =new Animal("奥特曼",80,"来自光之国的打怪头");
Ultraman.hit("怪兽");
console.log(Ultraman);
let tiger = new Animal("老虎",1.2,"来自大山深处的王者");
tiger.hit("武松");
console.log(tiger);
</script>
</body>
</html>

57
Html-Javascript/25-类的继承.html Normal file
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//面向对象：封装， 继承 多态
// class 类名{}
class Animal {
//类的初始化 接受初始化的参数
constructor( Aname ,shengaoPJ ,miaosu){
//设置属性
this.Aname =Aname;
this.shengaoPJ= shengaoPJ;
this.miaosu=miaosu;
}
//设置方法
hit = (itx="别人")=>{
console.log(`${this.name}打->${itx}`);
}
//设置私有属性
static v =function() {
return "1.2.3"
};
// 注意 低版本的浏览器内核不支持
static xxx = "xxx";
}
//初始化个体奥特曼
class Ultraman extends Animal {
constructor(Cname,shengaoPJ,jiesao){
//父类 的初始化 ， 可给父类传参
super("奥特曼",80,"来自光之国的打怪头");
this.Cname=Cname;
this.shengaoPJ=shengaoPJ;
this.jiesao=jiesao;
}
}
let zeta = new Ultraman("泽塔",90,"来自光之国的打怪头");
console.log(zeta);
</script>
</body>
</html>

59
Html-Javascript/26-类的监听.html Normal file
View File

@ -0,0 +1,59 @@
<!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>
<hr>
<input type="text" id="input" placeholder="你输入">
<p id="p"></p>
<script>
// 类的监听
class N {
constructor() {
// 计数属性 (监听)
// this.num = 0;
// 计数属性的 映射 代理存值
this._num = 0;
let input = document.querySelector("#input");
input.oninput = () => {
this.num = input.value;
}
}
// 监听 num
set num(val) { // 设置
// console.log("num 被设置值了 值为:" + val);
document.querySelector("#p").innerHTML = val;
this._num = val; // 代理存值
}
get num() { // 查看
console.log("num 被查看了");
return this._num;
}
}
let nc = new N();
console.log('nc.num', nc.num); // undefined
console.log('nc._num', nc._num); // undefined
console.log(nc);
// MVC
// 用数据 驱动视图
</script>
</body>
</html>

248
Html-Javascript/27-DOM的创建.html Normal file
View File

@ -0,0 +1,248 @@
<!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>
#app {
box-sizing: border-box;
width: 820px;
height: 380px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
}
.top {
height: 340px;
position: relative;
}
.box-content {
display: flex;
position: absolute;
left: 0;
/* 轮播 */
transition: .4s;
/* 过度 */
}
.bottom {
display: flex;
height: 40px;
line-height: 40px;
color: #424242;
font-size: 14px;
}
.bottom .item {
width: 20%;
background-color: #E3E2E2;
text-align: center;
cursor: pointer;
}
.bottom .item.active {
color: #cea861;
border-bottom: solid 2px #cea861;
}
</style>
</head>
<body>
<div id="app">
<!-- <div class="top">
<div class="box-content">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220107/e88d7dae2f753763c940d13ef795af56.jpeg"
alt="">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220107/647cf82ec515d2e3baef10c4de5f2495.jpeg"
alt="">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220107/47a44be9c9a38ef77f2f7c2a349c90be.jpeg"
alt="">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220101/b0f2ef7d103992e703941e99a4108010.jpeg"
alt="">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20211104/023cfa33cf08b513ae430d89740b56f6.jpeg"
alt="">
</div>
</div>
<div class="bottom">
<div class="item active">2022 新赛季新征程</div>
<div class="item">2022 新赛季新征程</div>
<div class="item">2022 新赛季新征程</div>
<div class="item">2022 新赛季新征程</div>
<div class="item">2022 新赛季新征程</div>
</div> -->
</div>
<script>{
//如何用js代码 生成这样的结构
//后端放回的数据
let dataLbt =[{
img:"https://ossweb-img.qq.com/upload/adw/image/977/20220107/e88d7dae2f753763c940d13ef795af56.jpeg",
title:"2022 新赛季新征程"
},{
img:"https://ossweb-img.qq.com/upload/adw/image/977/20220107/647cf82ec515d2e3baef10c4de5f2495.jpeg",
title:"2022 新赛季新征程"
},{
img:"https://ossweb-img.qq.com/upload/adw/image/977/20220107/47a44be9c9a38ef77f2f7c2a349c90be.jpeg",
title:"2022 新赛季新征程"
},{
img:"https://ossweb-img.qq.com/upload/adw/image/977/20220101/b0f2ef7d103992e703941e99a4108010.jpeg",
title:"2022 新赛季新征程"
},{
img:"https://ossweb-img.qq.com/upload/adw/image/977/20211104/023cfa33cf08b513ae430d89740b56f6.jpeg",
title:"2022 新赛季新征程"
}];
//用数据 生成结构
//创建dom
//top大盒子
let topX=document.createElement("div");
topX.className = "top";
//图片容器盒子
let boxContent= document.createElement("div");
boxContent.className = "box-content";
//循环生成图片
for(let index =0;index<dataLbt.length;index++ ){
//当前项
const element = dataLbt[index];
let img = document.createElement("img");
//放入图片地址
img.src=element.img;
//给图片找容器
boxContent.appendChild(img);
}
console.log(topX);
//将一个盒子放入另一个盒子
// 父.appendChild(子);
topX.appendChild(boxContent);
//bottom
let bottom=document.createElement("div");
bottom.className = "bottom";
for(let index =0;index<dataLbt.length;index++ ){
//当前项
const element = dataLbt[index];
let item=document.createElement("div");
item.className = "item";
item.innerText=element.title;
bottom.appendChild(item);
}
let app =document.querySelector("#app");
//放入上面部分
app.appendChild(topX);
app.appendChild(bottom);
}
</script>
<script>
class Lbt {
constructor() {
this._indexNew = 0;
this.time = null;
// dom
this.item = document.querySelectorAll(".bottom .item");
this.boxContent = document.querySelector(".box-content");
this.app = document.querySelector("#app");
// 添加点击事件
this.item.forEach((el, i) => {
el.onclick = () => {
// 更改新旗帜
this.indexNew = i;
}
})
// 自动轮播
this.zdlb();
// 移除定时器
this.app.onmouseenter = () => {
clearInterval(this.time);
}
// 加上定时器
this.app.onmouseleave = () => {
this.zdlb();
}
// 被监听 属性 不要放在最前头
this.indexNew = 0;
}
// 视图
view = function (i, lodI) {
// 旧的样式得删掉
this.item[lodI].classList.remove("active");
// 添加样式
this.item[i].classList.add("active");
// 让图片动
this.boxContent.style.left = `${820 * i * -1}px`;
}
// 自动轮播方法
zdlb = () => {
this.time = setInterval(() => {
let i = this.indexNew;
i++;
// 边界值处理
if (i >= this.item.length) {
i = 0;
}
// 更改新旗帜
this.indexNew = i;
}, 1000);
}
set indexNew(val) {
// 更改新旗帜
this.view(val, this._indexNew);
this._indexNew = val;
}
get indexNew() {
return this._indexNew;
}
}
let l = new Lbt();
// // 旗帜
// let indexNew = 0; // 现在
// let indexLod = indexNew; // 过去
</script>
</body>
</html>

95
Html-Javascript/28-DOMClass.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>Document</title>
</head>
<body>
<div id="app">
</div>
<script>
// 1. 正常的js 创建dom?
// let boxContent = document.createElement("div");
// 2. 正常的js 放入dom?
// 父.appendChild(子);
// 用 对象 去表达dom
// let o = {
// el: "div",
// id: "app",
// innerText: "",
// style: {},
// elChildren: []
// }
class DOMClass {
constructor(DOMObj, root) {
if (DOMObj) {
this.d = this.createDOM(DOMObj, root);
}
}
// 创建dom
createDOM = (DOMObj, root) => {
// 创建的 dom
let cDOM = document.createElement(DOMObj.el);
// 赋予属性
for (const key in DOMObj) {
cDOM[key] = DOMObj[key];
}
// 赋予样式
for (const key in DOMObj.style) {
cDOM.style[key] = DOMObj.style[key];
}
// 递归
// 如果该盒子存在子盒子(多个或一个) 即创建子盒子 并丢进去
DOMObj.elChildren && DOMObj.elChildren.forEach(element => {
// 将 孩子 挨个传入 生成dom 并丢到 父盒子中
this.createDOM(element, cDOM);
});
// 如果给容器 就帮你放入
if (root) {
root.appendChild(cDOM);
}
return cDOM;
}
}
new DOMClass({
el: "img",
src: "https://img1.baidu.com/it/u=1551191955,2379059527&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
,style: {
width: "300px"
}
}, document.querySelector("#app"));
new DOMClass({
el: "a",
href: "http://www.jd.com",
innerText: "去百度"
}, document.querySelector("#app"));
</script>
</body>
</html>

164
Html-Javascript/29-DOMClass-首战-1.html Normal file
View File

@ -0,0 +1,164 @@
<!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>
<script src="./js/DOMClass.js"></script>
<style>
#app {
box-sizing: border-box;
width: 820px;
height: 380px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
}
.top {
height: 340px;
position: relative;
}
.box-content {
display: flex;
position: absolute;
left: 0;
/* 轮播 */
transition: .4s;
/* 过度 */
}
.bottom {
display: flex;
height: 40px;
line-height: 40px;
color: #424242;
font-size: 14px;
}
.bottom .item {
width: 20%;
background-color: #E3E2E2;
text-align: center;
cursor: pointer;
}
.bottom .item.active {
color: #cea861;
border-bottom: solid 2px #cea861;
}
</style>
</head>
<body>
<div id="app">
</div>
<script>
(() => {
// 后端放回的数据
let dataLbt = [{
img: "https://ossweb-img.qq.com/upload/adw/image/977/20220107/e88d7dae2f753763c940d13ef795af56.jpeg",
title: "2022 新赛季新征程"
}, {
img: "https://ossweb-img.qq.com/upload/adw/image/977/20220107/647cf82ec515d2e3baef10c4de5f2495.jpeg",
title: "2022 新赛季新征程"
}, {
img: "https://ossweb-img.qq.com/upload/adw/image/977/20220107/47a44be9c9a38ef77f2f7c2a349c90be.jpeg",
title: "2022 新赛季新征程"
}, {
img: "https://ossweb-img.qq.com/upload/adw/image/977/20220101/b0f2ef7d103992e703941e99a4108010.jpeg",
title: "2022 新赛季新征程"
}, {
img: "https://ossweb-img.qq.com/upload/adw/image/977/20211104/023cfa33cf08b513ae430d89740b56f6.jpeg",
title: "2022 新赛季新征程"
}];
// 渲染页面
// top
new DOMClass({
el: "div",
className: "top",
elChildren: [{
el: "div",
className: "box-content",
elChildren: dataLbt.map((ite) => ({ el: "img", src: ite.img }))
}]
}, document.querySelector("#app"));
// bottom
new DOMClass({
el: "div",
className: "bottom",
elChildren: dataLbt.map((ite) => ({ el: "div", className: "item", innerText: ite.title }))
}, document.querySelector("#app"));
})()
</script>
<script>
// 旗帜
let indexNew = 0; // 现在
let indexLod = indexNew; // 过去
let item = document.querySelectorAll(".bottom .item");
let boxContent = document.querySelector(".box-content");
let app = document.querySelector("#app");
item.forEach((el, i) => {
el.onclick = () => {
view(i);
}
})
function view(i) {
// 新旗帜改变前 保留为 旧旗帜
indexLod = indexNew;
// 更改新旗帜
indexNew = i;
// 旧的样式得删掉
item[indexLod].classList.remove("active");
// 添加样式
item[indexNew].classList.add("active");
// 让图片动
boxContent.style.left = `${820 * indexNew * -1}px`;
}
// 自动轮播
let time
function zdlb() {
time = setInterval(() => {
let i = indexNew;
i++;
// 边界值处理
if (i >= item.length) {
i = 0;
}
view(i);
}, 1000);
}
zdlb();
// 移除定时器
console.dir(app);
app.onmouseenter = () => {
clearInterval(time);
}
// 加上定时器
app.onmouseleave = () => {
zdlb();
}
</script>
</body>
</html>

177
Html-Javascript/29-DOMClass-首战.html Normal file
View File

@ -0,0 +1,177 @@
<!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>
<!-- 引入文件 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./js/DOMClass.js"></script>
<style>
#app {
box-sizing: border-box;
width: 820px;
height: 380px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
}
.top {
height: 340px;
position: relative;
}
.box-content {
display: flex;
position: absolute;
left: 0;
/* 轮播 */
transition: .4s;
/* 过度 */
}
.bottom {
display: flex;
height: 40px;
line-height: 40px;
color: #424242;
font-size: 14px;
}
.bottom .item {
width: 20%;
background-color: #E3E2E2;
text-align: center;
cursor: pointer;
}
.bottom .item.active {
color: #cea861;
border-bottom: solid 2px #cea861;
}
</style>
</head>
<body>
<div id="app">
</div>
<script>
(async (callBack) => {
// 后端放回的数据
// let dataLbt = [{
// img: "https://ossweb-img.qq.com/upload/adw/image/977/20220107/e88d7dae2f753763c940d13ef795af56.jpeg",
// title: "2022 新赛季新征程"
// }, {
// img: "https://ossweb-img.qq.com/upload/adw/image/977/20220107/647cf82ec515d2e3baef10c4de5f2495.jpeg",
// title: "2022 新赛季新征程"
// }, {
// img: "https://ossweb-img.qq.com/upload/adw/image/977/20220107/47a44be9c9a38ef77f2f7c2a349c90be.jpeg",
// title: "2022 新赛季新征程"
// }, {
// img: "https://ossweb-img.qq.com/upload/adw/image/977/20220101/b0f2ef7d103992e703941e99a4108010.jpeg",
// title: "2022 新赛季新征程"
// }, {
// img: "https://ossweb-img.qq.com/upload/adw/image/977/20211104/023cfa33cf08b513ae430d89740b56f6.jpeg",
// title: "2022 新赛季新征程"
// }];
// 由后台获取
let data = await axios({
url: "http://127.0.0.1:7890/lbt", // 请求地址
method: "POST", // 默认是GET 请求方式
});
console.log(data.data.data);
let dataLbt = data.data.data;
// 渲染页面
// top
new DOMClass({
el: "div",
className: "top",
elChildren: [{
el: "div",
className: "box-content",
elChildren: dataLbt.map((ite) => ({ el: "img", src: ite.img }))
}]
}, document.querySelector("#app"));
// bottom
new DOMClass({
el: "div",
className: "bottom",
elChildren: dataLbt.map((ite) => ({ el: "div", className: "item", innerText: ite.title }))
}, document.querySelector("#app"));
callBack();
})(lbtzidong)
function lbtzidong() {
// 旗帜
let indexNew = 0; // 现在
let indexLod = indexNew; // 过去
let item = document.querySelectorAll(".bottom .item");
let boxContent = document.querySelector(".box-content");
let app = document.querySelector("#app");
item.forEach((el, i) => {
el.onclick = () => {
view(i);
}
})
function view(i) {
// 新旗帜改变前 保留为 旧旗帜
indexLod = indexNew;
// 更改新旗帜
indexNew = i;
// 旧的样式得删掉
item[indexLod].classList.remove("active");
// 添加样式
item[indexNew].classList.add("active");
// 让图片动
boxContent.style.left = `${820 * indexNew * -1}px`;
}
// 自动轮播
let time
function zdlb() {
time = setInterval(() => {
let i = indexNew;
i++;
// 边界值处理
if (i >= item.length) {
i = 0;
}
view(i);
}, 1000);
}
zdlb();
// 移除定时器
console.dir(app);
app.onmouseenter = () => {
clearInterval(time);
}
// 加上定时器
app.onmouseleave = () => {
zdlb();
}
}
</script>
</body>
</html>

53
Html-Javascript/31-同步异步的认识.html Normal file
View File

@ -0,0 +1,53 @@
<!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>
<script>
// 从上到下 从左到右
// 同步
// console.log("start");
// // N
// console.log("end");
// 异步
// 定时器， Ajax， 读取文件，
console.log("start");
// 异步代码
setTimeout(() => {
console.log("内容");
}, 0);
throw 'stop'
console.log("end");
</script>
</body>
</html>
<!--
如何区分异步API与同步API
看 这个API 需不需要 等待时间
看 这个API 需不需要 等待时间是确定的吗（不是人为确定 是机器内部确定）
-->

69
Html-Javascript/32-异步代码同步化1.html Normal file
View File

@ -0,0 +1,69 @@
<!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>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
// 早期人类驯服异步API的底层逻辑
// 异步代码同步化
// 00-回调函数
// function 异步(callBack) {
// setTimeout(() => {
// data = { d: "我是数据" };
// callBack();
// })
// }
// let data;
// // 回调地狱的形成
// 异步(() => {
// console.log(data);
// 异步(() => {
// console.log(data);
// 异步(() => {
// console.log(data);
// 异步(() => {
// console.log(data);
// });
// });
// });
// });
// let data = axios({ url: "http://127.0.0.1:7890", })
// console.log(data);
// Promise
// 接口1
// let a;
// axios({ url: "http://127.0.0.1:7890" }).then(res => {
// console.log(res.data);
// a = res.data;
// // 调用2接口前 需要1接口的返回数据
// if (res.data.code == 201) {
// // 接口2
// axios({ url: "http://127.0.0.1:7890/xxx" }).then(res => {
// console.log(res.data);
// // 接口3
// // 接口4
// })
// }
// })
// console.log(a);
</script>
</body>
</html>

43
Html-Javascript/33-异步代码同步化2.html Normal file
View File

@ -0,0 +1,43 @@
<!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>
<script>
// 定义一个Promise方法
function func() { // 正常 异常
return new Promise((resolve, reject) => {
setTimeout(() => {
let data = { n: "想不到吧, 我三秒后才出现, 你们抓不到我的" }
if (Math.random() > 0.5) {
resolve(data);
} else {
reject("完蛋了, bbq");
}
}, 1000);
});
}
// func().then() // 正常
// func().catch() // 异常
func()
.then(res => {
console.log(res);
})
.catch(e => {
console.error(e);
})
console.log("end");
</script>
</body>
</html>

75
Html-Javascript/34-异步代码同步化async await.html Normal file
View File

@ -0,0 +1,75 @@
<!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>
<script>
// 异步代码同步化
// 函数体内 无异步 (只正对于 返回Promise的对象)
// 将异步api封装成Promise对象
function func() { // 正常 异常
return new Promise((resolve, reject) => {
setTimeout(() => {
let data = { n: "想不到吧, 我三秒后才出现, 你们抓不到我的" }
if (Math.random() > 0.5) {
resolve(((data)));
} else {
reject("完蛋了, bbq");
}
}, 1000);
});
}
// 函数体内 无异步 async await
// 00- 基本
// async 加在要将函数体内无异步的函数最前面
// (async () => {
// // await 加在Promise对象之前
// let data = await func(); // 异步1
// console.log(data);
// let data1 = await func(); // 异步2
// let data2 = await func(); // 异步3
// })();
// 01- 进阶
// 如果其中一个异步挂了, 函数直接不执行了
(async function () {
try {
let data = await func(); // 异步1
console.log(data);
} catch (e) {
console.log(e);
}
try {
let data1 = await func(); // 异步2
console.log(data1);
} catch (error) {
console.log(error);
}
try {
let data2 = await func(); // 异步3
console.log(data2);
} catch (error) {
console.log(error);
}
})();
</script>
</body>
</html>

81
Html-Javascript/35-Ajax.html Normal file
View File

@ -0,0 +1,81 @@
<!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>
<button id="btn">按钮</button>
<div id="app">
</div>
<!-- api文档地址
https://api.zzhitong.com/help
-->
<script>
document.querySelector("#btn").onclick = function () {
console.log("点我了");
}
// 表单提交 页面刷新
// 资源重新加载
// 页面信息没了
// Ajax
// 页面资源的局部数据更改
// 页面无状态发送并接收数据
// https://api.zzhitong.com/ip 获取ip地址的api
// Ajax对象
let xhr = new XMLHttpRequest();
console.log(xhr);
// 请求的基本配置
xhr.open("GET", "https://api.zzhitong.com/ip", true);
// 请求配置完成
xhr.send();
// 请求状态
xhr.onreadystatechange = () => {
// xhr.readyState
// 0 未初始化
// 1 服务器以建立连接
// 2 请求已被接受
// 3 请求处理中
// 4 请求完成 响应就绪
// console.log(xhr);
if (xhr.readyState === 4) {
let data = JSON.parse(xhr.response);
console.log(data);
document.querySelector("#app").innerHTML = `
<h1>ip:${data.number_ip.ip.key} 地址: ${data.number_ip.ip.location}</h1>
`
}
};
</script>
</body>
</html>

65
Html-Javascript/36-axios.html Normal file
View File

@ -0,0 +1,65 @@
<!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>
<!-- 引入文件 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!-- axios 是正对于Ajax的一个库 -->
<script>
// 00- 用axios 发送请求
// axios({
// url: "http://127.0.0.1:7890", // 请求地址
// method: "POST", // 默认是GET 请求方式
// })
// 01- 用axios 发送数据
// GET
// axios({
// url: "http://127.0.0.1:7890/lbt", // 请求地址
// method: "GET", // 默认是GET 请求方式
// params: {
// key: "value"
// },
// })
// POST
// axios({
// url: "http://127.0.0.1:7890/lbt", // 请求地址
// method: "POST", // 默认是GET 请求方式
// data: {
// key: "value"
// },
// })
// 02- 请求头的设置
// axios({
// url: "http://127.0.0.1:7890/lbt", // 请求地址
// method: "POST", // 默认是GET 请求方式
// data: {
// key: "value"
// },
// // 修改请求头
// headers: { 'X-Requested-With': 'XMLHttpRequest' },
// })
// 拦截器 选修内容 可以自行了解
</script>
</body>
</html>

206
Html-Javascript/37-数组去重.html Normal file
View File

@ -0,0 +1,206 @@
<!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>
<script>
// // 将如下数组去重
// let arr = [3, 1, 2, 3, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, '1', '2', '3', 77, 9];
// // 只能使用循环 函数 流程控制 等手段
// // 去重
// function qc(arr) {
// let o = [];
// for (let i = 0; i < arr.length; i++) {
// const element = arr[i];
// if (!o.includes(element)) {
// o.push(element);
// }
// }
// return o;
// }
// // console.log(qc(arr));
let arr = [1, 9, 3, 4, 5, 8, 2, 6, 7];
// // 排序
function paixu(arr) {
let o = JSON.parse(JSON.stringify(arr));
for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < arr.length - i; j++) {
let el0 = o[j];
let el1 = o[j + 1];
// 当前项 大于 当前前项
if (el0 > el1) {
// 我就将 当前项 与当前前项 互换位置
let cy = o[j + 1];
o[j + 1] = o[j];
o[j] = cy;
}
}
}
return o;
}
console.log(paixu(arr));
// console.log("请" > "啊");
// console.log("请".charCodeAt(0));
// console.log("啊".charCodeAt(0));
// function qufan(str) {
// // solit("") 字符串 用特定的 字符分割成数组
// // join("") 数组 用特定的 字符 进行 组合成一个数组
// let arr = str.split("");
// // console.log(arr);
// let o = [];
// for (let i = 0; i < arr.length; i++) {
// o.push(arr[arr.length - i - 1]);
// }
// return o.join("");
// }
// console.log(qufan("你爱我呀我爱你呀"));
// 数据 的key 是数据的key
// 而我们要导入 excel 的是 excel 的key
// 我有一个数据
// 我不动它的格式 我要改它的key
// let o = [{
// key1: "value1",
// key2: "value2",
// key3: "value3",
// key4: "value4",
// key5: "value5",
// key6: "value6",
// key7: "value7",
// key8: "value8",
// key9: "value9",
// }, {
// key1: "value1",
// key2: "value2",
// key3: "value3",
// key4: "value4",
// key5: "value5",
// key6: "value6",
// key7: "value7",
// key8: "value8",
// key9: "value9",
// }, {
// key1: "value1",
// key2: "value2",
// key3: "value3",
// key4: "value4",
// key5: "value5",
// key6: "value6",
// key7: "value7",
// key8: "value8",
// key9: "value9",
// }];
// // 我要将数据改成类下
// // let o1 = [
// // {
// // Mykey1: "value1",
// // Mykey2: "value2",
// // }
// // ]
// // 01- 要定义一个改值规则
// let xbjdy = {
// key1: "Mykey1",
// key2: "Mykey2",
// key3: "Mykey3",
// key4: "Mykey4",
// key5: "Mykey5",
// key6: "Mykey6",
// key7: "Mykey7",
// key8: "Mykey8",
// key9: "Mykey9",
// }
// // 02- 改key
// function gaiKey(arr, obj) {
// // 对复杂数据类型进行 修改等操作时 建议 克隆
// arr = JSON.parse(JSON.stringify(arr));
// // 修改 数据的容器
// let orr = [];
// for (let i = 0; i < arr.length; i++) {
// // 要被修改的对象
// const element = arr[i];
// // 循环对象
// for (const key in element) {
// // 当前项 规则 按规则添加新key
// arr[i][obj[key]] = element[key]; // 改key
// delete element[key]; // 删除原有key数据
// orr.push(element);
// }
// }
// return orr;
// }
// console.log(gaiKey(o, xbjdy));
// let arr = [
// {
// name: "张三",
// xxx: "xxx"
// },
// {
// name: "张4",
// xxx: "xxx"
// },
// {
// name: "张三",
// xxx: "xxx"
// },
// {
// name: "张5",
// xxx: "xxx"
// },
// {
// name: "张6",
// xxx: "xxx"
// },
// {
// name: "张5",
// xxx: "xxx"
// },
// ]
// // 复杂数据类型去重
// function quc(arr) {
// let o = [];
// for (let i = 0; i < arr.length; i++) {
// const eleI = arr[i];
// // 匹配条件的下标 没有匹配上 就是 -1 匹配上了就不是 -1
// let oi = o.findIndex((ite) => {
// return ite.name == eleI.name;
// });
// if (oi == -1) {
// o.push(eleI);
// }
// }
// return o;
// }
// console.log(quc(arr));
</script>
</body>
</html>

66
Html-Javascript/38-链式操作.html Normal file
View File

@ -0,0 +1,66 @@
<!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>
<script>
// function func() { // 正常 异常
// return new Promise((resolve, reject) => {
// setTimeout(() => {
// let data = { n: "想不到吧, 我三秒后才出现, 你们抓不到我的" }
// if (Math.random() > 0.5) {
// resolve(((data)));
// } else {
// reject("完蛋了, bbq");
// }
// }, 1000);
// });
// }
// // 链式操作
// func().then().catch();
// 函数
function GzFunc(params) {
console.log("初始化");
}
GzFunc.prototype.hdyyds = function (params) {
console.log(params + "(厚渡YYDS)");
return this; // 链式调用 核心
};
let xxo = new GzFunc();
xxo.hdyyds("第一次调用")
.hdyyds("第二次调用")
.hdyyds("第三次调用")
.hdyyds("第四次调用")
// 类
// class O {
// hdyyds = function (params) {
// console.log(params + "(厚渡YYDS)");
// return this;
// }
// }
// let xxo = new O();
// xxo.hdyyds("第一次调用").hdyyds("第二次调用").hdyyds("第三次调用")
</script>
</body>
</html>

57
Html-Javascript/39-浏览器对象补充.html Normal file
View File

@ -0,0 +1,57 @@
<!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>
<h1>3秒后回归</h1>
<script>
// history
// console.log(history);
// setTimeout(() => {
// history.back(); // 回退
// history.forward(); // 前进
// }, 3000)
// history.go(1); // 前进一个页面
// history.go(0); // 刷新当前页面
// history.go(-1); // 后退一个页面
// 存储对象
// localStorage 存字符串数据 存储时效 你不删我就在
// sessionStorage 存字符串数据 页面关闭 我就清空
// 增 // 改
// localStorage.setItem("key", "value");
// localStorage.setItem("key", "change value");
// 查
// console.log(localStorage.getItem("key"));
// console.log(localStorage.getItem("myData"));
// 删
// 单数据 指的删除
// localStorage.removeItem("key");
// 清空
// localStorage.clear();
</script>
</body>
</html>

270
Html-Javascript/cs.html Normal file
View File

@ -0,0 +1,270 @@
<!DOCTYPE html>
<html lang="en" style=" font-size: 20px;">
<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>
<script src="./js/DOMClass.js"></script>
<style>
body,
html {
margin: 0;
background-color: #eee;
}
#app {
font-size: 20px;
}
#app p {
font-size: 10rem;
width: 750rem;
background-color: salmon;
}
header {
text-align: center;
font-weight: 600;
padding: 10rem 0;
}
.content {
padding: 25rem;
}
.content h3 {
padding-left: 20rem;
margin: 0;
font-size: 43rem;
display: inline-block;
border-radius: 15rem;
background-color: sandybrown;
padding: 10rem 20rem;
position: relative;
top: -30rem;
left: -20rem;
}
.item {
box-sizing: border-box;
width: 700rem;
background-color: #fff;
border-radius: 20rem;
padding: 20px 30px 0;
margin: 15rem 0;
}
.t1,
.t2,
.t3 {
font-size: 30rem;
color: #707070;
display: flex;
justify-content: space-between;
padding-bottom: 20rem;
}
.t1 b {
font-size: 1.2em;
}
.t1 span {
color: #F66A4B;
font-size: 1.2em;
}
.t2 b {
font-weight: 400;
}
</style>
</head>
<body>
<div id="app">
<header>瞎几把写</header>
<div class="content">
<!-- <div class="item">
<h3>1月</h3>
<div class="t1"><b>快捷</b> <span>￥0.8</span> </div>
<div class="t2"><b>订单号：xxxxx</b> <span>收款￥200</span> </div>
<div class="t3">2022.01.14</div>
</div> -->
</div>
</div>
<script>
// rem 做移动端布局
// 1rem = 750/1
// 750rem = 1
window.onresize = () => {
let html = document.documentElement;
// 活学活用
html.style.fontSize = `${document.body.clientWidth / 750}px`;
console.log(document.body.clientWidth);
}
window.onresize();
// 创造数据
class creatData {
constructor(num) {
this.data = [];
for (let index = 0; index < num; index++) {
let o = {
title: "快捷" + this.random(1, 20),
yinli: this.random(0, 10, true),
order: this.random(1111111, 9999999), shoukuan: this.random(99, 9999),
// tiem: this.chulitime(new Date(`2022.${this.twoNumber(this.random(1, 12))}.14`))
tiem: this.random(1, 12)
};
this.data.push(o);
// this.data.push(o);
// this.data.push(o);
// this.data.push(o);
}
}
// 随机整型
random = (min, max, boo) => {
if (boo) return Math.random() * (max - min) + min;
return Math.round(Math.random() * (max - min) + min);
}
// 处理时间
chulitime = function (date) {
let n = date.getFullYear();
let m = date.getMonth() + 1;
let d = date.getDate();
return `${this.twoNumber(n)}-${this.twoNumber(m)}-${this.twoNumber(d)}`
}
// 处理0
twoNumber = function (num) {
return num >= 10 ? num : `0${num}`;
}
}
// 生成数据
let cdata = new creatData(30);
// console.log(JSON.stringify(cdata.data));
// let cdata = [{ "title": "快捷20", "yinli": 1.2004947935132715, "order": 3262211, "shoukuan": 6521, "tiem": 4 }, { "title": "快捷5", "yinli": 7.35335443886493, "order": 3378466, "shoukuan": 7842, "tiem": 9 }, { "title": "快捷3", "yinli": 3.8289985173714314, "order": 2429744, "shoukuan": 1386, "tiem": 3 }, { "title": "快捷3", "yinli": 5.8900889549962905, "order": 6568303, "shoukuan": 9578, "tiem": 9 }, { "title": "快捷5", "yinli": 2.081492803426057, "order": 4853339, "shoukuan": 7094, "tiem": 8 }, { "title": "快捷6", "yinli": 7.367918594601108, "order": 3743194, "shoukuan": 9192, "tiem": 11 }, { "title": "快捷14", "yinli": 8.749539294759717, "order": 4463467, "shoukuan": 4756, "tiem": 6 }, { "title": "快捷10", "yinli": 0.4396618405802921, "order": 7847662, "shoukuan": 4782, "tiem": 6 }, { "title": "快捷7", "yinli": 1.1180068932670673, "order": 8881770, "shoukuan": 7542, "tiem": 10 }, { "title": "快捷9", "yinli": 6.797118292703828, "order": 3075520, "shoukuan": 7373, "tiem": 11 }, { "title": "快捷10", "yinli": 9.075198709308536, "order": 6533969, "shoukuan": 265, "tiem": 6 }, { "title": "快捷20", "yinli": 8.598668955886847, "order": 9500107, "shoukuan": 9910, "tiem": 10 }, { "title": "快捷11", "yinli": 7.76909180880142, "order": 9619080, "shoukuan": 4701, "tiem": 9 }, { "title": "快捷14", "yinli": 8.8575780251768, "order": 3542706, "shoukuan": 3676, "tiem": 5 }, { "title": "快捷3", "yinli": 5.696412140248539, "order": 3257784, "shoukuan": 4868, "tiem": 3 }, { "title": "快捷15", "yinli": 9.977736937338303, "order": 8082630, "shoukuan": 396, "tiem": 6 }, { "title": "快捷12", "yinli": 6.246839044648215, "order": 1613209, "shoukuan": 1888, "tiem": 5 }, { "title": "快捷8", "yinli": 4.906031465813494, "order": 5399713, "shoukuan": 2921, "tiem": 10 }, { "title": "快捷2", "yinli": 0.8326504700983572, "order": 2899043, "shoukuan": 4873, "tiem": 11 }, { "title": "快捷13", "yinli": 2.717042078114409, "order": 7026973, "shoukuan": 4713, "tiem": 5 }, { "title": "快捷11", "yinli": 5.120007246070246, "order": 8968655, "shoukuan": 9276, "tiem": 9 }, { "title": "快捷2", "yinli": 7.371393451843639, "order": 6031585, "shoukuan": 1752, "tiem": 5 }, { "title": "快捷17", "yinli": 6.717624881581685, "order": 8756194, "shoukuan": 8172, "tiem": 4 }, { "title": "快捷9", "yinli": 8.337589448325959, "order": 7011616, "shoukuan": 4258, "tiem": 11 }, { "title": "快捷15", "yinli": 8.742851652641189, "order": 8528791, "shoukuan": 1614, "tiem": 9 }, { "title": "快捷9", "yinli": 4.827034226901114, "order": 9047823, "shoukuan": 5249, "tiem": 5 }, { "title": "快捷3", "yinli": 7.350190870381046, "order": 4535017, "shoukuan": 4423, "tiem": 2 }, { "title": "快捷20", "yinli": 5.352794453440925, "order": 5530410, "shoukuan": 3684, "tiem": 2 }, { "title": "快捷4", "yinli": 4.4537656794657625, "order": 1613488, "shoukuan": 5188, "tiem": 8 }, { "title": "快捷6", "yinli": 8.545661245064252, "order": 1859051, "shoukuan": 1314, "tiem": 6 }]
// 方便使用
data = cdata.data;
function paixu(arr) {
let o = JSON.parse(JSON.stringify(arr));
for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < arr.length - i - 1; j++) {
let el0 = new Date(o[i - j].tiem).getTime();
let el1 = new Date(o[i - j + 1].tiem).getTime();
// 当前项 大于 当前前项
if (el0 < el1) {
// 我就将 当前项 与当前前项 互换位置
let cy0 = JSON.parse(JSON.stringify(o[i - j])); // 注意复杂数据类型
let cy1 = JSON.parse(JSON.stringify(o[i - j + 1])); // 注意复杂数据类型
o[i - j + 1] = cy0;
o[i - j] = cy1;
}
}
}
return o;
}
data = paixu(data);
// 争对时间排序ok的情况
// 如何去算
function fenge(de) {
let o = JSON.parse(JSON.stringify(de));
let yue = [];
for (let i = 0; i < de.length; i++) {
const element = o[i];
let date = new Date(element.tiem);
let m = date.getMonth() + 1;
o[i].m = m;
// 控制显示
if (yue.includes(m)) {
o[i].show = 'none'
} else {
yue.push(m);
o[i].show = 'inline-block'
}
}
return o;
}
data = fenge(data);
// 渲染
function view(data) {
console.log(data);
for (let index = 0; index < data.length; index++) {
const elet = data[index];
new DOMClass({
el: "div",
className: "item",
elChildren: [
{
el: "h3", innerText: `${elet.m}月`, style: {
display: elet.show
}
},
{
el: "div",
className: "t1",
elChildren: [
{
el: "b",
innerText: elet.title
},
{
el: "span",
innerText: elet.yinli.toFixed(2)
},
]
},
{
el: "div",
className: "t2",
elChildren: [
{
el: "b",
innerText: `订单号：${elet.order}`
},
{
el: "span",
innerText: `收款￥${elet.shoukuan}`
},
]
},
{
el: "div",
className: "t3",
innerText: elet.tiem
}
]
}, document.querySelector("#app .content"));
}
}
view(data);
</script>
</body>
</html>

4
Html-Javascript/davidshimjs-qrcodejs-04f46c6/.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
.DS_Store
.idea
.project

14
Html-Javascript/davidshimjs-qrcodejs-04f46c6/LICENSE Normal file
View File

@ -0,0 +1,14 @@
The MIT License (MIT)
---------------------
Copyright (c) 2012 davidshimjs
Permission is hereby granted, free of charge,
to any person obtaining a copy of this software and associated documentation files (the "Software"),
to deal in the Software without restriction,
including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

46
Html-Javascript/davidshimjs-qrcodejs-04f46c6/README.md Normal file
View File

@ -0,0 +1,46 @@
# QRCode.js
QRCode.js is javascript library for making QRCode. QRCode.js supports Cross-browser with HTML5 Canvas and table tag in DOM.
QRCode.js has no dependencies.
## Basic Usages
```
<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie");
</script>
```
or with some options
```
<div id="qrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: "http://jindo.dev.naver.com/collie",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
</script>
```
and you can use some methods
```
qrcode.clear(); // clear the code.
qrcode.makeCode("http://naver.com"); // make another code.
```
## Browser Compatibility
IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.
## License
MIT License
## Contact
twitter @davidshimjs
[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/davidshimjs/qrcodejs/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

18
Html-Javascript/davidshimjs-qrcodejs-04f46c6/bower.json Normal file
View File

@ -0,0 +1,18 @@
{
"name": "qrcode.js",
"version": "0.0.1",
"homepage": "https://github.com/davidshimjs/qrcodejs",
"authors": [
"Sangmin Shim", "Sangmin Shim <ssm0123@gmail.com> (http://jaguarjs.com)"
],
"description": "Cross-browser QRCode generator for javascript",
"main": "qrcode.js",
"ignore": [
"bower_components",
"node_modules",
"index.html",
"index.svg",
"jquery.min.js",
"qrcode.min.js"
]
}

47
Html-Javascript/davidshimjs-qrcodejs-04f46c6/index-svg.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<title>Cross-Browser QRCode generator for Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
</head>
<body>
<input id="text" type="text" value="http://jindo.dev.naver.com/collie" style="width:80%" />
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="qrcode"/>
</svg>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 100,
height : 100,
useSVG: true
});
function makeCode () {
var elText = document.getElementById("text");
if (!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
</script>
</body>
</html>

47
Html-Javascript/davidshimjs-qrcodejs-04f46c6/index.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<title>Cross-Browser QRCode generator for Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
</head>
<body>
<input id="text" type="text" value="http://jindo.dev.naver.com/collie" style="width:80%" /><br />
<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 100,
height: 100
});
function makeCode() {
var elText = document.getElementById("text");
if (!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
</script>
</body>

37
Html-Javascript/davidshimjs-qrcodejs-04f46c6/index.svg Normal file
View File

@ -0,0 +1,37 @@
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-50 0 200 100">
<g id="qrcode"/>
<foreignObject x="-50" y="0" width="100" height="100">
<body xmlns="http://www.w3.org/1999/xhtml" style="padding:0; margin:0">
<div style="padding:inherit; margin:inherit; height:100%">
<textarea id="text" style="height:100%; width:100%; position:absolute; margin:inherit; padding:inherit">james</textarea>
</div>
<script type="application/ecmascript" src="qrcode.js"></script>
<script type="application/ecmascript">
var elem = document.getElementById("qrcode");
var qrcode = new QRCode(elem, {
width : 100,
height : 100
});
function makeCode () {
var elText = document.getElementById("text");
if (elText.value === "") {
//alert("Input a text");
//elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
document.getElementById("text").onkeyup = function (e) {
makeCode();
};
</script>
</body>
</foreignObject>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

2
Html-Javascript/davidshimjs-qrcodejs-04f46c6/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

614
Html-Javascript/davidshimjs-qrcodejs-04f46c6/qrcode.js Normal file
View File

@ -0,0 +1,614 @@
/**
* @fileoverview
* - Using the 'QRCode for Javascript library'
* - Fixed dataset of 'QRCode for Javascript library' for support full-spec.
* - this library has no dependencies.
*
* @author davidshimjs
* @see <a href="http://www.d-project.com/" target="_blank">http://www.d-project.com/</a>
* @see <a href="http://jeromeetienne.github.com/jquery-qrcode/" target="_blank">http://jeromeetienne.github.com/jquery-qrcode/</a>
*/
var QRCode;
(function () {
//---------------------------------------------------------------------
// QRCode for JavaScript
//
// Copyright (c) 2009 Kazuhiko Arase
//
// URL: http://www.d-project.com/
//
// Licensed under the MIT license:
// http://www.opensource.org/licenses/mit-license.php
//
// The word "QR Code" is registered trademark of
// DENSO WAVE INCORPORATED
// http://www.denso-wave.com/qrcode/faqpatent-e.html
//
//---------------------------------------------------------------------
function QR8bitByte(data) {
this.mode = QRMode.MODE_8BIT_BYTE;
this.data = data;
this.parsedData = [];
// Added to support UTF-8 Characters
for (var i = 0, l = this.data.length; i < l; i++) {
var byteArray = [];
var code = this.data.charCodeAt(i);
if (code > 0x10000) {
byteArray[0] = 0xF0 | ((code & 0x1C0000) >>> 18);
byteArray[1] = 0x80 | ((code & 0x3F000) >>> 12);
byteArray[2] = 0x80 | ((code & 0xFC0) >>> 6);
byteArray[3] = 0x80 | (code & 0x3F);
} else if (code > 0x800) {
byteArray[0] = 0xE0 | ((code & 0xF000) >>> 12);
byteArray[1] = 0x80 | ((code & 0xFC0) >>> 6);
byteArray[2] = 0x80 | (code & 0x3F);
} else if (code > 0x80) {
byteArray[0] = 0xC0 | ((code & 0x7C0) >>> 6);
byteArray[1] = 0x80 | (code & 0x3F);
} else {
byteArray[0] = code;
}
this.parsedData.push(byteArray);
}
this.parsedData = Array.prototype.concat.apply([], this.parsedData);
if (this.parsedData.length != this.data.length) {
this.parsedData.unshift(191);
this.parsedData.unshift(187);
this.parsedData.unshift(239);
}
}
QR8bitByte.prototype = {
getLength: function (buffer) {
return this.parsedData.length;
},
write: function (buffer) {
for (var i = 0, l = this.parsedData.length; i < l; i++) {
buffer.put(this.parsedData[i], 8);
}
}
};
function QRCodeModel(typeNumber, errorCorrectLevel) {
this.typeNumber = typeNumber;
this.errorCorrectLevel = errorCorrectLevel;
this.modules = null;
this.moduleCount = 0;
this.dataCache = null;
this.dataList = [];
}
QRCodeModel.prototype={addData:function(data){var newData=new QR8bitByte(data);this.dataList.push(newData);this.dataCache=null;},isDark:function(row,col){if(row<0||this.moduleCount<=row||col<0||this.moduleCount<=col){throw new Error(row+","+col);}
return this.modules[row][col];},getModuleCount:function(){return this.moduleCount;},make:function(){this.makeImpl(false,this.getBestMaskPattern());},makeImpl:function(test,maskPattern){this.moduleCount=this.typeNumber*4+17;this.modules=new Array(this.moduleCount);for(var row=0;row<this.moduleCount;row++){this.modules[row]=new Array(this.moduleCount);for(var col=0;col<this.moduleCount;col++){this.modules[row][col]=null;}}
this.setupPositionProbePattern(0,0);this.setupPositionProbePattern(this.moduleCount-7,0);this.setupPositionProbePattern(0,this.moduleCount-7);this.setupPositionAdjustPattern();this.setupTimingPattern();this.setupTypeInfo(test,maskPattern);if(this.typeNumber>=7){this.setupTypeNumber(test);}
if(this.dataCache==null){this.dataCache=QRCodeModel.createData(this.typeNumber,this.errorCorrectLevel,this.dataList);}
this.mapData(this.dataCache,maskPattern);},setupPositionProbePattern:function(row,col){for(var r=-1;r<=7;r++){if(row+r<=-1||this.moduleCount<=row+r)continue;for(var c=-1;c<=7;c++){if(col+c<=-1||this.moduleCount<=col+c)continue;if((0<=r&&r<=6&&(c==0||c==6))||(0<=c&&c<=6&&(r==0||r==6))||(2<=r&&r<=4&&2<=c&&c<=4)){this.modules[row+r][col+c]=true;}else{this.modules[row+r][col+c]=false;}}}},getBestMaskPattern:function(){var minLostPoint=0;var pattern=0;for(var i=0;i<8;i++){this.makeImpl(true,i);var lostPoint=QRUtil.getLostPoint(this);if(i==0||minLostPoint>lostPoint){minLostPoint=lostPoint;pattern=i;}}
return pattern;},createMovieClip:function(target_mc,instance_name,depth){var qr_mc=target_mc.createEmptyMovieClip(instance_name,depth);var cs=1;this.make();for(var row=0;row<this.modules.length;row++){var y=row*cs;for(var col=0;col<this.modules[row].length;col++){var x=col*cs;var dark=this.modules[row][col];if(dark){qr_mc.beginFill(0,100);qr_mc.moveTo(x,y);qr_mc.lineTo(x+cs,y);qr_mc.lineTo(x+cs,y+cs);qr_mc.lineTo(x,y+cs);qr_mc.endFill();}}}
return qr_mc;},setupTimingPattern:function(){for(var r=8;r<this.moduleCount-8;r++){if(this.modules[r][6]!=null){continue;}
this.modules[r][6]=(r%2==0);}
for(var c=8;c<this.moduleCount-8;c++){if(this.modules[6][c]!=null){continue;}
this.modules[6][c]=(c%2==0);}},setupPositionAdjustPattern:function(){var pos=QRUtil.getPatternPosition(this.typeNumber);for(var i=0;i<pos.length;i++){for(var j=0;j<pos.length;j++){var row=pos[i];var col=pos[j];if(this.modules[row][col]!=null){continue;}
for(var r=-2;r<=2;r++){for(var c=-2;c<=2;c++){if(r==-2||r==2||c==-2||c==2||(r==0&&c==0)){this.modules[row+r][col+c]=true;}else{this.modules[row+r][col+c]=false;}}}}}},setupTypeNumber:function(test){var bits=QRUtil.getBCHTypeNumber(this.typeNumber);for(var i=0;i<18;i++){var mod=(!test&&((bits>>i)&1)==1);this.modules[Math.floor(i/3)][i%3+this.moduleCount-8-3]=mod;}
for(var i=0;i<18;i++){var mod=(!test&&((bits>>i)&1)==1);this.modules[i%3+this.moduleCount-8-3][Math.floor(i/3)]=mod;}},setupTypeInfo:function(test,maskPattern){var data=(this.errorCorrectLevel<<3)|maskPattern;var bits=QRUtil.getBCHTypeInfo(data);for(var i=0;i<15;i++){var mod=(!test&&((bits>>i)&1)==1);if(i<6){this.modules[i][8]=mod;}else if(i<8){this.modules[i+1][8]=mod;}else{this.modules[this.moduleCount-15+i][8]=mod;}}
for(var i=0;i<15;i++){var mod=(!test&&((bits>>i)&1)==1);if(i<8){this.modules[8][this.moduleCount-i-1]=mod;}else if(i<9){this.modules[8][15-i-1+1]=mod;}else{this.modules[8][15-i-1]=mod;}}
this.modules[this.moduleCount-8][8]=(!test);},mapData:function(data,maskPattern){var inc=-1;var row=this.moduleCount-1;var bitIndex=7;var byteIndex=0;for(var col=this.moduleCount-1;col>0;col-=2){if(col==6)col--;while(true){for(var c=0;c<2;c++){if(this.modules[row][col-c]==null){var dark=false;if(byteIndex<data.length){dark=(((data[byteIndex]>>>bitIndex)&1)==1);}
var mask=QRUtil.getMask(maskPattern,row,col-c);if(mask){dark=!dark;}
this.modules[row][col-c]=dark;bitIndex--;if(bitIndex==-1){byteIndex++;bitIndex=7;}}}
row+=inc;if(row<0||this.moduleCount<=row){row-=inc;inc=-inc;break;}}}}};QRCodeModel.PAD0=0xEC;QRCodeModel.PAD1=0x11;QRCodeModel.createData=function(typeNumber,errorCorrectLevel,dataList){var rsBlocks=QRRSBlock.getRSBlocks(typeNumber,errorCorrectLevel);var buffer=new QRBitBuffer();for(var i=0;i<dataList.length;i++){var data=dataList[i];buffer.put(data.mode,4);buffer.put(data.getLength(),QRUtil.getLengthInBits(data.mode,typeNumber));data.write(buffer);}
var totalDataCount=0;for(var i=0;i<rsBlocks.length;i++){totalDataCount+=rsBlocks[i].dataCount;}
if(buffer.getLengthInBits()>totalDataCount*8){throw new Error("code length overflow. ("
+buffer.getLengthInBits()
+">"
+totalDataCount*8
+")");}
if(buffer.getLengthInBits()+4<=totalDataCount*8){buffer.put(0,4);}
while(buffer.getLengthInBits()%8!=0){buffer.putBit(false);}
while(true){if(buffer.getLengthInBits()>=totalDataCount*8){break;}
buffer.put(QRCodeModel.PAD0,8);if(buffer.getLengthInBits()>=totalDataCount*8){break;}
buffer.put(QRCodeModel.PAD1,8);}
return QRCodeModel.createBytes(buffer,rsBlocks);};QRCodeModel.createBytes=function(buffer,rsBlocks){var offset=0;var maxDcCount=0;var maxEcCount=0;var dcdata=new Array(rsBlocks.length);var ecdata=new Array(rsBlocks.length);for(var r=0;r<rsBlocks.length;r++){var dcCount=rsBlocks[r].dataCount;var ecCount=rsBlocks[r].totalCount-dcCount;maxDcCount=Math.max(maxDcCount,dcCount);maxEcCount=Math.max(maxEcCount,ecCount);dcdata[r]=new Array(dcCount);for(var i=0;i<dcdata[r].length;i++){dcdata[r][i]=0xff&buffer.buffer[i+offset];}
offset+=dcCount;var rsPoly=QRUtil.getErrorCorrectPolynomial(ecCount);var rawPoly=new QRPolynomial(dcdata[r],rsPoly.getLength()-1);var modPoly=rawPoly.mod(rsPoly);ecdata[r]=new Array(rsPoly.getLength()-1);for(var i=0;i<ecdata[r].length;i++){var modIndex=i+modPoly.getLength()-ecdata[r].length;ecdata[r][i]=(modIndex>=0)?modPoly.get(modIndex):0;}}
var totalCodeCount=0;for(var i=0;i<rsBlocks.length;i++){totalCodeCount+=rsBlocks[i].totalCount;}
var data=new Array(totalCodeCount);var index=0;for(var i=0;i<maxDcCount;i++){for(var r=0;r<rsBlocks.length;r++){if(i<dcdata[r].length){data[index++]=dcdata[r][i];}}}
for(var i=0;i<maxEcCount;i++){for(var r=0;r<rsBlocks.length;r++){if(i<ecdata[r].length){data[index++]=ecdata[r][i];}}}
return data;};var QRMode={MODE_NUMBER:1<<0,MODE_ALPHA_NUM:1<<1,MODE_8BIT_BYTE:1<<2,MODE_KANJI:1<<3};var QRErrorCorrectLevel={L:1,M:0,Q:3,H:2};var QRMaskPattern={PATTERN000:0,PATTERN001:1,PATTERN010:2,PATTERN011:3,PATTERN100:4,PATTERN101:5,PATTERN110:6,PATTERN111:7};var QRUtil={PATTERN_POSITION_TABLE:[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],G15:(1<<10)|(1<<8)|(1<<5)|(1<<4)|(1<<2)|(1<<1)|(1<<0),G18:(1<<12)|(1<<11)|(1<<10)|(1<<9)|(1<<8)|(1<<5)|(1<<2)|(1<<0),G15_MASK:(1<<14)|(1<<12)|(1<<10)|(1<<4)|(1<<1),getBCHTypeInfo:function(data){var d=data<<10;while(QRUtil.getBCHDigit(d)-QRUtil.getBCHDigit(QRUtil.G15)>=0){d^=(QRUtil.G15<<(QRUtil.getBCHDigit(d)-QRUtil.getBCHDigit(QRUtil.G15)));}
return((data<<10)|d)^QRUtil.G15_MASK;},getBCHTypeNumber:function(data){var d=data<<12;while(QRUtil.getBCHDigit(d)-QRUtil.getBCHDigit(QRUtil.G18)>=0){d^=(QRUtil.G18<<(QRUtil.getBCHDigit(d)-QRUtil.getBCHDigit(QRUtil.G18)));}
return(data<<12)|d;},getBCHDigit:function(data){var digit=0;while(data!=0){digit++;data>>>=1;}
return digit;},getPatternPosition:function(typeNumber){return QRUtil.PATTERN_POSITION_TABLE[typeNumber-1];},getMask:function(maskPattern,i,j){switch(maskPattern){case QRMaskPattern.PATTERN000:return(i+j)%2==0;case QRMaskPattern.PATTERN001:return i%2==0;case QRMaskPattern.PATTERN010:return j%3==0;case QRMaskPattern.PATTERN011:return(i+j)%3==0;case QRMaskPattern.PATTERN100:return(Math.floor(i/2)+Math.floor(j/3))%2==0;case QRMaskPattern.PATTERN101:return(i*j)%2+(i*j)%3==0;case QRMaskPattern.PATTERN110:return((i*j)%2+(i*j)%3)%2==0;case QRMaskPattern.PATTERN111:return((i*j)%3+(i+j)%2)%2==0;default:throw new Error("bad maskPattern:"+maskPattern);}},getErrorCorrectPolynomial:function(errorCorrectLength){var a=new QRPolynomial([1],0);for(var i=0;i<errorCorrectLength;i++){a=a.multiply(new QRPolynomial([1,QRMath.gexp(i)],0));}
return a;},getLengthInBits:function(mode,type){if(1<=type&&type<10){switch(mode){case QRMode.MODE_NUMBER:return 10;case QRMode.MODE_ALPHA_NUM:return 9;case QRMode.MODE_8BIT_BYTE:return 8;case QRMode.MODE_KANJI:return 8;default:throw new Error("mode:"+mode);}}else if(type<27){switch(mode){case QRMode.MODE_NUMBER:return 12;case QRMode.MODE_ALPHA_NUM:return 11;case QRMode.MODE_8BIT_BYTE:return 16;case QRMode.MODE_KANJI:return 10;default:throw new Error("mode:"+mode);}}else if(type<41){switch(mode){case QRMode.MODE_NUMBER:return 14;case QRMode.MODE_ALPHA_NUM:return 13;case QRMode.MODE_8BIT_BYTE:return 16;case QRMode.MODE_KANJI:return 12;default:throw new Error("mode:"+mode);}}else{throw new Error("type:"+type);}},getLostPoint:function(qrCode){var moduleCount=qrCode.getModuleCount();var lostPoint=0;for(var row=0;row<moduleCount;row++){for(var col=0;col<moduleCount;col++){var sameCount=0;var dark=qrCode.isDark(row,col);for(var r=-1;r<=1;r++){if(row+r<0||moduleCount<=row+r){continue;}
for(var c=-1;c<=1;c++){if(col+c<0||moduleCount<=col+c){continue;}
if(r==0&&c==0){continue;}
if(dark==qrCode.isDark(row+r,col+c)){sameCount++;}}}
if(sameCount>5){lostPoint+=(3+sameCount-5);}}}
for(var row=0;row<moduleCount-1;row++){for(var col=0;col<moduleCount-1;col++){var count=0;if(qrCode.isDark(row,col))count++;if(qrCode.isDark(row+1,col))count++;if(qrCode.isDark(row,col+1))count++;if(qrCode.isDark(row+1,col+1))count++;if(count==0||count==4){lostPoint+=3;}}}
for(var row=0;row<moduleCount;row++){for(var col=0;col<moduleCount-6;col++){if(qrCode.isDark(row,col)&&!qrCode.isDark(row,col+1)&&qrCode.isDark(row,col+2)&&qrCode.isDark(row,col+3)&&qrCode.isDark(row,col+4)&&!qrCode.isDark(row,col+5)&&qrCode.isDark(row,col+6)){lostPoint+=40;}}}
for(var col=0;col<moduleCount;col++){for(var row=0;row<moduleCount-6;row++){if(qrCode.isDark(row,col)&&!qrCode.isDark(row+1,col)&&qrCode.isDark(row+2,col)&&qrCode.isDark(row+3,col)&&qrCode.isDark(row+4,col)&&!qrCode.isDark(row+5,col)&&qrCode.isDark(row+6,col)){lostPoint+=40;}}}
var darkCount=0;for(var col=0;col<moduleCount;col++){for(var row=0;row<moduleCount;row++){if(qrCode.isDark(row,col)){darkCount++;}}}
var ratio=Math.abs(100*darkCount/moduleCount/moduleCount-50)/5;lostPoint+=ratio*10;return lostPoint;}};var QRMath={glog:function(n){if(n<1){throw new Error("glog("+n+")");}
return QRMath.LOG_TABLE[n];},gexp:function(n){while(n<0){n+=255;}
while(n>=256){n-=255;}
return QRMath.EXP_TABLE[n];},EXP_TABLE:new Array(256),LOG_TABLE:new Array(256)};for(var i=0;i<8;i++){QRMath.EXP_TABLE[i]=1<<i;}
for(var i=8;i<256;i++){QRMath.EXP_TABLE[i]=QRMath.EXP_TABLE[i-4]^QRMath.EXP_TABLE[i-5]^QRMath.EXP_TABLE[i-6]^QRMath.EXP_TABLE[i-8];}
for(var i=0;i<255;i++){QRMath.LOG_TABLE[QRMath.EXP_TABLE[i]]=i;}
function QRPolynomial(num,shift){if(num.length==undefined){throw new Error(num.length+"/"+shift);}
var offset=0;while(offset<num.length&&num[offset]==0){offset++;}
this.num=new Array(num.length-offset+shift);for(var i=0;i<num.length-offset;i++){this.num[i]=num[i+offset];}}
QRPolynomial.prototype={get:function(index){return this.num[index];},getLength:function(){return this.num.length;},multiply:function(e){var num=new Array(this.getLength()+e.getLength()-1);for(var i=0;i<this.getLength();i++){for(var j=0;j<e.getLength();j++){num[i+j]^=QRMath.gexp(QRMath.glog(this.get(i))+QRMath.glog(e.get(j)));}}
return new QRPolynomial(num,0);},mod:function(e){if(this.getLength()-e.getLength()<0){return this;}
var ratio=QRMath.glog(this.get(0))-QRMath.glog(e.get(0));var num=new Array(this.getLength());for(var i=0;i<this.getLength();i++){num[i]=this.get(i);}
for(var i=0;i<e.getLength();i++){num[i]^=QRMath.gexp(QRMath.glog(e.get(i))+ratio);}
return new QRPolynomial(num,0).mod(e);}};function QRRSBlock(totalCount,dataCount){this.totalCount=totalCount;this.dataCount=dataCount;}
QRRSBlock.RS_BLOCK_TABLE=[[1,26,19],[1,26,16],[1,26,13],[1,26,9],[1,44,34],[1,44,28],[1,44,22],[1,44,16],[1,70,55],[1,70,44],[2,35,17],[2,35,13],[1,100,80],[2,50,32],[2,50,24],[4,25,9],[1,134,108],[2,67,43],[2,33,15,2,34,16],[2,33,11,2,34,12],[2,86,68],[4,43,27],[4,43,19],[4,43,15],[2,98,78],[4,49,31],[2,32,14,4,33,15],[4,39,13,1,40,14],[2,121,97],[2,60,38,2,61,39],[4,40,18,2,41,19],[4,40,14,2,41,15],[2,146,116],[3,58,36,2,59,37],[4,36,16,4,37,17],[4,36,12,4,37,13],[2,86,68,2,87,69],[4,69,43,1,70,44],[6,43,19,2,44,20],[6,43,15,2,44,16],[4,101,81],[1,80,50,4,81,51],[4,50,22,4,51,23],[3,36,12,8,37,13],[2,116,92,2,117,93],[6,58,36,2,59,37],[4,46,20,6,47,21],[7,42,14,4,43,15],[4,133,107],[8,59,37,1,60,38],[8,44,20,4,45,21],[12,33,11,4,34,12],[3,145,115,1,146,116],[4,64,40,5,65,41],[11,36,16,5,37,17],[11,36,12,5,37,13],[5,109,87,1,110,88],[5,65,41,5,66,42],[5,54,24,7,55,25],[11,36,12],[5,122,98,1,123,99],[7,73,45,3,74,46],[15,43,19,2,44,20],[3,45,15,13,46,16],[1,135,107,5,136,108],[10,74,46,1,75,47],[1,50,22,15,51,23],[2,42,14,17,43,15],[5,150,120,1,151,121],[9,69,43,4,70,44],[17,50,22,1,51,23],[2,42,14,19,43,15],[3,141,113,4,142,114],[3,70,44,11,71,45],[17,47,21,4,48,22],[9,39,13,16,40,14],[3,135,107,5,136,108],[3,67,41,13,68,42],[15,54,24,5,55,25],[15,43,15,10,44,16],[4,144,116,4,145,117],[17,68,42],[17,50,22,6,51,23],[19,46,16,6,47,17],[2,139,111,7,140,112],[17,74,46],[7,54,24,16,55,25],[34,37,13],[4,151,121,5,152,122],[4,75,47,14,76,48],[11,54,24,14,55,25],[16,45,15,14,46,16],[6,147,117,4,148,118],[6,73,45,14,74,46],[11,54,24,16,55,25],[30,46,16,2,47,17],[8,132,106,4,133,107],[8,75,47,13,76,48],[7,54,24,22,55,25],[22,45,15,13,46,16],[10,142,114,2,143,115],[19,74,46,4,75,47],[28,50,22,6,51,23],[33,46,16,4,47,17],[8,152,122,4,153,123],[22,73,45,3,74,46],[8,53,23,26,54,24],[12,45,15,28,46,16],[3,147,117,10,148,118],[3,73,45,23,74,46],[4,54,24,31,55,25],[11,45,15,31,46,16],[7,146,116,7,147,117],[21,73,45,7,74,46],[1,53,23,37,54,24],[19,45,15,26,46,16],[5,145,115,10,146,116],[19,75,47,10,76,48],[15,54,24,25,55,25],[23,45,15,25,46,16],[13,145,115,3,146,116],[2,74,46,29,75,47],[42,54,24,1,55,25],[23,45,15,28,46,16],[17,145,115],[10,74,46,23,75,47],[10,54,24,35,55,25],[19,45,15,35,46,16],[17,145,115,1,146,116],[14,74,46,21,75,47],[29,54,24,19,55,25],[11,45,15,46,46,16],[13,145,115,6,146,116],[14,74,46,23,75,47],[44,54,24,7,55,25],[59,46,16,1,47,17],[12,151,121,7,152,122],[12,75,47,26,76,48],[39,54,24,14,55,25],[22,45,15,41,46,16],[6,151,121,14,152,122],[6,75,47,34,76,48],[46,54,24,10,55,25],[2,45,15,64,46,16],[17,152,122,4,153,123],[29,74,46,14,75,47],[49,54,24,10,55,25],[24,45,15,46,46,16],[4,152,122,18,153,123],[13,74,46,32,75,47],[48,54,24,14,55,25],[42,45,15,32,46,16],[20,147,117,4,148,118],[40,75,47,7,76,48],[43,54,24,22,55,25],[10,45,15,67,46,16],[19,148,118,6,149,119],[18,75,47,31,76,48],[34,54,24,34,55,25],[20,45,15,61,46,16]];QRRSBlock.getRSBlocks=function(typeNumber,errorCorrectLevel){var rsBlock=QRRSBlock.getRsBlockTable(typeNumber,errorCorrectLevel);if(rsBlock==undefined){throw new Error("bad rs block @ typeNumber:"+typeNumber+"/errorCorrectLevel:"+errorCorrectLevel);}
var length=rsBlock.length/3;var list=[];for(var i=0;i<length;i++){var count=rsBlock[i*3+0];var totalCount=rsBlock[i*3+1];var dataCount=rsBlock[i*3+2];for(var j=0;j<count;j++){list.push(new QRRSBlock(totalCount,dataCount));}}
return list;};QRRSBlock.getRsBlockTable=function(typeNumber,errorCorrectLevel){switch(errorCorrectLevel){case QRErrorCorrectLevel.L:return QRRSBlock.RS_BLOCK_TABLE[(typeNumber-1)*4+0];case QRErrorCorrectLevel.M:return QRRSBlock.RS_BLOCK_TABLE[(typeNumber-1)*4+1];case QRErrorCorrectLevel.Q:return QRRSBlock.RS_BLOCK_TABLE[(typeNumber-1)*4+2];case QRErrorCorrectLevel.H:return QRRSBlock.RS_BLOCK_TABLE[(typeNumber-1)*4+3];default:return undefined;}};function QRBitBuffer(){this.buffer=[];this.length=0;}
QRBitBuffer.prototype={get:function(index){var bufIndex=Math.floor(index/8);return((this.buffer[bufIndex]>>>(7-index%8))&1)==1;},put:function(num,length){for(var i=0;i<length;i++){this.putBit(((num>>>(length-i-1))&1)==1);}},getLengthInBits:function(){return this.length;},putBit:function(bit){var bufIndex=Math.floor(this.length/8);if(this.buffer.length<=bufIndex){this.buffer.push(0);}
if(bit){this.buffer[bufIndex]|=(0x80>>>(this.length%8));}
this.length++;}};var QRCodeLimitLength=[[17,14,11,7],[32,26,20,14],[53,42,32,24],[78,62,46,34],[106,84,60,44],[134,106,74,58],[154,122,86,64],[192,152,108,84],[230,180,130,98],[271,213,151,119],[321,251,177,137],[367,287,203,155],[425,331,241,177],[458,362,258,194],[520,412,292,220],[586,450,322,250],[644,504,364,280],[718,560,394,310],[792,624,442,338],[858,666,482,382],[929,711,509,403],[1003,779,565,439],[1091,857,611,461],[1171,911,661,511],[1273,997,715,535],[1367,1059,751,593],[1465,1125,805,625],[1528,1190,868,658],[1628,1264,908,698],[1732,1370,982,742],[1840,1452,1030,790],[1952,1538,1112,842],[2068,1628,1168,898],[2188,1722,1228,958],[2303,1809,1283,983],[2431,1911,1351,1051],[2563,1989,1423,1093],[2699,2099,1499,1139],[2809,2213,1579,1219],[2953,2331,1663,1273]];
function _isSupportCanvas() {
return typeof CanvasRenderingContext2D != "undefined";
}
// android 2.x doesn't support Data-URI spec
function _getAndroid() {
var android = false;
var sAgent = navigator.userAgent;
if (/android/i.test(sAgent)) { // android
android = true;
var aMat = sAgent.toString().match(/android ([0-9]\.[0-9])/i);
if (aMat && aMat[1]) {
android = parseFloat(aMat[1]);
}
}
return android;
}
var svgDrawer = (function() {
var Drawing = function (el, htOption) {
this._el = el;
this._htOption = htOption;
};
Drawing.prototype.draw = function (oQRCode) {
var _htOption = this._htOption;
var _el = this._el;
var nCount = oQRCode.getModuleCount();
var nWidth = Math.floor(_htOption.width / nCount);
var nHeight = Math.floor(_htOption.height / nCount);
this.clear();
function makeSVG(tag, attrs) {
var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
if (attrs.hasOwnProperty(k)) el.setAttribute(k, attrs[k]);
return el;
}
var svg = makeSVG("svg" , {'viewBox': '0 0 ' + String(nCount) + " " + String(nCount), 'width': '100%', 'height': '100%', 'fill': _htOption.colorLight});
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
_el.appendChild(svg);
svg.appendChild(makeSVG("rect", {"fill": _htOption.colorLight, "width": "100%", "height": "100%"}));
svg.appendChild(makeSVG("rect", {"fill": _htOption.colorDark, "width": "1", "height": "1", "id": "template"}));
for (var row = 0; row < nCount; row++) {
for (var col = 0; col < nCount; col++) {
if (oQRCode.isDark(row, col)) {
var child = makeSVG("use", {"x": String(col), "y": String(row)});
child.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#template")
svg.appendChild(child);
}
}
}
};
Drawing.prototype.clear = function () {
while (this._el.hasChildNodes())
this._el.removeChild(this._el.lastChild);
};
return Drawing;
})();
var useSVG = document.documentElement.tagName.toLowerCase() === "svg";
// Drawing in DOM by using Table tag
var Drawing = useSVG ? svgDrawer : !_isSupportCanvas() ? (function () {
var Drawing = function (el, htOption) {
this._el = el;
this._htOption = htOption;
};
/**
* Draw the QRCode
*
* @param {QRCode} oQRCode
*/
Drawing.prototype.draw = function (oQRCode) {
var _htOption = this._htOption;
var _el = this._el;
var nCount = oQRCode.getModuleCount();
var nWidth = Math.floor(_htOption.width / nCount);
var nHeight = Math.floor(_htOption.height / nCount);
var aHTML = ['<table style="border:0;border-collapse:collapse;">'];
for (var row = 0; row < nCount; row++) {
aHTML.push('<tr>');
for (var col = 0; col < nCount; col++) {
aHTML.push('<td style="border:0;border-collapse:collapse;padding:0;margin:0;width:' + nWidth + 'px;height:' + nHeight + 'px;background-color:' + (oQRCode.isDark(row, col) ? _htOption.colorDark : _htOption.colorLight) + ';"></td>');
}
aHTML.push('</tr>');
}
aHTML.push('</table>');
_el.innerHTML = aHTML.join('');
// Fix the margin values as real size.
var elTable = _el.childNodes[0];
var nLeftMarginTable = (_htOption.width - elTable.offsetWidth) / 2;
var nTopMarginTable = (_htOption.height - elTable.offsetHeight) / 2;
if (nLeftMarginTable > 0 && nTopMarginTable > 0) {
elTable.style.margin = nTopMarginTable + "px " + nLeftMarginTable + "px";
}
};
/**
* Clear the QRCode
*/
Drawing.prototype.clear = function () {
this._el.innerHTML = '';
};
return Drawing;
})() : (function () { // Drawing in Canvas
function _onMakeImage() {
this._elImage.src = this._elCanvas.toDataURL("image/png");
this._elImage.style.display = "block";
this._elCanvas.style.display = "none";
}
// Android 2.1 bug workaround
// http://code.google.com/p/android/issues/detail?id=5141
if (this._android && this._android <= 2.1) {
var factor = 1 / window.devicePixelRatio;
var drawImage = CanvasRenderingContext2D.prototype.drawImage;
CanvasRenderingContext2D.prototype.drawImage = function (image, sx, sy, sw, sh, dx, dy, dw, dh) {
if (("nodeName" in image) && /img/i.test(image.nodeName)) {
for (var i = arguments.length - 1; i >= 1; i--) {
arguments[i] = arguments[i] * factor;
}
} else if (typeof dw == "undefined") {
arguments[1] *= factor;
arguments[2] *= factor;
arguments[3] *= factor;
arguments[4] *= factor;
}
drawImage.apply(this, arguments);
};
}
/**
* Check whether the user's browser supports Data URI or not
*
* @private
* @param {Function} fSuccess Occurs if it supports Data URI
* @param {Function} fFail Occurs if it doesn't support Data URI
*/
function _safeSetDataURI(fSuccess, fFail) {
var self = this;
self._fFail = fFail;
self._fSuccess = fSuccess;
// Check it just once
if (self._bSupportDataURI === null) {
var el = document.createElement("img");
var fOnError = function() {
self._bSupportDataURI = false;
if (self._fFail) {
self._fFail.call(self);
}
};
var fOnSuccess = function() {
self._bSupportDataURI = true;
if (self._fSuccess) {
self._fSuccess.call(self);
}
};
el.onabort = fOnError;
el.onerror = fOnError;
el.onload = fOnSuccess;
el.src = "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="; // the Image contains 1px data.
return;
} else if (self._bSupportDataURI === true && self._fSuccess) {
self._fSuccess.call(self);
} else if (self._bSupportDataURI === false && self._fFail) {
self._fFail.call(self);
}
};
/**
* Drawing QRCode by using canvas
*
* @constructor
* @param {HTMLElement} el
* @param {Object} htOption QRCode Options
*/
var Drawing = function (el, htOption) {
this._bIsPainted = false;
this._android = _getAndroid();
this._htOption = htOption;
this._elCanvas = document.createElement("canvas");
this._elCanvas.width = htOption.width;
this._elCanvas.height = htOption.height;
el.appendChild(this._elCanvas);
this._el = el;
this._oContext = this._elCanvas.getContext("2d");
this._bIsPainted = false;
this._elImage = document.createElement("img");
this._elImage.alt = "Scan me!";
this._elImage.style.display = "none";
this._el.appendChild(this._elImage);
this._bSupportDataURI = null;
};
/**
* Draw the QRCode
*
* @param {QRCode} oQRCode
*/
Drawing.prototype.draw = function (oQRCode) {
var _elImage = this._elImage;
var _oContext = this._oContext;
var _htOption = this._htOption;
var nCount = oQRCode.getModuleCount();
var nWidth = _htOption.width / nCount;
var nHeight = _htOption.height / nCount;
var nRoundedWidth = Math.round(nWidth);
var nRoundedHeight = Math.round(nHeight);
_elImage.style.display = "none";
this.clear();
for (var row = 0; row < nCount; row++) {
for (var col = 0; col < nCount; col++) {
var bIsDark = oQRCode.isDark(row, col);
var nLeft = col * nWidth;
var nTop = row * nHeight;
_oContext.strokeStyle = bIsDark ? _htOption.colorDark : _htOption.colorLight;
_oContext.lineWidth = 1;
_oContext.fillStyle = bIsDark ? _htOption.colorDark : _htOption.colorLight;
_oContext.fillRect(nLeft, nTop, nWidth, nHeight);
// 안티 앨리어싱 방지 처리
_oContext.strokeRect(
Math.floor(nLeft) + 0.5,
Math.floor(nTop) + 0.5,
nRoundedWidth,
nRoundedHeight
);
_oContext.strokeRect(
Math.ceil(nLeft) - 0.5,
Math.ceil(nTop) - 0.5,
nRoundedWidth,
nRoundedHeight
);
}
}
this._bIsPainted = true;
};
/**
* Make the image from Canvas if the browser supports Data URI.
*/
Drawing.prototype.makeImage = function () {
if (this._bIsPainted) {
_safeSetDataURI.call(this, _onMakeImage);
}
};
/**
* Return whether the QRCode is painted or not
*
* @return {Boolean}
*/
Drawing.prototype.isPainted = function () {
return this._bIsPainted;
};
/**
* Clear the QRCode
*/
Drawing.prototype.clear = function () {
this._oContext.clearRect(0, 0, this._elCanvas.width, this._elCanvas.height);
this._bIsPainted = false;
};
/**
* @private
* @param {Number} nNumber
*/
Drawing.prototype.round = function (nNumber) {
if (!nNumber) {
return nNumber;
}
return Math.floor(nNumber * 1000) / 1000;
};
return Drawing;
})();
/**
* Get the type by string length
*
* @private
* @param {String} sText
* @param {Number} nCorrectLevel
* @return {Number} type
*/
function _getTypeNumber(sText, nCorrectLevel) {
var nType = 1;
var length = _getUTF8Length(sText);
for (var i = 0, len = QRCodeLimitLength.length; i <= len; i++) {
var nLimit = 0;
switch (nCorrectLevel) {
case QRErrorCorrectLevel.L :
nLimit = QRCodeLimitLength[i][0];
break;
case QRErrorCorrectLevel.M :
nLimit = QRCodeLimitLength[i][1];
break;
case QRErrorCorrectLevel.Q :
nLimit = QRCodeLimitLength[i][2];
break;
case QRErrorCorrectLevel.H :
nLimit = QRCodeLimitLength[i][3];
break;
}
if (length <= nLimit) {
break;
} else {
nType++;
}
}
if (nType > QRCodeLimitLength.length) {
throw new Error("Too long data");
}
return nType;
}
function _getUTF8Length(sText) {
var replacedText = encodeURI(sText).toString().replace(/\%[0-9a-fA-F]{2}/g, 'a');
return replacedText.length + (replacedText.length != sText ? 3 : 0);
}
/**
* @class QRCode
* @constructor
* @example
* new QRCode(document.getElementById("test"), "http://jindo.dev.naver.com/collie");
*
* @example
* var oQRCode = new QRCode("test", {
* text : "http://naver.com",
* width : 128,
* height : 128
* });
*
* oQRCode.clear(); // Clear the QRCode.
* oQRCode.makeCode("http://map.naver.com"); // Re-create the QRCode.
*
* @param {HTMLElement|String} el target element or 'id' attribute of element.
* @param {Object|String} vOption
* @param {String} vOption.text QRCode link data
* @param {Number} [vOption.width=256]
* @param {Number} [vOption.height=256]
* @param {String} [vOption.colorDark="#000000"]
* @param {String} [vOption.colorLight="#ffffff"]
* @param {QRCode.CorrectLevel} [vOption.correctLevel=QRCode.CorrectLevel.H] [L|M|Q|H]
*/
QRCode = function (el, vOption) {
this._htOption = {
width : 256,
height : 256,
typeNumber : 4,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRErrorCorrectLevel.H
};
if (typeof vOption === 'string') {
vOption = {
text : vOption
};
}
// Overwrites options
if (vOption) {
for (var i in vOption) {
this._htOption[i] = vOption[i];
}
}
if (typeof el == "string") {
el = document.getElementById(el);
}
if (this._htOption.useSVG) {
Drawing = svgDrawer;
}
this._android = _getAndroid();
this._el = el;
this._oQRCode = null;
this._oDrawing = new Drawing(this._el, this._htOption);
if (this._htOption.text) {
this.makeCode(this._htOption.text);
}
};
/**
* Make the QRCode
*
* @param {String} sText link data
*/
QRCode.prototype.makeCode = function (sText) {
this._oQRCode = new QRCodeModel(_getTypeNumber(sText, this._htOption.correctLevel), this._htOption.correctLevel);
this._oQRCode.addData(sText);
this._oQRCode.make();
this._el.title = sText;
this._oDrawing.draw(this._oQRCode);
this.makeImage();
};
/**
* Make the Image from Canvas element
* - It occurs automatically
* - Android below 3 doesn't support Data-URI spec.
*
* @private
*/
QRCode.prototype.makeImage = function () {
if (typeof this._oDrawing.makeImage == "function" && (!this._android || this._android >= 3)) {
this._oDrawing.makeImage();
}
};
/**
* Clear the QRCode
*/
QRCode.prototype.clear = function () {
this._oDrawing.clear();
};
/**
* @name QRCode.CorrectLevel
*/
QRCode.CorrectLevel = QRErrorCorrectLevel;
})();

1
Html-Javascript/davidshimjs-qrcodejs-04f46c6/qrcode.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

55
Html-Javascript/js/DOMClass.js Normal file
View File

@ -0,0 +1,55 @@
// 1. 正常的js 创建dom?
// let boxContent = document.createElement("div");
// 2. 正常的js 放入dom?
// 父.appendChild(子);
// 用 对象 去表达dom
// let o = {
// el: "div",
// id: "app",
// innerText: "",
// style: {},
// elChildren: []
// }
class DOMClass {
constructor(DOMObj, root) {
if (DOMObj) {
this.d = this.createDOM(DOMObj, root);
}
}
// 创建dom
createDOM = (DOMObj, root) => {
// 创建的 dom
let cDOM = document.createElement(DOMObj.el);
// 赋予属性
for (const key in DOMObj) {
cDOM[key] = DOMObj[key];
}
// 赋予样式
for (const key in DOMObj.style) {
cDOM.style[key] = DOMObj.style[key];
}
// 递归
// 如果该盒子存在子盒子(多个或一个) 即创建子盒子 并丢进去
DOMObj.elChildren && DOMObj.elChildren.forEach(element => {
// 将 孩子 挨个传入 生成dom 并丢到 父盒子中
this.createDOM(element, cDOM);
});
// 如果给容器 就帮你放入
if (root) {
root.appendChild(cDOM);
}
return cDOM;
}
}

1
Html-Javascript/js/hello.js Normal file
View File

@ -0,0 +1 @@
console.log("hello js come");

101
Html-Javascript/server/server.py Normal file
View File

@ -0,0 +1,101 @@
import json
import re
import socket
import threading
print("server ok http://127.0.0.1:7890")
lubData = [
{
"img": "https://ossweb-img.qq.com/upload/adw/image/20210823/bd362a55cd16f5f9acde08cbaba83188.jpeg",
"title": "9月12日战斗之夜"
},
{
"img": "https://ossweb-img.qq.com/upload/adw/image/20210819/0401ac6137793d1e8ca61c92150c9b7f.jpeg",
"title": "2021魔女秘宝"
},
{
"img": "https://ossweb-img.qq.com/upload/adw/image/20210813/a57d5aec4562b5076717a1afdcb2d064.jpeg",
"title": "魔女通行证"
},
{
"img": "https://ossweb-img.qq.com/upload/adw/image/20210824/c4c5dd86352f0768d622a1b8d4256a0d.jpeg",
"title": "宇宙竞技场"
},
{
"img": "https://ossweb-img.qq.com/upload/adw/image/20210813/c80badfdac1f32a4dd18adaf58519429.jpeg",
"title": "魔女摇曳 魅惑众生"
},
]
def service_client(new_socket):
"""为这个客户端返回数据"""
# 接收浏览器发送过来的请求，即HTTP请求
request = new_socket.recv(1024)
request = request.decode("utf-8") # 解码
request_lines = request.splitlines() # 按照行('\r', '\r\n', \n')分隔，返回一个包含各行作为元素的列表
print(request_lines)
# print(len(request_lines))
# 避免报错
if len(request_lines) == 0:
new_socket.close();
return;
# 获取请求地址
ret = re.match(r"[^/]+(/[^ ]*)", request_lines[0])
#路由
router = ret.group(1);
print(router)
response = "HTTP/1.1 200 NOT FOUND\r\n"
# 配置跨域
response += "Access-Control-Allow-Origin: * \r\n"
# ['Access-Control-Allow-Origin'] = '*'
# ['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
# ['Access-Control-Max-Age'] = '1000'
# ['Access-Control-Allow-Headers'] = '*'
response += '\r\n'
if router == "/":
response += json.dumps({'code': 201, 'data': "你好!我是配彭于晏"})
elif router == "/xxx":
response += json.dumps({'code': 200, 'data': "xxx!"})
elif router == "/dwp":
response += json.dumps({'code': 200, 'data': "我是最帅的彭于晏!"})
elif router == "/lbt":
response += json.dumps({'code': 200, 'data': lubData})
else:
response += json.dumps({'code': 404, 'data': router})
# response 返回的数据
print(response)
new_socket.send(response.encode("utf-8"))
new_socket.close()
def main():
tcp_sever_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
# 服务器先关闭，保证重新开启不占用端口
tcp_sever_socket.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
tcp_sever_socket.bind(("", 7890))
tcp_sever_socket.listen(128)
while True:
# 等待新客户端的链接
new_socket, client_addr = tcp_sever_socket.accept()
# p=multiprocessing.Process(target=service_client,args=(new_socket,))
p = threading.Thread(target=service_client, args=(new_socket,))
p.start()
# 子进程关闭一次主进程还需关闭一次，Linux下文件硬链接的原因，两个名字指向同一个文件，因此要关闭两次
# new_socket.close()
# 关闭监听套接字
tcp_sever_socket.close()
if __name__ == '__main__':
main()

BIN
Html-Javascript/二维码/beijin.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 139 KiB

101
Html-Javascript/二维码/index-jc.html Normal file
View File

@ -0,0 +1,101 @@
<!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>
<!-- 引入资源 -->
<script src="./js/jquery.min.js"></script>
<script src="./js/qrcode.min.js"></script>
<style>
#app {
background-color: salmon;
width: 220px;
height: 220px;
box-sizing: border-box;
padding: 10px;
/* position: absolute;
bottom: 363px;
left: 184px; */
}
#qrcode {
width: 345px;
height: 345px;
}
.bodyCode {
width: 750px;
position: relative;
}
.bodyCode img {
width: 100%;
}
</style>
</head>
<body>
<!-- <div class="bodyCode">
<div id="app">
<div id="qrcode"></div>
</div>
<img src="./beijin.jpg" alt="">
</div> -->
<input id="text" type="text" value="wxp://f2f0dTmFHoy4ykvPLTAxFWC2Vu7bsLaQenhn8LEH590zZX0"
style="width:80%" /><br />
<!-- 画二维码的盒子 -->
<div id="app">
<div id="qrcode"></div>
<img id="logo"
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa.zdmimg.com%2F201604%2F22%2F57197db54326d2842.png_a200.jpg&refer=http%3A%2F%2Fa.zdmimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644069953&t=b7f77fa0903dd6245db2dcd30bdffcaa"
style="display: none;">
</div>
<script type="text/javascript">
// 画二维码 的配置
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: "wxp://f2f0dTmFHoy4ykvPLTAxFWC2Vu7bsLaQenhn8LEH590zZX0",
width: 200,
height: 200,
colorDark: "#FA8072", // 二维码的颜色
colorLight: "#ffffff", // 二维码的反色
correctLevel: QRCode.CorrectLevel.H,
typeNumber: -1,//计算模式
correctLevel: 2,//二维码纠错级别
});
// console.dir(QRCode);
// 获取input内容 并生成二维码
// 你要再画
// qrcode.clear(); // 清除代码
// qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码
// 实现更改 input内容 就实时跟新二维码
let text = document.querySelector("#text");
text.oninput = function () {
this.value
qrcode.clear(); // 清除代码
qrcode.makeCode(this.value); // 生成另外一个二维码
}
</script>
</body>
</html>

129
Html-Javascript/二维码/index.html Normal file
View File

@ -0,0 +1,129 @@
<!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>
<!-- 引入资源 -->
<script src="./js/jquery.min.js"></script>
<script src="./js/qrcode.min.js"></script>
<style>
#app {
background-color: salmon;
width: 220px;
height: 220px;
box-sizing: border-box;
padding: 10px;
/* position: absolute;
bottom: 363px;
left: 184px; */
}
#qrcode {
width: 345px;
height: 345px;
}
.bodyCode {
width: 750px;
position: relative;
}
.bodyCode img {
width: 100%;
}
</style>
</head>
<body>
<!-- <div class="bodyCode">
<div id="app">
<div id="qrcode"></div>
</div>
<img src="./beijin.jpg" alt="">
</div> -->
<input id="text" type="text" value="wxp://f2f0dTmFHoy4ykvPLTAxFWC2Vu7bsLaQenhn8LEH590zZX0"
style="width:80%" /><br />
<!-- 画二维码的盒子 -->
<div id="app">
<div id="qrcode"></div>
<img id="logo"
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa.zdmimg.com%2F201604%2F22%2F57197db54326d2842.png_a200.jpg&refer=http%3A%2F%2Fa.zdmimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644069953&t=b7f77fa0903dd6245db2dcd30bdffcaa"
style="display: none;">
</div>
<script type="text/javascript">
var _url = document.querySelector("#text").value;
var qrWidth = 200;
var qrHeight = 200;
var logoQrWidth = qrWidth / 4;
var logoQrHeight = qrHeight / 4;
var qrcode = new QRCode($("#qrcode")[0], {
render: "canvas",
ecLevel: 'H',//识别度
text: _url,
width: qrWidth, //二维码的宽度
height: qrHeight, //二维码的高度
colorDark: "#FA8072",
colorLight: "#ffffff",
typeNumber: -1,//计算模式
correctLevel: 2,//二维码纠错级别
});
// 画二维码 的配置
// var qrcode = new QRCode(document.getElementById("qrcode"), {
// text: "wxp://f2f0dTmFHoy4ykvPLTAxFWC2Vu7bsLaQenhn8LEH590zZX0",
// width: 385,
// height: 385,
// colorDark: "#000000", // 二维码的颜色
// colorLight: "#ffffff", // 二维码的反色
// correctLevel: QRCode.CorrectLevel.H,
// typeNumber: -1,//计算模式
// correctLevel: 2,//二维码纠错级别
// });
// console.dir(QRCode);
// 获取input内容 并生成二维码
// 你要再画
// qrcode.clear(); // 清除代码
// qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码
// 实现更改 input内容 就实时跟新二维码
let text = document.querySelector("#text");
text.oninput = function () {
this.value
qrcode.clear(); // 清除代码
qrcode.makeCode(this.value); // 生成另外一个二维码
}
//二维码与logo图绘制为canvas
$("#qrcode canvas")[0].getContext('2d').drawImage($("#logo")[0], (qrWidth - logoQrWidth) / 2, (qrHeight - logoQrHeight) / 2, logoQrWidth, logoQrHeight);
var cover_canvas = document.getElementsByTagName('canvas')[0];
// var img = converCanvasToImage(cover_canvas);
// //图片放入容器
// $('.transit_qrcode').append(img);
// // canvas转Image
// function converCanvasToImage(canvas) {
// var image = new Image();
// image.src = canvas.toDataURL("image/png");
// return image;
// }
</script>
</body>
</html>

2
Html-Javascript/二维码/js/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
Html-Javascript/二维码/js/qrcode.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
Html-Javascript/字体.woff2 Normal file
View File

Binary file not shown.

145
Html-Javascript/放大镜/index-c.html Normal file
View File

@ -0,0 +1,145 @@
<!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>
html,
body {
margin: 0;
}
#app {
padding-left: 20px;
padding-top: 20px;
position: relative;
top: 10px;
}
.box-s {
width: 300px;
height: 187.5px;
position: relative;
}
.box-s img {
width: 100%;
}
.kuai {
width: calc(300px * .5);
height: calc(187.5px * .5);
background-color: rgba(170, 102, 47, 0.3);
position: absolute;
left: 0;
top: 0;
cursor: move;
}
.box-l {
position: absolute;
top: 30px;
left: 350px;
width: calc(300px * 2);
height: calc(187.5px * 2);
background-color: pink;
background-image: url(./meinv.jpg);
background-repeat: no-repeat;
background-size: 1200px 750px;
}
</style>
</head>
<body>
<div id="app">
<div class="box-s">
<img src="./meinv.jpg" alt="">
<span class="kuai"></span>
</div>
<div class="box-l"></div>
</div>
<script>
// 放大镜 00
let boxS = document.querySelector(".box-s");
let kuai = document.querySelector(".kuai")
let boxL = document.querySelector(".box-l");
// 01- 小图片 块动
console.dir(boxS);
boxS.onmousemove = function (e) {
// 事件源
// target 事件触发者
console.log(e);
// 容器中触发位置
// console.log(e.clientX, e.clientY); // 争对可视区域的位置
// console.log(e.offsetX, e.offsetY); // 争对事件者的 位置
// 边界值的处理
// let x = e.clientX - boxS.offsetLeft - (kuai.clientWidth / 2);
// let y = e.clientY - boxS.offsetTop - (kuai.clientHeight / 2);
let kuaiW = (boxS.clientWidth / 2);
let kuaiH = (boxS.clientHeight / 2);
kuai.style.display = "none";
let x = e.layerX - (kuaiW / 2);
let y = e.layerY - (kuaiH / 2);
console.log(e.layerX, e.layerY);
console.log(x, y);
// 左
if (x <= 0) {
x = 0;
}
// 上
if (y <= 0) {
y = 0;
}
// 右
if (x >= (boxS.clientWidth - kuaiW)) {
x = (boxS.clientWidth - kuaiW);
}
// 下
if (y >= (boxS.clientHeight - kuaiH)) {
y = (boxS.clientHeight - kuaiH);
}
// console.log(e.clientX, e.clientY);
// 大盒子图片移动
boxL.style.backgroundPosition = `${x * 4 * -1}px ${y * 4 * -1}px`
// 小盒子移动
kuai.style.left = `${x}px`;
kuai.style.top = `${y}px`;
kuai.style.display = "block";
}
boxS.onmouseleave = function () {
kuai.style.display = "none";
boxL.style.display = "none";
}
boxS.onmouseenter = function () {
kuai.style.display = "block";
boxL.style.display = "block";
}
// 02- 大图片动
</script>
</body>
</html>

129
Html-Javascript/放大镜/index.html Normal file
View File

@ -0,0 +1,129 @@
<!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>
html,
body {
margin: 0;
min-height: 100vh;
}
#app {
padding-left: 20px;
padding-top: 20px;
position: relative;
top: 10px;
}
.box-s {
width: 300px;
height: 187.5px;
position: relative;
}
.box-s img {
width: 100%;
}
.kuai {
width: calc(300px * .5);
height: calc(187.5px * .5);
background-color: rgba(170, 102, 47, 0.3);
position: absolute;
left: 0;
top: 0;
cursor: move;
}
.box-l {
position: absolute;
top: 30px;
left: 350px;
/* width: calc(300px * 2);
height: calc(187.5px * 2); */
background-color: pink;
background-image: url(./meinv.jpg);
background-repeat: no-repeat;
background-size: 1200px 750px;
}
</style>
</head>
<body>
<div id="app">
<div class="box-s">
<img src="./meinv.jpg" alt="">
<span class="kuai"></span>
</div>
<div class="box-l"></div>
</div>
<script>
// 放大镜 00
let boxS = document.querySelector(".box-s");
let kuai = document.querySelector(".kuai")
let boxL = document.querySelector(".box-l");
// 01- 小图片 块动
console.dir(boxS);
boxS.onmousemove = function (e) {
kuai.style.display = "none";
// 事件源
// target 事件触发者
console.log(e);
// 容器中触发位置
// 浏览器可视范围 固定定位
// console.log(e.clientX, e.clientY); // 争对可视区域的位置
// 触发者 容器坐标 ie不支持
// console.log(e.layerX, e.layerY); // 争对事件者的 位置
// 触发者 容器坐标 ie支持
// console.log(e.offsetX, e.offsetY); // 争对事件者的 位置
let kuaiW = (boxS.clientWidth / 2);
let kuaiH = (boxS.clientHeight / 2);
console.log(kuaiW, kuaiH);
let x = e.offsetX - (boxS.clientWidth / 4);
let y = e.offsetY - (boxS.clientHeight / 4);
// 边界值的处理
// 左
if (x <= 0) {
x = 0;
}
// 上
if (y <= 0) {
y = 0;
}
// 右
if (x >= (boxS.clientWidth - kuaiW)) {
x = (boxS.clientWidth - kuaiW);
}
// 下
if (y >= (boxS.clientHeight - kuaiH)) {
y = (boxS.clientHeight - kuaiH);
}
// 小盒子移动
// kuai.style.left = `${x}px`;
// kuai.style.top = `${y}px`;
kuai.style.left = x + 'px';
kuai.style.top = y + 'px';
setTimeout(function () {
kuai.style.display = "block";
}, 200);
}
</script>
</body>
</html>

BIN
Html-Javascript/放大镜/meinv.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 198 KiB

77
Html-Javascript/移动端/DOMClass.js Normal file
View File

@ -0,0 +1,77 @@
/**
* DOM 类
*
* DOMObj 被抽象化的dom对象
* root 容器
*
* */
class DOMClass {
constructor(DOMObj, root) {
if (DOMObj) {
this.d = this.createDOM(DOMObj, root);
}
}
// 创建dom
createDOM = (DOMObj, root) => {
// 创建的 dom
let cDOM = document.createElement(DOMObj.el);
// 过滤非必要的操作
let filterArr = ["el", "elChildren"];
// 赋予属性
// cDOM.className = "xxx";
for (const key in DOMObj) {
if (!filterArr.includes(key)) {
// console.log(key);
cDOM[key] = DOMObj[key];
// cDOM.className = DOMObj.className;
// cDOM[key] //会解析 key
}
}
// 赋予样式
for (const key in DOMObj.style) {
cDOM.style[key] = DOMObj.style[key];
}
// 递归
// 如果该盒子存在子盒子(多个或一个) 即创建子盒子 并丢进去
DOMObj.elChildren && DOMObj.elChildren.forEach(element => {
// 将 孩子 挨个传入 生成dom 并丢到 父盒子中
this.createDOM(element, cDOM);
});
// 如果给容器 就帮你放入
if (root) {
root.appendChild(cDOM);
}
return cDOM;
}
}
// 使用
// 1. new DOMClass(option, root);
// 2. let D = new DOMClass();
// D.createDOM(option, root);
// class N extends DOMClass {
// constructor() {
// super()
// this.createDOM()
// }
// }
// option 例子:
// {
// el: "div",
// className: "top",
// elChildren: [{
// el: "div",
// className: "box-content",
// elChildren: dataLbt.map((ite) => ({ el: "img", src: ite.img }))
// }]
// }

296
Html-Javascript/移动端/index.html Normal file
View File

@ -0,0 +1,296 @@
<!DOCTYPE html>
<html lang="en" style=" font-size: 20px;">
<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>
<script src="./DOMClass.js"></script>
<style>
body,
html {
margin: 0;
background-color: #eee;
}
#app {
font-size: 20px;
}
#app p {
font-size: 10rem;
width: 750rem;
background-color: salmon;
}
header {
text-align: center;
font-weight: 600;
padding: 10rem 0;
}
.content {
padding: 25rem;
}
.content h3 {
padding-left: 20rem;
margin: 0;
font-size: 43rem;
display: inline-block;
border-radius: 15rem;
background-color: sandybrown;
padding: 10rem 20rem;
position: relative;
top: -30rem;
left: -20rem;
}
.item {
box-sizing: border-box;
width: 700rem;
background-color: #fff;
border-radius: 20rem;
padding: 20px 30px 0;
margin: 15rem 0;
}
.t1,
.t2,
.t3 {
font-size: 30rem;
color: #707070;
display: flex;
justify-content: space-between;
padding-bottom: 20rem;
}
.t1 b {
font-size: 1.2em;
}
.t1 span {
color: #F66A4B;
font-size: 1.2em;
}
.t2 b {
font-weight: 400;
}
</style>
</head>
<body>
<div id="app">
<header>瞎几把写</header>
<div class="content">
<!-- <div class="item">
<h3>1月</h3>
<div class="t1"><b>快捷</b> <span>￥0.8</span> </div>
<div class="t2"><b>订单号：xxxxx</b> <span>收款￥200</span> </div>
<div class="t3">2022.01.14</div>
</div> -->
</div>
</div>
<script>
// rem 做移动端布局
// 1rem = 750/1
// 750rem = 1
window.onresize = () => {
let html = document.documentElement;
// 活学活用
html.style.fontSize = `${document.body.clientWidth / 750}px`;
console.log(document.body.clientWidth);
}
window.onresize();
// 创造数据
class creatData {
constructor(num) {
this.data = [];
for (let index = 0; index < num; index++) {
let o = {
title: "快捷" + this.random(1, 20),
yinli: this.random(0, 10, true),
order: this.random(1111111, 9999999), shoukuan: this.random(99, 9999),
tiem: this.chulitime(new Date(`2022.${this.random(1, 12)}.14`))
};
this.data.push(o);
}
}
// 随机整型
random = (min, max, boo) => {
if (boo) return Math.random() * (max - min) + min;
return Math.round(Math.random() * (max - min) + min);
}
// 处理时间
chulitime = function (date) {
let n = date.getFullYear();
let m = date.getMonth() + 1;
let d = date.getDate();
return `${this.twoNumber(n)}-${this.twoNumber(m)}-${this.twoNumber(d)}`
}
// 处理0
twoNumber = function (num) {
return num >= 10 ? num : `0${num}`;
}
}
// 生成数据
let cdata = new creatData(55);
console.log(cdata);
// 方便使用
data = cdata.data;
function paixu(arr) {
let o = JSON.parse(JSON.stringify(arr));
// 排序每一个
for (let j = 0; j < arr.length; j++) {
// 排了一个序
// (arr.length - j) 优化 不需要重复的对比
for (let i = 0; i < (arr.length - j); i++) {
if (i == arr.length - 1) continue;
let el0 = new Date(o[i].tiem).getTime();
let el1 = new Date(o[i + 1].tiem).getTime();
// 当前项 大于 当前前项
if (el0 > el1) {
// 我就将 当前项 与当前前项 互换位置
let cy0 = JSON.parse(JSON.stringify(o[i])); // 注意复杂数据类型
let cy1 = JSON.parse(JSON.stringify(o[i + 1])); // 注意复杂数据类型
o[i + 1] = cy0;
o[i] = cy1;
}
}
}
return o;
}
data = paixu(data);
// 争对时间排序ok的情况
// 如何去算
function fenge(de) {
let o = JSON.parse(JSON.stringify(de));
let yue = [];
for (let i = 0; i < de.length; i++) {
const element = o[i];
let date = new Date(element.tiem);
let m = date.getMonth() + 1;
o[i].m = m;
// 控制显示
if (yue.includes(m)) {
o[i].show = 'none'
} else {
yue.push(m);
o[i].show = 'inline-block'
}
}
return o;
}
data = fenge(data);
// console.log(cdata.data);
// data = paixu(cdata.data);
// console.log(data);
// 渲染
function view(data) {
console.log(data);
for (let index = 0; index < data.length; index++) {
const elet = data[index];
new DOMClass({
el: "div",
className: "item",
elChildren: [
{
el: "h3", innerText: `${elet.m}月`, style: {
display: elet.show
}
},
{
el: "div",
className: "t1",
elChildren: [
{
el: "b",
innerText: elet.title
},
{
el: "span",
innerText: elet.yinli.toFixed(2)
},
]
},
{
el: "div",
className: "t2",
elChildren: [
{
el: "b",
innerText: `订单号：${elet.order}`
},
{
el: "span",
innerText: `收款￥${elet.shoukuan}`
},
]
},
{
el: "div",
className: "t3",
innerText: elet.tiem
}
]
}, document.querySelector("#app .content"));
}
}
view(data);
</script>
<!-- 750 / 750 1px -->
</body>
</html>
<!-- 介绍 常规的一些布局单位
px vh vw % em rem
em 1em
它本身大小
em 说白了就是根据父盒子的字体大小, 的比例单位
公式: 父盒子字体大小 * (n)em
rem
公式: html字体大小 * (n)rem
-->
<!-- 移动端
像素: 显示像素 物理像素
显示像素: 你显示的图片
物理像素: 你买的显示器的分辨率
物理像素 显示像素
1 : 1 // 1倍显示 正常的
1 : 2 //
2 : 1 // 2倍屏 2倍图
设计稿 -> 2倍图 设计稿 -> W: 750
设计稿 -> 1倍图 设计稿 -> W: 375
-->

139
Html-Javascript/轮播图/index-传统.html Normal file
View File

@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#app{
box-sizing: border-box;
width: 820px;
height: 380px;
background-color: salmon;
margin: 100px auto;
overflow: hidden;
}
.top {
position: relative;
height: 340px;
}
.box-content{
position: absolute;
display: flex;
left: 0; /* 轮播*/
transition: .4s;
/* 过度 */
}
.bottom {
display: flex;
height: 40px;
line-height: 40px;
color: #424242;
font-size: 14px;
}
.bottom .item {
width: 20%;
background-color: #E3E2E2;
text-align: center;
cursor: pointer;
}
.bottom .item.active {
color: #cea861;
border-bottom:solid 2px #cea861 ;
}
</style>
</head>
<body>
<div id="app">
<div class="top">
<div class="box-content">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220222/132b7dea7a8ff48b44abbfc1bbaf4239.jpeg" alt="">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220223/bf4d1c076c6e039e46f9b723c60c0820.jpeg" alt="">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220227/b17b2308283beb3d3b20550d6a6cec3f.jpeg" alt="">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220217/9168da7e2fde10dfdb6a577f910daa90.jpeg" alt="">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220214/8d334a73733222ee93e89b3863069a70.jpeg" alt="">
</div>
</div>
<div class="bottom">
<div class="item active">神话级小小英雄</div>
<div class="item">2022金虎贺岁</div>
<div class="item">海克斯冠军杯</div>
<div class="item">云顶宝典 霓虹宝库</div>
<div class="item">洛与霞雕塑 预定开启</div>
</div>
</div>
<script>
//旗帜
let indexNew =0; //现在
let indexLod =indexNew; //过去
let item = document.querySelectorAll(".bottom .item");
let boxContent= document.querySelector(".box-content");
let app = document.querySelector("#app");
item.forEach((el,i)=>{
el.onclick=()=>{
view(i);
}
})
function view(i){
//新旗子改变前 保留为 旧旗子
indexLod = indexNew;
//更新新旗子
indexNew =i;
//旧的样式图去掉
item[indexLod].classList.remove("active");
//添加样式
item[indexNew].classList.add("active");
//让图片动
boxContent.style.left = `${820 * indexNew * -1}px`;
}
//自动轮播
let time
function zdlb(){
time = setInterval(()=>{
let i= indexNew;
i++;
//边界值处理
if(i>=item.length){
i=0;
}
view(i);
},1000)
}
zdlb();
//移除定时器
app.onmouseenter =()=>{
clearInterval(time);
}
//加上定时器
app.onmouseleave= ()=>{
zdlb();
}
</script>
</body>
</html>

174
Html-Javascript/轮播图/index-类.html Normal file
View File

@ -0,0 +1,174 @@
<!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>
#app {
box-sizing: border-box;
width: 820px;
height: 380px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
}
.top {
height: 340px;
position: relative;
}
.box-content {
display: flex;
position: absolute;
left: 0;
/* 轮播 */
transition: .4s;
/* 过度 */
}
.bottom {
display: flex;
height: 40px;
line-height: 40px;
color: #424242;
font-size: 14px;
}
.bottom .item {
width: 20%;
background-color: #E3E2E2;
text-align: center;
cursor: pointer;
}
.bottom .item.active {
color: #cea861;
border-bottom: solid 2px #cea861;
}
</style>
</head>
<body>
<div id="app">
<div class="top">
<div class="box-content">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220107/e88d7dae2f753763c940d13ef795af56.jpeg"
alt="">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220107/647cf82ec515d2e3baef10c4de5f2495.jpeg"
alt="">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220107/47a44be9c9a38ef77f2f7c2a349c90be.jpeg"
alt="">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220101/b0f2ef7d103992e703941e99a4108010.jpeg"
alt="">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20211104/023cfa33cf08b513ae430d89740b56f6.jpeg"
alt="">
</div>
</div>
<div class="bottom">
<div class="item active">2022 新赛季新征程</div>
<div class="item">2022 新赛季新征程</div>
<div class="item">2022 新赛季新征程</div>
<div class="item">2022 新赛季新征程</div>
<div class="item">2022 新赛季新征程</div>
</div>
</div>
<script>
class Lbt {
constructor() {
this._indexNew = 0;
this.time = null;
// dom
this.item = document.querySelectorAll(".bottom .item");
this.boxContent = document.querySelector(".box-content");
this.app = document.querySelector("#app");
// 添加点击事件
this.item.forEach((el, i) => {
el.onclick = () => {
// 更改新旗帜
this.indexNew = i;
}
})
// 自动轮播
this.zdlb();
// 移除定时器
this.app.onmouseenter = () => {
clearInterval(this.time);
}
// 加上定时器
this.app.onmouseleave = () => {
this.zdlb();
}
// 被监听 属性 不要放在最前头
this.indexNew = 0;
}
// 视图
view = function (i, lodI) {
// 旧的样式得删掉
this.item[lodI].classList.remove("active");
// 添加样式
this.item[i].classList.add("active");
// 让图片动
this.boxContent.style.left = `${820 * i * -1}px`;
}
// 自动轮播方法
zdlb = () => {
this.time = setInterval(() => {
let i = this.indexNew;
i++;
// 边界值处理
if (i >= this.item.length) {
i = 0;
}
// 更改新旗帜
this.indexNew = i;
}, 1000);
}
set indexNew(val) {
// 更改新旗帜
this.view(val, this._indexNew);
this._indexNew = val;
}
get indexNew() {
return this._indexNew;
}
}
let l = new Lbt();
// // 旗帜
// let indexNew = 0; // 现在
// let indexLod = indexNew; // 过去
</script>
</body>
</html>

42
Html-Notes/00-html-start.html Normal file
View File

@ -0,0 +1,42 @@
<!-- html代码注释-->
<!-- 单标签 -->
<标签名>
<标签名/>
<!-- 双标签 -->
<标签名>
<!-- 标签内部 -->
</标签名>
<!DOCTYPE html>
<!-- 告诉浏览器,我是哪个版本的内容 -->
<html>
<!-- 网页 -->
<head>
<!-- 网页设置 -->
<title>网页栏标题</title>
<link rel="icon" href="_sitegray/_sitegray_d.css"/>
<!-- rel="icon" 设置网页小图标 -->
<meta charset="UTF-8">
<!-- 设置文件编码格式 -->
</head>
<body>
<!-- 网页的内容部分 -->
网页的内容部分
<div></div>
</body>
</html>

58
Html-Notes/01-块标签.html Normal file
View File

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<!-- 网页 -->
<head>
<!-- 网页设置 -->
<title>网页栏标题</title>
<link rel="icon" href="_sitegray/_sitegray_d.css"/>
<!-- rel="icon" 设置网页小图标 -->
<meta charset="UTF-8">
<!-- 设置文件编码格式 -->
</head>
<body>
<!-- 网页内容 -->
正常网页内容
<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>
<!-- 注意：
h1 标签，正常来说在网页中有且只有一个
为了方便搜索引擎检索
-->
<hr>
<!-- 分割线 -->
<p>p标签</p>
<p style="color: pink;">p标签</p>
<!-- 段落标签: 段落之间有一定的距离 -->
<!--注意：
p标签内部，不能放块标签
如果放了，会阻断p标签
-->
<hr>
<!-- div标签就是朴素的块标签 -->
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
</body>
</html>
<!-- 快捷注释
ctrl + / 行注释
h${我是h$}*6 h1-h6一下子写完
-->

33
Html-Notes/02-行内标签.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<!-- 网页 -->
<head>
<!-- 网页设置 -->
<title>网页栏标题</title>
<link rel="icon" href="_sitegray/_sitegray_d.css"/>
<!-- rel="icon" 设置网页小图标 -->
<meta charset="UTF-8">
<!-- 设置文件编码格式 -->
</head>
<body>
<p><b>【第一章】</b> <strong>人之初</strong>,<br>性本善.性相近,习相远,苟不教,性乃迁。
<span>教之道,贵以专。昔孟母,择邻处。子不学,</span>
<i>【译文】</i> </p>
<!-- b strong 加粗
br(单标签) 回车换行
i em 倾斜标签
span 朴素的行内标签
-->
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More