bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
历届学生/吴欣阳/.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
测试.txt
node_modules/

201
历届学生/吴欣阳/LICENSE Normal file
View File

@@ -0,0 +1,201 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

0
历届学生/吴欣阳/每天课程/2021-05-25/img/eee.jpg Normal file
View File

BIN
历届学生/吴欣阳/每天课程/2021-05-25/img/图片1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

143
历届学生/吴欣阳/每天课程/2021-05-25/index.html Normal file
View File

@@ -0,0 +1,143 @@
<html>
<head>
<meta charset="UTF-8" />
<title>html第一课</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<a href="https://youzan.github.io/vant/#/zh-CN/swipe" target="_blank">超链接</a>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片无法加载时候的提示">
<ul>
<li>
第一章
<ul>
<li>第一章：html</li>
<li>第一章：html1</li>
<li>第一章：html2</li>
</ul>
</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
<input type="text" disabled placeholder="请输入账户">
<input type="password" placeholder="请输入密码">
<input type="number" placeholder="请输入手机号">
<input type="color">
多选
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
单选
<input type="radio" name="test1">
<input type="radio" name="test1">
<input type="radio" name="test2">
<input type="radio" name="test2">
<input type="range">
<input type="button" value="登录">
<input type="submit" value="登录">
<button>登录</button>
<input type="date" value="登录">
<input type="datetime" >
<input type="file" name="" id="">
<hr>
<h2>用户登录</h2>
<form method="GET" action="http://127.0.0.1/user.php">
<input type="text" name="username" placeholder="请输入账户">
<input type="password" name="userpwd" placeholder="请输入密码">
<input type="number" name="userphone" placeholder="请输入手机号">
<input type="submit" name="" value="登录">
</form>
<select name="" id="">
<option value="">请选择你的爱好</option>
<option value="">编程</option>
<option value="">看电影</option>
<option value="">运动</option>
</select>
<textarea name="" id="" cols="30" rows="10" placeholder="请输入留言"></textarea>
<pre>
var a = 0;
function myFunction(){
a++;
document.getElementById("demo").innerHTML = a;
}
</pre>
<p>
<strong>用于</strong> 在 <small>内容</small> 加载 <big>过程</big> 中 <del>哈哈</del>
一 <sup>组</sup> 占位 <sub>图形</sub>。
通过 title 属性 <i>显示标题占位图</i>，通过 row 属性配置占位段落行数。
</p>
<span>11111</span>
<div>22222222</div>
<table>
<tr>
<th>价格</th>
<th>销量</th>
</tr>
<tr>
<td>11元</td>
<td>1000件</td>
</tr>
<tr>
<td>11元</td>
<td>1000件</td>
</tr>
<tr>
<td>11元</td>
<td>1000件</td>
</tr>
<tr>
<td>11元</td>
<td>1000件</td>
</tr>
</table>
</body>
</html>

85
历届学生/吴欣阳/每天课程/2021-05-25/笔记.txt Normal file
View File

@@ -0,0 +1,85 @@
Git:
代码版本控制
仓库：
远程仓库
本地仓库
项目开发阶段
开发阶段
测试阶段
正式阶段（用户）
web 界面
github 全球最大的同性交友网站
gitlab 免费的
gitee hahah
我是后端修改的文件
1：暂存
2：设置备注
3：拉取
4：推送
我是前端
我是后端
123
哈哈哈
1234
测试顶顶顶
青蛙打网球
12345
前端：
全栈 开发语言
web级开发：
前端 html，css，js
后端 java，php，nodejs + typescript，go，python，
服务器&运维 linux k8s，服务器集群，自动化，分布式
dba 数据 数据安全，网络安全
运营
html 写布局和结构
css 写样式
js 写特效，实现功能，实现后端，app开发，桌面开发
html 标签：
作用：实现各种布局的排列
块级标签 p div ul ol,li,h1~h6
可以设置宽高的
行内标签 a,i,del,img,input
不可以设置宽高的
div：是用来布局的
meta
ul, ol 一般用于重复性的布局
路径：
绝对路径 /
C:\Users\bmy\Desktop\wuxingyang\每天课程\2021-05-25\笔记.txt
相对路径 ./ 当前路径 ../ 返回上一层
每天课程\2021-05-25\笔记.txt

78
历届学生/吴欣阳/每天课程/2021-05-25/结构练习.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>
</head>
<body>
<div class="header">
<div class="header_logo">
<img src="" alt="">
<input type="text">
</div>
<div class="header_meun">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="content">
<div class="left">
<div class="title">HTML 参考手册</div>
<ul>
<li>HTML 标签列表（功能排序）</li>
<li>HTML 标签列表（功能排序）</li>
<li>HTML 标签列表（功能排序）</li>
</ul>
</div>
<div class="center">
<h1>wwww</h1>
<h2>wdqdwqdwqd</h2>
<table>
<tr>
<th>价格</th>
<th>销量</th>
</tr>
<tr>
<td>11元</td>
<td>1000件</td>
</tr>
<tr>
<td>11元</td>
<td>1000件</td>
</tr>
<tr>
<td>11元</td>
<td>1000件</td>
</tr>
<tr>
<td>11元</td>
<td>1000件</td>
</tr>
</table>
</div>
<div class="right">
<div class="title">HTML 参考手册</div>
<ul>
<li>HTML 标签列表（功能排序）</li>
<li>HTML 标签列表（功能排序）</li>
<li>HTML 标签列表（功能排序）</li>
</ul>
</div>
</div>
<div class="footer">
<div class="footer_list"></div>
<div class="footer_copyright"></div>
</div>
</body>
</html>

43
历届学生/吴欣阳/每天课程/2021-05-27/box.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>box</title>
<style>
body {
margin: 0;
}
.box {
width: 200px;
height: 200px;
background: red;
/* border: 1px solid #000; */
border-left: 10px solid green;
border-right: 10px solid blue;
border-top: 10px solid yellow;
border-bottom: 10px solid #000;
margin: 10px;
/* margin: 10px; 四个方向 同时设置一样的边距 */
/* margin: 10px 20px; 上下 表示左右 */
/* margin: 10px 20px 30px; 上 左右 下 */
/* margin: 10px 20px 30px 40px; 上 右 下 左*/
/* margin-left: 10px; */
/* margin-right: 10px; */
/* margin-top: 10px; */
/* margin-bottom: 10px; */
padding: 10px;
}
</style>
</head>
<body>
<div class="box">
你好
</div>
</body>
</html>

40
历届学生/吴欣阳/每天课程/2021-05-27/display.html Normal file
View File

@@ -0,0 +1,40 @@
<!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,
ul {
margin: 0;
}
li {
list-style: none;
}
.box_1 {
width: 200px;
height: 200px;
background: red;
display: inline-block;
}
.box_2 {
width: 200px;
height: 200px;
background: blue;
display: inline-block;
}
</style>
</head>
<body>
<div class="box_1">div标签</div>
<a href="" class="box_2">a标签</a>
<a href="" class="box_2">a标签</a>
</body>
</html>

72
历届学生/吴欣阳/每天课程/2021-05-27/float.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>float</title>
<style>
/*清除标签的默认样式*/
body,ul{
margin: 0;
}
li {
list-style: none;
}
.box_1 {
width: 200px;
height: 200px;
background: red;
}
.box_2 {
width: 200px;
height: 200px;
background: green;
}
.left {
float: left;
}
.box_3 {
background: blue;
color: #fff;
clear: both;
}
.box_4 {
width: 100px;
height: 100px;
background: green;
}
.menu {
overflow: hidden;
}
.menu li {
float: left;
}
</style>
</head>
<body>
<div class="box_1 left"></div>
<div class="box_2 left"></div>
<div class="box_3">dddd</div>
<ul class="menu">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
<li>测试4</li>
<li>测试5</li>
<li>测试6</li>
</ul>
<div class="box_4"></div>
<div class="test">
<h2>11</h2>
<h2>11</h2>
</div>
</body>
</html>

64
历届学生/吴欣阳/每天课程/2021-05-27/index.css Normal file
View File

@@ -0,0 +1,64 @@
.one {
color: blue !important;
}
.one {
color: red;
}
.two {
color: yellow;
}
.three {
color: green;
}
#test {
color: palevioletred;
}
#test {
color: teal;
}
.meun {
}
.meun ul li,
.logo h1{
color: rebeccapurple;
}
.gghh:hover {
color: green;
}
.username:focus {
background: yellow;
width: 300px;
}
.be::before {
content: "测试1 ";
}
.be::after {
content: " 测试2";
}
/* .koko li:first-child {
color: red;
}
.koko li:last-child {
color: red;
} */
.koko li:nth-child(4n) {
color: red;
}
.gl::selection {
background: yellow;
color: red;
}
.login input[placeholder="用户名"] {
background: blue;
}
.login input[placeholder="验证码"] {
background: green;
}

60
历届学生/吴欣阳/每天课程/2021-05-27/index.html Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css第一课</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="login">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<input type="number" placeholder="手机号">
<input type="text" placeholder="验证码">
</div>
<p class="gl">测试测试测hi</p>
<ul class="koko">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<input class="username" type="text" placeholder="请输入名称">
<h3 class="be">before and after</h3>
<!-- <p style="color: red;">测试的P标签</p> -->
<p class="one">测试的P标签1</p>
<p class="two">测试的P标签2</p>
<p class="three">测试的P标签3</p>
<div id="test">id选择器</div>
<div class="header">
<div class="logo">
<h1>2222</h1>
</div>
<div class="meun">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
<div class="gghh">鼠标悬浮</div>
</body>
</html>

28
历届学生/吴欣阳/每天课程/2021-05-27/居中.html Normal file
View File

@@ -0,0 +1,28 @@
<!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>
.box {
width: 200px;
height: 200px;
background: red;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="box">
你好
</div>
</body>
</html>

110
历届学生/吴欣阳/每天课程/2021-05-27/笔记.txt Normal file
View File

@@ -0,0 +1,110 @@
css 做美化的（层叠样式表）
写css三种方式：
1：内联写法
2: 内部写法
css 选择器：
标签选择器
作用：一般用于清除标签的默认样式
class选择器 .
class="名字"
id选择器（不常用） #
id="名字"
区别：
1：id使用的时候不要出现重复，全局只有一次
*（通配符）选择器
作用：一般用于清除标签的默认样式
伪类选择器
hover
before after 用于绘制图标，1像素的线条
:first-child
:last-child
:nth-child
选择器 可以合写
空格 表示嵌套关系
+ 表示同级关系
> 表示嵌套关系
css 优先级
3：外链
盒子模型
margin 外边距
padding 内边距
border 边框
content 内容
盒子模型的宽高计算规则：
实际宽高（肉眼看到的） = 你设置的content 宽高 + padding 和 border
box-sizing: border-box;
改变盒子模型的计算规则：
你设置的content 宽高 = padding 和 border + content （适当减小）
浮动
目的：让块元素排在一行
float: left, right
清除浮动
clear: both;
父元素高度怎么来的？
1：大部分情况下是被子元素撑开
2：你自己设置的height
问题：
如果父元素中的子元素设置了浮动，那么父元素将没有高度 0
如何解决：
1：手写高度 height 父元素
2：清除浮动 clear: both; 父元素 下面的那个元素
3：overflow: hidden; 父元素
display：实现块标签和行标签的相互转换
inline 转换为行 可以放在一行，不能设置宽高
block 转换为块 不可以放在一行，可以设置宽高
inline-block 转换行内块标签 可以放在一行，可以设置宽高
font-size: 0
水平居中：
text-align 块div中内容的对齐方式
padding-top
margin: 0 auto; 让块div在其他div中居中
垂直对齐：
line-height 设置单行文字的垂直对齐（数值应该是当前元素的高度）
padding-top

75
历届学生/吴欣阳/每天课程/2021-05-28/定位.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>定位</title>
<style>
body {
margin: 0;
height: 3000px;
}
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
box-sizing: border-box;
float: left;
}
.box_1 {
background: rebeccapurple;
position: fixed;
bottom: 0;
right: 0;
}
.box_2 {
background: red;
position: relative;
left: 63px;
top: 31px;
}
.box_3 {
background: green;
}
.box_4 {
background: yellow;
position: relative;
left: -183px;
top: 74px;
}
.box_5 {
background: palevioletred;
}
.box_4_1 {
width: 100px;
height: 100px;
background: peachpuff;
border: 1px solid #000;
box-sizing: border-box;
position: absolute;
left: 13px;
top: 145px;
}
</style>
</head>
<body>
<div class="box box_1"></div>
<div class="box box_2"></div>
<div class="box box_3"></div>
<div class="box box_4">
<div class="box_4_1"></div>
</div>
<div class="box box_5"></div>
</body>
</html>

31
历届学生/吴欣阳/每天课程/2021-05-28/笔记.txt Normal file
View File

@@ -0,0 +1,31 @@
定位 position
为了实现更加灵活和自由的布局
left（左）,right（右）,top（上）,bottom（下）
z-index 调整z轴的漂浮等级
1：相对定位 relative
当元素被设置相对定位后，它原本位置没有被删除，脱离文档流了
定位参考对象：
是他原本的位置
2：绝对定位 absolute
当元素被设置绝对定位后，它原本位置被被删除，脱离文档流了
定位参考对象：
他的父元素如果没有设置定位
参考body边框来定位
他的父元素如果设置了定位
定位参考对象就是父元素的位置
3：固定定位 fixed
当元素被设置固定定位后，它原本位置被被删除，脱离文档流了
定位参考对象：就是浏览器的边框

55
历届学生/吴欣阳/每天课程/2021-06-01/keyframes.html Normal file
View File

@@ -0,0 +1,55 @@
<!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>keyframes</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background: red;
animation: test 2s ease infinite alternate;
}
@keyframes test {
0% {
width: 200px;
height: 200px;
background: red;
}
25% {
width: 250px;
height: 250px;
background: yellow;
}
50% {
width: 300px;
height: 300px;
background: green;
}
100% {
width: 350px;
height: 350px;
background: blue;
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

67
历届学生/吴欣阳/每天课程/2021-06-01/media.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>media</title>
<style>
* {
margin: 0;
padding: 0;
}
.center div {
float: left;
height: 100%;
}
.center {
overflow: hidden;
width: 1200px;
margin: 0 auto;
height: 600px;
}
.left {
width: 200px;
background: red;
}
.content {
width: 800px;
background: #000;
}
.right {
width: 200px;
background: blue;
}
@media screen and (max-width: 900px) {
.right {
display: none;
}
}
@media screen and (max-width: 650px) {
.right {
display: none;
}
.left {
display: none;
}
}
</style>
</head>
<body>
<div class="center">
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
</div>
</body>
</html>

10
历届学生/吴欣阳/每天课程/2021-06-01/笔记.txt Normal file
View File

@@ -0,0 +1,10 @@
translate(x,y) 让元素在X,Y轴平移
rotate 让元素按照中心轴旋转
scale(width,height) 让元素放大缩小
media 媒体查询 (响应式)：根据访问设备的屏幕大小，动态显示合适的布局给用户看
已经不用了

BIN
历届学生/吴欣阳/每天课程/2021-06-04/ele.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 667 B

47
历届学生/吴欣阳/每天课程/2021-06-04/index.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>flex</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
ul {
display: flex;
height: 40px;
background: #8d8d8d;
align-items: center;
justify-content: space-around;
}
li {
width: 20%;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li>测试文字</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>

59
历届学生/吴欣阳/每天课程/2021-06-04/rem.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>rem</title>
<script>
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
</script>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 2.5rem;
height: 2.5rem;
}
.main .box {
float: left;
}
.box_1 {
background: red;
}
.box_2 {
background: yellow;
}
.box_3 {
background: green;
}
</style>
</head>
<body>
<div class="main">
<div class="box box_1"></div>
<div class="box box_2"></div>
<div class="box box_3"></div>
</div>
</body>
</html>

41
历届学生/吴欣阳/每天课程/2021-06-04/笔记.txt Normal file
View File

@@ -0,0 +1,41 @@
display: flex 开启弹性盒子
弹性盒子
作用：快速布局，各种对齐，各种排列
12个属性
6个应用在父元素上
align-items 只有一行元素的时候，让子元素在父容器的Y轴中对齐 center
align-content 多行元素的时候，让多个子元素在父容器的Y轴中对齐 center
justify-content 让子元素在父容器的X轴中对齐 space-around
flex-direction 改变元素的排列方向 row(横着放) column（竖着放）
flex-wrap wrap 一行排不下的时候，自动换行
flex-flow flex-direction和flex-wrap简写
6个应用在子元素上
order 设置元素顺序，数值越小越靠前
flex-grow 通过设置比例的方式，改变元素所占空间比
flex-shrink: 0; 设置元素的缩小比例，0 表示不要缩小
flex-basis 设置元素的宽度
flex 是flex-grow, flex-shrink 和 flex-basis
一般都是写 flex: 数值 一个参数，表示设置 flex-grow
align-self 允许单个元素设置不同的对齐方式
rem
尺寸的单位，他可以动态的改变
rem 计算规则
10rem * 16px(html 上默认的font-size的数值) = 160px
font-size 改变的方式：
1：css 媒体查询 media
2：js 来计算

208
历届学生/吴欣阳/每天课程/2021-06-04/饿了么.html Normal file
View File

@@ -0,0 +1,208 @@
<!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>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_u8lblew2pc.css">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
background-color: #f5f5f5;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
left: 0;
right: 0;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
border-top: 1px solid #d0cece;
background: #fff;
}
.footer li {
text-align: center;
}
.footer li p {
font-size: 12px;
color: #8e8e93;
}
.user_info {
background: linear-gradient(90deg, #0af, #0085ff);
height: 110px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
}
.info_img {
display: flex;
align-items: center;
}
.info_img img {
width: 60px;
border-radius: 100%;
margin-right: 18px;
}
.info_name {}
.info_name h3 {
color: #fff;
}
.info_name p {
color: #fff;
font-size: 12px;
}
.user_info i {
color: #fff;
}
.active {
display: flex;
height: 83.5px;
background: #fff;
}
.active li {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
border-right: 1px solid #ddd;
}
.active li:last-child {
border-right: none;
}
.active li i {
font-size: 24px;
}
.active li p {
font-size: 12px;
font-weight: 700;
color: #666
}
.menu {}
.menu li {
display: flex;
justify-content: space-between;
height: 45px;
align-items: center;
padding: 0 15px;
margin-top: 10px;
background: #fff;
}
.menu .icon_left {
display: flex;
align-items: center;
}
.menu .icon_left i {}
.menu .icon_left span {
font-size: 14px;
color: #333;
margin-left: 8px;
}
.menu .icon-zhankai-copy {
color: #8e8e93;
}
</style>
</head>
<body>
<div class="content">
<div class="user_info">
<div class="info_img">
<img src="./ele.png" alt="">
<div class="info_name">
<h3>登录/注册</h3>
<p>登录后享受更多特权</p>
</div>
</div>
<i class=" iconfont icon-zhankai-copy"></i>
</div>
<ul class="active">
<li>
<i class="iconfont icon-gouwuchekong"></i>
<p>红包</p>
</li>
<li>
<i class="iconfont icon-gouwuchekong"></i>
<p>金币</p>
</li>
</ul>
<ul class="menu">
<li>
<div class="icon_left">
<i class="iconfont icon-gouwuchekong"></i>
<span>我的地址</span>
</div>
<i class=" iconfont icon-zhankai-copy"></i>
</li>
<li>
<div class="icon_left">
<i class="iconfont icon-gouwuchekong"></i>
<span>我的地址</span>
</div>
<i class=" iconfont icon-zhankai-copy"></i>
</li>
<li>
<div class="icon_left">
<i class="iconfont icon-gouwuchekong"></i>
<span>我的地址</span>
</div>
<i class=" iconfont icon-zhankai-copy"></i>
</li>
</ul>
</div>
<ul class="footer">
<li>
<i class="iconfont icon-pinglun"></i>
<p>首页</p>
</li>
<li>
<i class="iconfont icon-pinglun"></i>
<p>订单</p>
</li>
<li>
<i class="iconfont icon-pinglun"></i>
<p>我的</p>
</li>
</ul>
</body>
</html>

141
历届学生/吴欣阳/每天课程/2021-06-10/index.html Normal file
View File

@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// 变量：在计算机中存储一个可以被改变的数据
// 常量：在计算机中存储一个不可以被改变的数据
// 系统关键字
// var 变量名 = 变量值
// const 常量名 = 常量值
// 变量名（常量名） 定义的时候需要遵循一套规范
// 变量名（常量名）不可以用数字开头
// 变量名（常量名）不可以用特殊符号 ( _ $ )
// 变量名（常量名）区分大小写
// 变量名（常量名）定义的时候需要尽量遵守驼峰命名法
// 变量名 建议使用字母开头
// var a = 10, b = 20, c = 100;
// console.log(a);
// 留坑 数据类型
// 对象(Object)、数组(Array)、函数(Function)。
// 字符串（String）凡是用 "" '' 包裹的就是字符串，一般保存中文信息
// var a = "刘兵";
// console.log(a);
// 数字(Number)、 0 ~9 组成的就是数字类型
// var b = 2333
// console.log(b);
// 布尔(Boolean)、 真（true 1） 假（false 0），一般用于判断
// var c = false
// console.log(c);
// var d ;
// console.log(d);
// 对空（Null）、表示不存在，找不到的情况
// var e = null;
// console.log(e);
// 未定义（Undefined） 定义变量未赋值就是 Undefined
// var f = undefined;
// console.log(f);
// var ddd = Symbol(1);
// var ccc = Symbol(1)
// console.log(ddd == ccc);
// 运算符 + - * / %
// ++ 让变量自增1
// ++变量 先让变量+1，然后使用变量
// 变量++ 先使用变量，使用完成后再+1
// -- 让变量自减1
// var a = 1, b = 2, c = 3;
// console.log(
// (++a + (--a * c++) - false + (--c+a) ) + ( (b*a--) + a )
// );
// console.log(
// (--a + b - b-- + (b-- - (++a)) ) + (c-- + a++)
// );
// console.log(
// (--a + b - b-- + (b-- - (++a)) ) + (c-- + a++)
// );
// += -= *= /+ %=
// var a = "4", b = 4;
// console.log(a+=b); // a = a + b
// console.log( a === b);
// + 两个功能
// 数字运算 + 两边都是数字才可以运算
// 拼接字符串
// = 赋值
// == 判断变量数值是否相等
// === 强等于 绝对等于 判断变量数值是否相等 并且 判断变量的类型是否相等
// 比较运算符
// && and 条件表达式两边必须都为true才返回true，否则就是false
// || or 条件表达式两边只要有一个为tre，就返回true，
// ! 取反 对结果进行取反
// console.log(a != b);
// key: value
// object 可以存储任意的数据类型
// var a = new Object();
// a.name = "刘兵"
// a.age = 18
// a.isLike = false
// var a = new Object({
// name: '11',
// age: 18
// })
var a = {
name: '刘兵',
age: 18
}
for (const i in a) {
console.log(a[i]);
}
// object 一种数据类型，上面说过了，
// 还有一种是编程中的一种抽象概念 类似java中的 class
// 电脑
var diannao = {
price: '19800元',
color: '#000',
size: '15寸',
cpu: 'I7处理器',
start () {
console.log('可以开机');
},
stop () {
console.log('可以关机');
}
}
</script>
</html>

1
历届学生/吴欣阳/每天课程/2021-06-10/index.js Normal file
View File

@@ -0,0 +1 @@
console.log("输入2");

42
历届学生/吴欣阳/每天课程/2021-06-10/循环语句.html Normal file
View File

@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>循环语句</title>
</head>
<body>
</body>
<script>
// for for of for in foreach filter
// while
// var sum = 0
// for (var i = 1; i<=100; i++) {
// sum+=i
// }
// console.log(sum);
// for (;;) {
// console.log("1111");
// }
// while
// var sum = 0, i = 1;
// while (i <= 100) {
// sum+=i
// i++
// }
// console.log(sum);
// var a = 1;
// do {
// console.log("1111");
// } while (a > 3);
</script>
</html>

60
历届学生/吴欣阳/每天课程/2021-06-10/数组.html Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组</title>
</head>
<body>
</body>
<script>
// 作用: 都是用来存储大量的数据
// object key-value 类似css
// {
// key: value
// }
// array 下标(编号,学号)
// [
// '刘兵','张三','李四'
// ]
// var a = new Array();
// a[0] = "刘兵"
// a[1] = "张三"
// a[2] = "李四"
// var a = new Array("刘兵","张三","李四");
// json 数据格式
// var a = [
// "刘兵",
// [1,2,3],
// "李四",
// {
// age: 1
// }
// ]
var data = [
{
id: 1, name: 'name1'
},
{
id: 2, name: 'name2'
},
{
id: 3, name: 'name3'
}
];
for (var i = 0; i< data.length; i++) {
console.log(data[i].name);
}
</script>
</html>

12
历届学生/吴欣阳/每天课程/2021-06-10/方法.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>

82
历届学生/吴欣阳/每天课程/2021-06-10/条件语句.html Normal file
View File

@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件语句</title>
</head>
<body>
</body>
<script>
// if (判断条件) {
// }
// var a = true;
// if (a) {
// console.log("出去吃饭");
// } else {
// console.log("在家吃饭");
// }
// if (a) console.log("出去吃饭");
// else console.log("在家吃饭");
// 三元(目)运算
// a ? console.log("出去吃饭") : console.log("在家吃饭")
// var cj = 99999;
// if ( cj < 60 ) {
// console.log("不及格");
// } else if ( 60 <= cj && cj <= 70 ) {
// console.log("一般");
// } else if ( 70 < cj && cj <= 80 ) {
// console.log("普通");
// } else if ( 80 < cj && cj <= 90 ) {
// console.log("优秀");
// } else if ( 90 < cj && cj <= 100 ) {
// console.log("学霸");
// } else {
// console.log("分数错误，最高100分");
// }
// var name = "bmy1", pwd = "123"
// if (name == "bmy") {
// if (pwd == "123") {
// console.log("用户名和密码都正确,可以登录");
// } else {
// console.log("密码错误");
// }
// } else {
// console.log("用户名错误");
// }
// if (name == "bmy" && pwd == "123") {
// console.log("用户名和密码都正确,可以登录");
// } else {
// console.log("用户名或密码错误,请检查");
// }
// switch 一个变量有多种数值的场景
var type = 1;
switch (type) {
case 1:
console.log("1111");
break;
case 2:
console.log("2222");
break;
default:
console.log("都不相等");
break;
}
</script>
</html>

19
历届学生/吴欣阳/每天课程/2021-06-10/笔记.txt Normal file
View File

@@ -0,0 +1,19 @@
html，css，js
js：主要用来操作html，css实现各种网页的特效交互或者功能
js
手机App，h5，web，桌面端，写后端，操作系统
js (es 5)
dom：使用js控制网页上的html和css
bom：使用js控制用户的浏览器
ecmscript 6 es6 高版本的js语法
预习:
1: JavaScript 事件 https://www.runoob.com/js/js-events.html
2: 方法 https://www.runoob.com/js/js-functions.html

54
历届学生/吴欣阳/每天课程/2021-06-11/event.html Normal file
View File

@@ -0,0 +1,54 @@
<!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>event 事件</title>
</head>
<body>
<div class="test">
<p>你好1</p>
<p>你好2</p>
<p>你好2</p>
<p>你好2</p>
<p>你好2</p>
<p>你好2</p>
<p>你好2</p>
<p>你好2</p>
<p>你好2</p>
<p>你好2</p>
<p>你好2</p>
<p>你好2</p>
</div>
<button>点我</button>
</body>
<script>
// 事件：用户在浏览器基本上干的所有事情都是js的事件
// 事件三要素组成：事件源 事件类型 事件处理函数
// 第一种绑定事件的方式
// document.querySelector("button").onclick = function (e) {
// console.log(document.querySelector(".test").children);
// }
// 网页的标签会在js中被转化为对象进行存储
// 这个对象叫什么？虚拟dom
// 虚拟dom转换成真实的dom
// var p = document.querySelectorAll(".test p");
// console.log(p)
// p.forEach(function (v) {
// v.onclick = function () {
// console.log(v)
// }
// })
</script>
</html>

93
历届学生/吴欣阳/每天课程/2021-06-11/function.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>js 方法（函数）</title>
</head>
<body>
</body>
<script>
// 方法 函数 function
// 作用？：实现重复代码的封装
// 无参数的方法
// 1 先定义
// function dddd () {
// console.log("ddddd");
// }
// // 2 使用
// dddd()
// // 匿名方法
// var a = function () {
// console.log("a方法");
// }
// a()
// 方法参数的传递
// function zhuangxiu () {
// console.log();
// console.log(arguments[0],arguments[1], ": 拿到钱帮你装修");
// return "我装修好了，你可以入住了"
// }
// var my = zhuangxiu(50000,10000)
// console.log(my);
// 局部作用域
// 全局作用域
// function GetA() {
// var a = 2;
// console.log(a); // 2
// }
// GetA()
// console.log(a); // 1
// var a = function () {
// console.log("a");
// }
// var b = a;
// b()
// 回调
// 回调的作用，解决异步返回值问题
// 同步 & 异步
// var a = function (status) {
// var test = "哈哈哈哈"
// status(test)
// }
// a( function(res) {
// console.log(res);
// } )
// function a ( callback ) {
// var test;
// setTimeout(function() {
// test = "测试";
// callback(test)
// // console.log(test);
// },3000)
// // return test;
// }
// a( function(r) {
// console.log(r);
// } );
</script>
</html>

69
历届学生/吴欣阳/每天课程/2021-06-11/tabs.html Normal file
View File

@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,ul,li,p {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 10px;
}
.tabs_content li {
display: none;
}
.content_active {
display: block !important;
}
.title_active {
color: red;
}
</style>
</head>
<body>
<ul class="tabs_title">
<li class="title_active">公告</li>
<li>规则</li>
<li>安全</li>
<li>公益</li>
</ul>
<ul class="tabs_content">
<li class="content_active">公告的内容</li>
<li>规则的内容</li>
<li>安全的内容</li>
<li>公益的内容</li>
</ul>
</body>
<script>
// 第一步：为标题的所有li标签绑定点击事件
// 第二步：为点击的li加上激活类名，并删除其他li上的类名
// 获取 tabs_title 里面的所有li标签
var TitleLi = document.querySelectorAll(".tabs_title li")
var ContentLi = document.querySelectorAll(".tabs_content li")
// 遍历所有li标签
TitleLi.forEach(function (v,i) {
// 为每个li标签绑定点击事件
v.onclick = function () {
// 清除所有li标签上的类名
TitleLi.forEach(function (item,index) {
item.className = ""
ContentLi[index].className = ""
})
// 给你点击的那个li加类名
v.className = "title_active"
ContentLi[i].className = "content_active"
}
})
</script>
</html>

142
历届学生/吴欣阳/每天课程/2021-06-11/tabs_v2.html Normal file
View File

@@ -0,0 +1,142 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tabs_v2</title>
<style>
body,ul,li,p {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 10px;
}
.tabs_content li {
display: none;
}
.content_active {
display: block !important;
}
.title_active {
color: red;
}
</style>
</head>
<body>
<ul class="tabs_title">
</ul>
<ul class="tabs_content">
</ul>
</body>
<script>
var data = [
{
title: '公告',
content: [
{ text: '公告的新闻1' },
{ text: '公告的新闻2' },
{ text: '公告的新闻3' },
]
},
{
title: '规则',
content: [
{ text: '规则的新闻1' },
{ text: '规则的新闻2' }
]
},
{
title: '安全',
content: [
{ text: '安全的新闻1' },
{ text: '安全的新闻2' },
{ text: '安全的新闻3' },
{ text: '安全的新闻4' },
]
},
{
title: '公益',
content: [
{ text: '公益的新闻1' },
{ text: '公益的新闻2' },
{ text: '公益的新闻3' },
{ text: '公益的新闻4' },
{ text: '公益的新闻5' },
]
},
{
title: '军事',
content: [
{ text: '军事的新闻1' },
{ text: '军事的新闻2' },
{ text: '军事的新闻3' },
{ text: '军事的新闻4' },
{ text: '军事的新闻5' },
]
}
];
var currentIndex = 0;
function RenderTitle() {
// var html = ""
// data.forEach(function (v,i) {
// console.log(v)
// html += `<li class="${i == 0 ? 'title_active' : '' }">${v.title}</li>`
// })
// console.log(html)
//
// document.querySelector(".tabs_title").innerHTML = html
data.forEach(function (v,i) {
document.querySelector(".tabs_title").innerHTML
+= `<li class="${i == 0 ? 'title_active' : '' }">${v.title}</li>`;
document.querySelector(".tabs_content").innerHTML
+= `<li class="${i == 0 ? 'content_active' : '' }"></li>`;
})
// 获取所有标题的li标签
var TitleLi = document.querySelectorAll(".tabs_title li");
var ContentLi = document.querySelectorAll(".tabs_content li");
// 为标题li绑定点击事件
TitleLi.forEach(function (v,i) {
v.onclick = function () {
TitleLi.forEach(function (item,index) {
item.className = ""
ContentLi[index].className = ""
})
v.className = "title_active"
ContentLi[i].className = "content_active"
currentIndex = i
RenderContent()
}
})
}
function RenderContent() {
var li = document.querySelectorAll(".tabs_content li");
li[currentIndex].innerHTML = ""
data[currentIndex].content.forEach(function (v) {
li[currentIndex].innerHTML += `<p>${v.text}</p>`
})
}
RenderTitle()
RenderContent()
</script>
</html>

47
历届学生/吴欣阳/每天课程/2021-06-23/index.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
</ul>
</body>
<script>
// function geData(res) {
// console.log(res)
// }
</script>
<!--<script src="http://127.0.0.1/list.php?name=geData"></script>-->
<script>
// // 1：拿出手机
// var http = new XMLHttpRequest() // xhr
//
// // 2：设置拨号方式和手机号码
// http.open("GET","http://127.0.0.1/list.php");
//
// // 3：拨号
// http.send()
//
// // 4：拨号的状态监听
// http.onreadystatechange = function () {
//
// if (http.readyState == 4) {
// if (http.status == 200) {
// var data = JSON.parse(http.response);
//
// data.result.forEach(v=> {
// document.querySelector("ul").innerHTML += `<li>${v.title}</li>`
// })
// } else {
// console.log("请求错误")
// }
// }
// }
</script>
</html>

67
历届学生/吴欣阳/每天课程/2021-06-23/笔记.txt Normal file
View File

@@ -0,0 +1,67 @@
web 开发方式
1：后端（服务端）渲染
后端工作：70% 数据库，后端代码，页面渲染，数据安全，页面功能 1万
前端工作：30% 写静态页面 3千~3千
优点：前端浏览器压力下，前端开发工作任务少，对搜索引擎更友好
缺点：代码冗余非常高，版本升级的时候更加困难
2：前后端分离
后端工作：50% 数据库，后端代码，数据安全 1万+1000
|
|
ajax
|
|
前端工作：50% 写静态页面，页面功能，页面渲染 1万
ajax 官方解释
无刷新的前后端数据交互技术
request 请求
response 响应
请求方式：
GET
https://www.baidu.com/s?ie=utf-8&f=8
地址栏传参
POST
https://www.baidu.com/s
请求体（参数）里面发送的
PUT
DELETE
请求状态码：
浏览器有个同源策略（跨域）
前端：http://127.0.0.1:8080/index
后端：http://127.0.0.1:80/list.php
http: 80
https: 443
协议
域名
端口
绕过浏览器的安全策略（解决跨域）
1：cors （Access-Control-Allow-Origin） 需要后端在请求头中中设置cors，告诉浏览器放行我们的前端
2：jsonp 把接口地址伪装成js文件地址，骗过浏览器达到成功发送请求的目的，拿回数据需要 + 回调函数 ！！ 不是ajax请求
3：服务端代理
A（我的前端） ------> B（别人公司的后端）
A ---> C（我们自己的后端）
C ---> B

101
历届学生/吴欣阳/每天课程/2021-07-16/nodestudy/pachong.js Normal file
View File

@@ -0,0 +1,101 @@
const axios = require("axios");
const iconv = require("iconv-lite");
const cheerio = require("cheerio");
const fs = require("fs");
var url = "http://www.netbian.com/dongman/";
var urlArr = [];
var imgUrlArr = [];
var index = 0;
var urlIndex = 6;
for (var i = 9; i <= 136; i++) {
if (i == 1) {
urlArr.push(url);
} else {
urlArr.push(`${url}index_${i}.htm`);
}
}
async function getSiteHtml() {
console.log(`第 ${index + 1} 页，请求地址为：`, urlArr[index]);
let res = await axios({
method: "get",
url: urlArr[index],
responseType: "arraybuffer",
headers: {
"User-Agent":
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36",
Cookie:
"__yjs_duid=1_b9d996b2175dc2d7535f6766d95151c11626417252241; Hm_lvt_14b14198b6e26157b7eba06b390ab763=1626417252; xygkqecookieinforecord=%2C7-23654%2C; xygkqecookieclassrecord=%2C7%2C4%2C3%2C29%2C19%2C; yjs_js_security_passport=fd52428938eab0e648019f36164ac5c0fcfcf108_1626421470_js; Hm_lpvt_14b14198b6e26157b7eba06b390ab763=1626421860",
Host: "www.netbian.com",
Accept:
"text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
},
});
let $ = cheerio.load(iconv.decode(res.data, "gbk"));
jxHtml($);
}
async function jxHtml($) {
$(".list li img").each(function (i) {
var src = $(this).attr("src");
if (src.includes("small")) {
src = src.replace("small", "");
src = src.replace(src.substr(-14), ".jpg");
imgUrlArr.push(src);
}
if (src.includes("newc")) {
console.log("===========================");
console.log(`1: 系统检测到不符合规律的图片，请手动处理`);
console.log(`访问路径：${urlArr[index]}, 第: ${i} 张图`);
console.log("===========================");
}
});
downImage();
}
async function downImage() {
console.log("imgUrlArr[urlIndex] ====== ", imgUrlArr[urlIndex]);
try {
var jpgFileName = Date.now() + Math.random() + ".jpg";
var res = await axios({
method: "get",
url: imgUrlArr[urlIndex],
responseType: "stream",
});
res.data.pipe(fs.createWriteStream(`img/${jpgFileName}`));
console.log(
`当前第：${index + 1} 页，第：${urlIndex + 1} 张图：${imgUrlArr[urlIndex]}`
);
if (urlIndex <= imgUrlArr.length - 2) {
setTimeout(() => {
urlIndex += 1;
downImage();
}, 1000);
} else {
console.log("上一页结束");
urlIndex = 0;
imgUrlArr = [];
setTimeout(() => {
index += 1;
getSiteHtml();
}, 2000);
}
} catch (error) {
console.log("===========================");
console.log(`2: 系统检测到不符合规律的图片，请手动处理`);
console.log(`访问路径：${urlArr[index]}, 第: ${urlIndex} 张图`);
console.log("===========================");
setTimeout(() => {
urlIndex += 1;
downImage();
}, 1000);
}
}
getSiteHtml();

17
历届学生/吴欣阳/每天课程/2021-07-16/nodestudy/package.json Normal file
View File

@@ -0,0 +1,17 @@
{
"name": "nodestudy",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node pachong.js"
},
"keywords": [],
"author": "bmy",
"license": "ISC",
"dependencies": {
"axios": "^0.21.1",
"cheerio": "^1.0.0-rc.10",
"iconv-lite": "^0.6.3"
}
}

0
历届学生/吴欣阳/每天课程/2021-07-16/nodestudy/分析.txt Normal file
View File

91
历届学生/吴欣阳/每天课程/2021-07-16/vue/index.html Normal file
View File

@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="app" v-cloak>
<h1>{{ test }}</h1>
<a :href="url">你好</a>
<div v-html="h2html"></div>
<div v-text="h2html"></div>
<ul>
<li v-for="(v,i) in newsList" :key="i">
{{ i }} ：{{ v.title }}
</li>
</ul>
<div v-show="isShow">
v-show 指令学习
</div>
<div v-if="vipLeave == 1">vip1</div>
<div v-else-if="vipLeave == 2">vip2</div>
<div v-else-if="vipLeave == 3">vip3</div>
<div v-else-if="vipLeave == 4">vip4</div>
<div v-else>暂无vip</div>
<input type="text" v-model="userName" placeholder="请输入用户名">
{{ userName }}
<div v-once>{{userName}}</div>
<button @click="hello(1)">登 录</button>
<span v-pre>{{ test }}</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
// vue 指令
// v-bind 将变量绑定到标签的属性上 简写 :
// v-html 将变量渲染为html
// v-text 将变量渲染为text文本
// v-for 遍历数组
// v-show 根据一个变量的true或false决定元素是否显示 只是对元素进行 display none 和 block 的设置
// v-if v-else 不符合条件的元素，不在代码里面显示，直接被删除
// v-model 获取输入框的内容
// v-on 绑定点击事件 @
var vm = new Vue({
el: ".app",
data: {
test: '你好我是vue',
url: "http://www.netbian.com/dongman/",
h2html: "<h2>我是h2</h2>",
newsList: [
{ title: '测试新闻1',id: 1 },
{ title: '测试新闻2',id: 2 },
{ title: '测试新闻3',id: 3 },
{ title: '测试新闻4',id: 4 },
{ title: '测试新闻5',id: 5 }
],
isShow: false,
vipLeave: 3,
userName: "张三"
},
methods: {
hello(a) {
console.log(a)
console.log(this.userName)
},
test2() {}
}
})
</script>
</html>

93
历届学生/吴欣阳/每天课程/2021-07-16/vue/tabs.html Normal file
View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,ul,li {
margin: 0;
padding: 0;
}
.tabs {
width: 300px;
margin: 10% auto;
}
.title {
display: flex;
align-items: center;
height: 45px;
justify-content: space-between;
}
.title .active {
color: red;
}
.tabs_content .c_item {
display: none;
}
.tabs_content .active {
display: block !important;
}
</style>
</head>
<body>
<div class="app">
<div class="tabs">
<div class="title">
<div @click="changeTitle(i)" class="tabs_title"
:class="i == currentIndex ? 'active': '' "
v-for="(v,i) in tab">{{ v.title }}</div>
</div>
<div class="tabs_content">
<div class="c_item" :class="i == currentIndex ? 'active' : '' " v-for="(v, i) in tab">
<p v-for="item in v.content">{{ item.content }}</p>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: '.app',
data: {
currentIndex: 0,
tab: [
{
title: '社会',
content: [
{ content: '社会的内容1' },
{ content: '社会的内容2' },
{ content: '社会的内容3' },
]
},
{
title: '军事',
content: [
{ content: '军事的内容1' },
{ content: '军事的内容2' },
{ content: '军事的内容3' },
]
},
{
title: '财经',
content: [
{ content: '财经的内容1' },
{ content: '财经的内容2' },
{ content: '财经的内容3' },
]
}
]
},
methods: {
changeTitle(i) {
this.currentIndex = i
console.log(i)
}
}
})
</script>
</html>

35
历届学生/吴欣阳/每天课程/2021-07-16/vue/笔记.txt Normal file
View File

@@ -0,0 +1,35 @@
vue：mvvm框架
m（model）v（view）vm（modelview）
model 数据 ajax 数据
view 页面
vm：数据和页面
m（model）v（view）c（controller）
model：数据（数据库）
view：页面
controller：控制器
vue
版本变化
vue 2.x
vue 3.x
语法变化：
1：option api 60%
2：class api 10%
3：commposition api 30%
1: 组件基础 https://cn.vuejs.org/v2/guide/components.html
2：prop https://cn.vuejs.org/v2/guide/components-props.html
3：插槽 https://cn.vuejs.org/v2/guide/components-slots.html
4：过渡动画 https://cn.vuejs.org/v2/guide/transitions.html
5：路由：https://router.vuejs.org/zh/guide/
6：混入：https://cn.vuejs.org/v2/guide/mixins.html
7：自定义指令 https://cn.vuejs.org/v2/guide/custom-directive.html
8：过滤器 https://cn.vuejs.org/v2/guide/filters.html

21
历届学生/吴欣阳/每天课程/2021-07-16/笔记.txt Normal file
View File

@@ -0,0 +1,21 @@
nodejs
是js运行在后端服务器上的运行环境
c++ + v8
node
npm 依赖管理工具
npm install 插件名
npm i 插件名 --save 把插件安装到正式阶段 dependencies
npm i 插件名 --save-dev 把插件安装到开发阶段 devdependencies
npm i 插件名 -g 把插件安装到系统全局
npm uninstall 插件名
nodejs 项目必须要有个配置文件
npm init -y
package.json

182
历届学生/吴欣阳/每天课程/2021-07-20/index.html Normal file
View File

@@ -0,0 +1,182 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app">
<lb_header @send="fatherClick" :h_title="title" :gethello="test" user-name="张三">
</lb_header>
<h2>{{ title | str }}</h2>
<div v-title="title" class="ddd" ref="content">中间内容</div>
app 组件
<v-footer @main="zhongz">
<template v-slot:three>
<div class="">three</div>
</template>
<template v-slot:one="slotProps">
<li class="">{{ slotProps.data.title }}</li>
</template>
<template v-slot:two>
<div class="">two</div>
</template>
</v-footer>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var httpPage = {
data() {
return {
page: 1,
totalPage: 0
}
},
methods: {
bottom() {
}
}
}
// 全局组件
Vue.component('lb_header', {
// props: ['h_title'],
props: {
h_title: {
type: String,
default: '默认标题'
},
userName: {
type: String,
default: "你好"
},
gethello: {
type: String,
default: ''
}
},
template: `<h2 @click="setdd">{{ test }} {{ h_title }} {{ userName }} {{gethello}}</h2>`,
data() {
return {
test: '全局组件',
children: '孩子的数据'
}
},
methods: {
setdd() {
this.$emit('send', this.children)
}
}
})
// 局部组件
var lb_footer = {
template: `
<div>
<div>局部组件 {{ hello }} - footer</div>
<button @click="fasong">点我向兄弟传递数据</button>
<ul>
<slot :data="item" v-for="(item,index) in list" name="one"></slot>
</ul>
<slot name="two"></slot>
<slot name="three"></slot>
</div>
`,
mixins: [httpPage],
data() {
return {
hello: '你好',
list: [
{ title: "新闻1", name: '子标题1' },
{ title: "新闻2", name: '子标题2' },
{ title: "新闻3", name: '子标题3' },
]
}
},
created() {
console.log("this.page: ", this.page);
},
methods: {
fasong() {
this.$emit("main", this.hello)
}
}
}
// 父子组件之间相互可以传递数据
// 父 ---> 子 props
// 子 ---> 父 $emit
// ref refs
var vm = new Vue({
el: '.app',
data: {
title: "哈哈哈哈哈哈",
test: '',
},
beforeCreate() {
console.log(this.title);
},
created() {
console.log(this.title);
console.log(this.$refs.content);
},
mounted() {
console.log(this.$refs.content);
},
beforeUpdate() {
console.log("监听到页面发生修改了");
},
watch: {
title: function (newVal, oldVal) {
console.log("watch title === :",newVal, oldVal);
}
},
methods: {
fatherClick(res) {
console.log(res);
},
zhongz(res) {
this.test = res;
console.log(this.test);
}
},
filters: {
str(val) {
return val.substring(0,3)+"..."
}
},
computed: {
test2() {
}
},
directives: {
title (el, binding, vnode) {
document.title = binding.value
}
},
components: {
'v-footer': lb_footer
}
})
</script>
</html>

182
历届学生/吴欣阳/每天课程/2021-07-20/login.html Normal file
View File

@@ -0,0 +1,182 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.router-link-active {
color: red;
}
</style>
</head>
<body>
<div class="app">
<p>
<router-link to="/home">首页</router-link>
<router-link to="/type">分类</router-link>
<router-link to="/car">购物车</router-link>
<router-link to="/me">我的</router-link>
</p>
<router-view></router-view>
</div>
</body>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
const Home = {
template: `<div class="Home">首页</div>`
}
const Type = {
template: `<div class="Type">分类</div>`
}
const Car = {
template: `<div class="Car">购物车</div>`
}
const Me = {
template: `<div class="Me">我的</div>`
}
const Info = {
template: `<div class="Info">详情页</div>`
}
const Login = {
template: `<div class="Login">
<button @click="login">点我登录</button>
</div>`,
methods: {
login() {
localStorage.setItem("token", "123432345")
if (this.$route.query.hasOwnProperty("from")) {
console.log(this.$route.query.from);
this.$router.push({
path: this.$route.query.from
})
} else {
this.$router.back()
}
console.log();
}
}
}
const Reg = {
template: `<div class="Reg">
注册
</div>`
}
var routes = [
{
path: '/home',
component: Home,
meta: {
isLogin: false,
title: '首页'
}
}, // 首页
{
path: '/type',
component: Type,
meta: {
isLogin: false,
title: '分类'
}
}, // 分类
{
path: '/car',
component: Car,
meta: {
isLogin: true,
title: '购物车'
}
}, // 购物车
{
path: '/me',
component: Me,
meta: {
isLogin: true,
title: '我的'
}
}, // 我的
{
path: '/info',
component: Info,
meta: {
isLogin: false,
title: '详情页'
}
}, // 详情页
{
path: '/login',
component: Login,
meta: {
isLogin: false,
title: '登录'
}
}, // 登录
{
path: '/reg',
component: Reg,
meta: {
isLogin: false,
title: '注册'
}
}, // 注册
];
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
});
router.beforeEach((to, from, next) => {
document.title = to.meta.title
// 你访问的那个页面需要登录
if (to.meta.isLogin) {
// 再次判断，你是否登录
// 登录了给你看页面
// 没登陆不给看，并且强制去登录
// 表示未登录，
if (localStorage.getItem("token") == null) {
next({
path: '/login',
query: {
from: to.path
}
})
} else {
next()
}
} else {
next()
}
})
new Vue({
el: '.app',
router,
data() {
return {
}
}
})
</script>
</html>

129
历届学生/吴欣阳/每天课程/2021-07-20/router.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>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/home">首页</router-link>
<router-link to="/about">关于我</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<div>
<router-view></router-view>
</div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Home = {
template: `<div>
<ul>
<li @click="enterInfo(item)" v-for="item in list">{{ item.title }}</li>
</ul>
</div>`,
data() {
return {
list: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' },
]
}
},
methods: {
enterInfo(item) {
console.log(item);
this.$router.push({
name: 'info',
query: {
id: item.id
}
})
}
}
}
const About = { template: '<div>关于我</div>' }
const Info = {
template: `
<div>详情页 {{ $route.query.id }}</div>
` ,
created() {
console.log(this.$route.query);
},
beforeRouteLeave(to, from, next) {
var isLeave = confirm("你确定离开吗？")
if (isLeave) {
next()
}
}
}
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home
},
{
path: '/about',
component: About,
beforeEnter: (to, from, next) => {
console.log("别人正在打算访问about页面");
next()
}
},
{
path: '/info',
name: 'info',
component: Info,
},
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
router.beforeEach((to, from, next) => {
console.log("to: ", to);
console.log("from: ", from);
next()
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
el: '#app',
router
})
</script>
</html>

3151
历届学生/吴欣阳/每天课程/2021-07-20/vue-router.js Normal file
View File

File diff suppressed because it is too large Load Diff

12014
历届学生/吴欣阳/每天课程/2021-07-20/vue.js Normal file
View File

File diff suppressed because it is too large Load Diff

12
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/.babelrc Normal file
View File

@@ -0,0 +1,12 @@
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}

9
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/.editorconfig Normal file
View File

@@ -0,0 +1,9 @@
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

4
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/.eslintignore Normal file
View File

@@ -0,0 +1,4 @@
/build/
/config/
/dist/
/*.js

29
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/.eslintrc.js Normal file
View File

@@ -0,0 +1,29 @@
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}

14
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/.gitignore vendored Normal file
View File

@@ -0,0 +1,14 @@
.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

10
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/.postcssrc.js Normal file
View File

@@ -0,0 +1,10 @@
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {}
}
}

23
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/README.md Normal file
View File

@@ -0,0 +1,23 @@
# cygvy
> A Vue.js project
[百度](https://cn.vuejs.org/v2/guide/installation.html)
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
```
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

41
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/build/build.js Normal file
View File

@@ -0,0 +1,41 @@
'use strict'
require('./check-versions')()
process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, (err, stats) => {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
chunks: false,
chunkModules: false
}) + '\n\n')
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
}
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})

54
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/build/check-versions.js Normal file
View File

@@ -0,0 +1,54 @@
'use strict'
const chalk = require('chalk')
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
const versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
}
]
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}
module.exports = function () {
const warnings = []
for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (let i = 0; i < warnings.length; i++) {
const warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}

BIN
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/build/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

101
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/build/utils.js Normal file
View File

@@ -0,0 +1,101 @@
'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
exports.createNotifierCallback = () => {
const notifier = require('node-notifier')
return (severity, errors) => {
if (severity !== 'error') return
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
notifier.notify({
title: packageConfig.name,
message: severity + ': ' + error.name,
subtitle: filename || '',
icon: path.join(__dirname, 'logo.png')
})
}
}

22
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/build/vue-loader.conf.js Normal file
View File

@@ -0,0 +1,22 @@
'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap
module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
}

92
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/build/webpack.base.conf.js Normal file
View File

@@ -0,0 +1,92 @@
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}

95
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/build/webpack.dev.conf.js Normal file
View File

@@ -0,0 +1,95 @@
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}
})
})

145
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/build/webpack.prod.conf.js Normal file
View File

@@ -0,0 +1,145 @@
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const env = require('../config/prod.env')
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true,
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// keep module.id stable when vendor modules does not change
new webpack.HashedModuleIdsPlugin(),
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig

7
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/config/dev.env.js Normal file
View File

@@ -0,0 +1,7 @@
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})

76
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/config/index.js Normal file
View File

@@ -0,0 +1,76 @@
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 1314, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: false,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.
showEslintErrorsInOverlay: false,
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}

4
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/config/prod.env.js Normal file
View File

@@ -0,0 +1,4 @@
'use strict'
module.exports = {
NODE_ENV: '"production"'
}

13
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>cygvy</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

73
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/package.json Normal file
View File

@@ -0,0 +1,73 @@
{
"name": "cygvy",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "bmy <www.2271608011@qq.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

17
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/src/App.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/about">我的</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>

0
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/src/assets/less/index.less Normal file
View File

BIN
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

113
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/src/components/HelloWorld.vue Normal file
View File

@@ -0,0 +1,113 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

15
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/src/main.js Normal file
View File

@@ -0,0 +1,15 @@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

13
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/src/page/About.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<div class="about">
关于
</div>
</template>
<script>
export default {}
</script>
<style scoped>
</style>

13
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/src/page/Home.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<div class="home">
首页22222222er32d32
</div>
</template>
<script>
export default {}
</script>
<style scoped>
</style>

21
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/src/router/index.js Normal file
View File

@@ -0,0 +1,21 @@
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/page/Home'
import About from '@/page/About'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
})

0
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/static/.gitkeep Normal file
View File

46
历届学生/吴欣阳/每天课程/2021-07-20/新课程/myvueproject/笔记.txt Normal file
View File

@@ -0,0 +1,46 @@
vue
vue-router vue路由管理
vue-cli vue的项目模板创建工具（脚手架）
vue-cli 2.x 老版本
vue-cli 3.x 4.x 新版本
webpack 项目的打包构建工具
dist
|-- css
|-- js
|-- img
|-- index.html
1: build/ vue-cli 启动文件
2: config/ vue-cli 启动的自定义配置文件
3: node_modules 是nodejs项目的依赖文件（存放我们用到的插件源码）
4: src/ 项目源代码
|-- assets 静态资源的 需要被webpack编译才能使用的资源
|-- components 存放公共组件的地方、
|-- router 存放vue-router 的配置文件
|-- App.vue 最外层最顶级的父组件
|-- main.js vue项目的入口文件
5: static 静态资源的
前提：体积比较大，且万年不变的资源
.babelrc: 他是插件：babel 的配置文件,
babel把高版本的js转换为浏览器都可以识别的低版本js代码
.editorconfig 告诉编辑器，使用什么代码规范
.eslintignore eslint 的忽略文件
.eslintrc.js eslint 的配置文件
.gitignore 的忽略文件
.postcssrc.js postcss 专门做css兼容的
index.html 网站唯一的一个html文件 spa（单页web应用）
package.json nodejs的配置文件
README.md 项目的帮助文档

56
历届学生/吴欣阳/每天课程/2021-07-20/笔记.txt Normal file
View File

@@ -0,0 +1,56 @@
【完成】1: 组件基础 https://cn.vuejs.org/v2/guide/components.html
类似于方法的概念
【完成】生命周期
留坑 keep-alive 缓存组件
【完成】2：props https://cn.vuejs.org/v2/guide/components-props.html
【完成】3：插槽 https://cn.vuejs.org/v2/guide/components-slots.html
【完成】4：过渡动画 https://cn.vuejs.org/v2/guide/transitions.html
【完成】5：路由：https://router.vuejs.org/zh/guide/
【完成】6：混入：https://cn.vuejs.org/v2/guide/mixins.html
实现重复代码的灵活抽离封装
【完成】计算属性 computed 运算结果会被缓存起来
【完成】watch 监听器
【完成】7：自定义指令 https://cn.vuejs.org/v2/guide/custom-directive.html
【完成】8：过滤器 https://cn.vuejs.org/v2/guide/filters.html
vuerouter 学习
push
replace
query
http://127.0.0.1?id=1&page=1
:to={ path: '路径', query: {} }
params
http://127.0.0.1/1/1
必须结合 name 进行跳转
:to={ name: '路径', params: {} }
// js
// router-link
this.$route 获取路由参数信息
this.$router 调用路由各种方法的
路由模式：
1：带 # 号的地址 hash 路由
http://127.0.0.1/#/info?id=1
2：不带 # 号的地址 history 路由
http://127.0.0.1/info?id=1

83
历届学生/吴欣阳/项目开发/上课项目/QQ导航.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>Document</title>
<style>
body,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.tag {
background: #1479d7;
overflow: hidden;
height: 50px;
width: 1400px;
margin: 0 auto;
padding-left: 20px;
box-sizing: border-box;
border-radius: 3px;
}
.tag li {
float: left;
line-height: 50px;
width: 79px;
text-align: center;
}
.tag li a {
color: white;
padding: 4px 5px;
}
.tag li a:hover {
color: #14539a;
background-color: #cbe1ed;
}
</style>
</head>
<body>
<ul class="tag">
<li><a href="">新闻</a></li>
<li><a href="">视频</a></li>
<li><a href="">图片</a></li>
<li><a href="">军事</a></li>
<li><a href="">NBA</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>
<li><a href="">游戏</a></li>
</ul>
</body>
</html>

119
历届学生/吴欣阳/项目开发/上课项目/ajax案例/css/previewImage.css Normal file
View File

@@ -0,0 +1,119 @@
body,
ul,
li,
a,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.smallImg {
width: 100px;
}
.hidden {
display: none;
}
.zhezhao {
width: 100vw;
height: 100vh;
background: #000;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 998;
opacity: .5;
}
.preview {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 999;
display: flex;
justify-content: center;
}
.closed {
width: 40px;
height: 40px;
font-size: 24px;
color: #fff;
background-color: #606266;
text-align: center;
line-height: 35px;
position: absolute;
right: 10px;
top: 10px;
border-radius: 100%;
z-index: 999;
}
.action .d {
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
font-size: 24px;
color: #fff;
background-color: #606266;
border-color: #fff;
position: absolute;
text-align: center;
line-height: 40px;
border-radius: 100%;
z-index: 999;
}
.left {
left: 40px;
}
.right {
right: 40px;
}
.operation {
left: 50%;
bottom: 30px;
transform: translateX(-50%);
width: 282px;
height: 44px;
padding: 0 23px;
background-color: #606266;
border-color: #fff;
position: absolute;
border-radius: 22px;
display: flex;
justify-content: space-around;
align-items: center;
}
.operation li {}
.operation li i {
font-size: 23px;
color: #fff;
}
.xz {
display: inline-block;
transform: rotateY(180deg);
}
.mainImg {
height: 100%;
}

70
历届学生/吴欣阳/项目开发/上课项目/ajax案例/index.html Normal file
View File

@@ -0,0 +1,70 @@
<!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>
<ul>
</ul>
<button>下一页</button>
</body>
<script src="js/ajax.js"></script>
<script src="js/utils.js"></script>
<script>
var page = 0, totalPage = 0;
function getIndexList() {
ajax.get({
url: 'http://127.0.0.1:3000/api/json/classList',
data: {
id: 130,
page: page
},
success: (res) => {
totalPage = res.result.total_page
renderList(res.result)
},
error: (err) => {
console.log(err);
},
})
}
function renderList(list) {
list.data.forEach(v => {
$("ul").innerHTML +=
`
<li>
<a href="./info.html?id=${v.id}">
<img width="200" src="${replace(v.preview)}" alt="">
<p>${v.title}</p>
</a>
</li>
`
})
}
$("button").onclick = function () {
page+=1;
if (page <= totalPage) {
getIndexList();
} else {
alert("没有数据了")
}
}
getIndexList()
</script>
</html>

74
历届学生/吴欣阳/项目开发/上课项目/ajax案例/info.html Normal file
View File

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/previewImage.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_pg56sl6byua.css">
</head>
<body>
<div class="info">
</div>
<button>下一页</button>
</body>
<script src="js/ajax.js"></script>
<script src="js/utils.js"></script>
<script src="./js/previewImage.js"></script>
<script>
var id = location.search.split("=")[1],
page = 1, total_page = 0, beishu = -1;
function GetInfo() {
ajax.get({
url: 'http://127.0.0.1:3000/api/json/info',
data: {
id: id,
page: page
},
success: (res) => {
total_page = res.result.total_page;
beishu+=1;
renderImg(res.result.data)
},
error: (err) => {
console.log(err);
},
})
}
function renderImg(list) {
var newImg = []
list.forEach(v => {
newImg.push(replace(v.src))
$(".info").innerHTML += `<img width="300" src="${replace(v.src)}" alt="">`
});
_(".info img").forEach((v,i) => {
v.onclick = () => {
console.log("newImg: ", newImg)
console.log("i: ", i)
var c = new PreviewImage({
image: newImg,
showIndex: i - (beishu * 5)
});
c = null
}
})
}
$("button").onclick = function () {
page+=1;
if (page <= total_page) {
GetInfo();
} else {
alert("没有数据了")
}
}
GetInfo()
</script>
</html>

48
历届学生/吴欣阳/项目开发/上课项目/ajax案例/js/ajax.js Normal file
View File

@@ -0,0 +1,48 @@
class Ajax {
// url 接口地址
// 请求参数
// 请求方法
// 请求成功的回调
// 请求失败的回调
http = new XMLHttpRequest();
constructor () {
}
//http://127.0.0.1:3000/api/json/index ?id=1&page=2
get(option) {
var params = ""
for (const key in option.data) {
params+= `&${key}=${option.data[key]}`
}
params = params.replace("&", "?")
option.url = option.url + params
this.http.open("GET", option.url);
this.http.send()
this.onreadystatechange(option)
}
post(option) {
this.http.open("POST", option.url);
this.http.setRequestHeader('Content-Type', 'application/josn');
this.http.send(JSON.stringify(option.data))
this.onreadystatechange(option)
}
onreadystatechange(callback) {
this.http.onreadystatechange = () => {
if (this.http.readyState == 4) {
if (this.http.status == 200) {
callback.success(JSON.parse(this.http.response))
} else {
callback.error(this.http)
}
}
}
}
}
var ajax = new Ajax()

267
历届学生/吴欣阳/项目开发/上课项目/ajax案例/js/previewImage.js Normal file
View File

@@ -0,0 +1,267 @@
class PreviewImage {
// 属性都是全局的
body = this.$("body");
option = {};
isBackMove = false;
x1 = 0;
y1 = 0;
l = 0;
t = 0;
constructor(option) {
if (!option.hasOwnProperty("image")) {
throw new Error("参数image缺少，请检查")
}
if (!option.hasOwnProperty("showIndex")) {
throw new Error("参数showIndex缺少，请检查")
}
this.option = option
console.log(this.option);
this.created();
this.BindClose();
this.BindPrevious();
this.BindNext();
this.BindSuoXiao();
this.BindFangDa();
this.BindFullScreen();
this.BindXuanZhuan();
this.MouseEvent();
}
// 1：把图片预览的html插入到网页上
created() {
this.body.insertAdjacentHTML("beforeend", `<div class="previewImage">
<div class="zhezhao"></div>
<div class="preview">
<div class="closed">x</div>
<div class="action">
<div class="left d">&lt;</div>
<div class="right d">&gt;</div>
</div>
<img class="mainImg" style="transform: scale(1) rotate(0deg);margin-left: 0;margin-top: 0;"
src="${this.option.image[this.option.showIndex]}" alt="">
<ul class="operation">
<li>
<i class="iconfont icon-suoxiao suoxiao"></i>
</li>
<li>
<i class="iconfont icon-fangda fangda"></i>
</li>
<li>
<i class="iconfont icon-fullscreen fullscreen"></i>
</li>
<li class="xz">
<i class="iconfont icon-shuaxin leftshuaxin"></i>
</li>
<li>
<i class="iconfont icon-shuaxin rightshuaxin"></i>
</li>
</ul>
</div>
</div>`)
}
// 缩小
BindSuoXiao() {
this.$(".suoxiao").onclick = () => {
var value = this.Scale() - 0.2;
if (value != 0) {
this.$(".mainImg").style.transform = `scale(${value}) rotate(${this.Rotate()}deg)`
}
}
}
// 全屏
BindFullScreen() {
this.$(".fullscreen").onclick = () => {
// true 缩小
if (this.$(".fullscreen").classList.contains("icon-fullscreen")) {
this.$(".fullscreen").classList.remove("icon-fullscreen")
this.$(".fullscreen").classList.add("icon-suoxiao1")
this.$(".mainImg").style = `
transform: scale(2) rotate(${this.Rotate()}deg);
margin-left: 0;
margin-top: 0;
`
// 放大
} else {
this.$(".fullscreen").classList.remove("icon-suoxiao1")
this.$(".fullscreen").classList.add("icon-fullscreen")
this.$(".mainImg").style = `
transform: scale(1) rotate(0deg);
margin-left: 0;
margin-top: 0;
`
}
}
}
// 放大
BindFangDa() {
this.$(".fangda").onclick = () => {
this.$(".mainImg").style.transform = `scale(${this.Scale() + 0.2}) rotate(${this.Rotate()}deg)`
}
}
// 旋转
BindXuanZhuan() {
// -90
this.$(".leftshuaxin").onclick = () => {
this.xuanzhuan(-90)
}
// +90
this.$(".rightshuaxin").onclick = () => {
this.xuanzhuan(90)
}
}
MouseEvent() {
// 鼠标滑动的时候放大缩小网页
document.onmousewheel = (e) => {
if (e.wheelDelta == 210) {
this.$(".fangda").onclick()
} else {
this.$(".suoxiao").onclick()
}
}
// document.addEventListener('mousewheel',(e) => {
// if (e.wheelDelta == 210) {
// this.$(".fangda").onclick()
// } else {
// this.$(".suoxiao").onclick()
// }
// },false)
// 鼠标在图片上按下的时候
this.$(".mainImg").onmousedown = (e) => {
e.preventDefault()
this.isBackMove = true
//获取鼠标按下的坐标
this.x1 = e.clientX;
this.y1 = e.clientY;
this.l = parseInt(this.$(".mainImg").style.marginLeft);
this.t = this.$(".mainImg").offsetTop;
this.ImgMove(".mainImg")
}
// 按住拖动，但鼠标从图片上离开的
// 给背景层绑定鼠标移动事件
this.$(".mainImg").onmouseleave = () => {
console.log("鼠标从图片上离开的，给背景层绑定鼠标移动事件");
if (this.isBackMove) {
this.ImgMove(".preview")
}
}
// 鼠标在背景层上松开
this.$(".preview").onmouseup = (ev) => {
console.log("鼠标在背景层上松开");
this.isBackMove = false
this.$(".mainImg").onmousemove = null;
this.$(".preview").onmousemove = null;
}
// 鼠标在图片上松开
this.$(".mainImg").onmouseup = (ev) => {
console.log("鼠标在图片上松开");
this.$(".mainImg").onmousemove = null;
this.$(".preview").onmousemove = null;
}
}
ImgMove(className) {
this.$(className).onmousemove = (ev) => {
var x2 = ev.clientX;
var y2 = ev.clientY;
//计算出鼠标的移动距离
var x = x2 - this.x1;
var y = y2 - this.y1;
//移动的数值与元素的left，top相加，得出元素的移动的距离
var lt = y + this.t;
var ls = x + this.l;
//更改元素的left，top值
this.$(".mainImg").style.marginLeft = ls + 'px';
this.$(".mainImg").style.marginTop = lt + 'px';
}
}
xuanzhuan(offset) {
this.$(".mainImg").style.transform = `scale(${this.Scale()}) rotate(${this.Rotate() + offset}deg)`
}
// 关闭按钮
BindClose() {
//1 var ddddc = this;
//2 es6 => 箭头函数
console.log("this1: ", this);
// this 指向
this.$(".closed").onclick = () => {
this.body.removeChild(this.$(".previewImage"))
}
}
// 上一页
BindPrevious() {
this.$(".left").onclick = () => {
this.option.showIndex -= 1;
if (this.option.showIndex < 0) {
this.option.showIndex = this.option.image.length - 1
}
this.$(".mainImg").src = this.option.image[this.option.showIndex]
}
}
// 下一页
BindNext() {
this.$(".right").onclick = () => {
this.option.showIndex += 1;
if (this.option.showIndex > this.option.image.length - 1) {
this.option.showIndex = 0
}
this.$(".mainImg").src = this.option.image[this.option.showIndex]
}
}
Scale() {
return Number(this.$(".mainImg").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
}
Rotate() {
return Number(this.$(".mainImg").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
}
$(className) {
return document.querySelector(className)
}
}

12
历届学生/吴欣阳/项目开发/上课项目/ajax案例/js/utils.js Normal file
View File

@@ -0,0 +1,12 @@
function $(className) {
return document.querySelector(className);
}
function _(className) {
return document.querySelectorAll(className);
}
function replace(url) {
var s = "http://47.114.153.249:3000/api/json/url?url=";
return url.replace(s,'')
}

BIN
历届学生/吴欣阳/项目开发/上课项目/car.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

25
历届学生/吴欣阳/项目开发/上课项目/js案例/funtion.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
function a (price) {
console.log(price);
price = price -1
return price;
}
var c = a(10);
console.log(c);
</script>
</html>

41
历届学生/吴欣阳/项目开发/上课项目/js案例/game/css/index.css Normal file
View File

@@ -0,0 +1,41 @@
body{
margin: 0;
padding: 0;
background: #87d3ff url("../img/back.png");
height: 100vh;
background-size: 100% 100%;
position: relative;
overflow: hidden;
}
.people {
position: absolute;
bottom: 0;
width: 100px;
}
.right {
transform: rotateY(180deg);
}
.apple {
width: 40px;
position: absolute;
top: 0px;
}
.boom {
width: 60px;
position: absolute;
top: 0px;
}
.motion {
transition: all ease 0.5s;
}
.totalNums {
position: absolute;
right: 30px;
top: 30px;
font-size: 20px;
color: red;
}

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/game/img/apple.mp3 Normal file
View File

Binary file not shown.

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/game/img/apple.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 711 KiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/game/img/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 272 KiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/game/img/bomb.mp3 Normal file
View File

Binary file not shown.

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/game/img/bombimg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 171 KiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/game/img/boom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/game/img/pepop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 631 KiB

16
历届学生/吴欣阳/项目开发/上课项目/js案例/game/index..html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titl2e</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="totalNums">0分</div>
<img src="./img/pepop.png" style="left: 0" class="people" alt="">
<audio class="appleaudio" hidden controls src="./img/apple.mp3"></audio>
<audio class="boomaudio" hidden controls src="./img/bomb.mp3"></audio>
</body>
<script src="./js/index.js"></script>
</html>

136
历届学生/吴欣阳/项目开发/上课项目/js案例/game/js/index.js Normal file
View File

@@ -0,0 +1,136 @@
var body = $("body"),
people = $(".people"),
clientWidth = document.body.clientWidth,
clientHeight = document.body.clientHeight,
totalNums = 0;
// 1：让人物移动起来
// 2：生成炸弹和苹果（随机生成）
// 3：炸弹 苹果 和 人物的碰撞检测
// 超过屏幕删除
// 如果没有超过屏幕，需要进行碰撞检测
// 炸弹 - 分数
// 苹果 + 分数
body.onmousemove = function (e) {
var x = e.x, moveX = x - 100;
people.style.left = `${moveX < 0 ? 0 : moveX}px`;
// 右移动
if (moveX > clientWidth / 2) {
people.classList.remove("right")
// 左移动
} else {
people.classList.add("right")
}
}
function CreatedResources(type) {
var x = parseInt(Math.random() * clientWidth) - (type == 'apple'? 40 : 60) ;
x < 0 ? x = 0 : x;
var apple = document.createElement("img");
apple.src = type == "apple" ? "./img/apple.png" : "./img/boom.png";
apple.className = type == "apple" ? "apple motion" : "boom motion";
apple.style.left = `${x}px`;
apple.style.top = `${type == 'apple'? -40 : -60}px`;
body.appendChild(apple);
motion(apple, type)
}
function motion (el, type) {
var apple = 0, bmob = 0
if (type == "apple") {
apple = setInterval(() => {
el.style.top = `${parseInt(el.style.top) + 30}px`;
if (parseInt(el.style.top) > clientHeight) {
body.removeChild(el)
clearInterval(apple)
} else {
JudgingCollision(el, apple)
}
},60)
} else {
bmob = setInterval(() => {
el.style.top = `${parseInt(el.style.top) + 50}px`;
if (parseInt(el.style.top) > clientHeight) {
setTimeout(()=> {
try {
body.removeChild(el)
clearInterval(bmob)
} catch (e) {}
},500)
} else {
JudgingCollision(el,bmob)
}
},80)
}
}
/**
* 判断是否碰撞
* @constructor
*/
function JudgingCollision(span, timeout) {
var people = $(".people");
var peopleX1 = parseInt(people.style.left);
var peopleX2 = parseInt(people.style.left) + people.clientWidth;
var peopleX3 = people.offsetTop;
var peopleX4 = people.offsetTop + people.clientHeight;
var spanX1 = parseInt(span.style.left);
var spanX2 = parseInt(span.style.left) + span.clientWidth;
var spanX3 = parseInt(span.style.top);
var spanX4 = parseInt(span.style.top) + span.clientHeight;
// 碰撞检测
if(peopleX4<spanX3 || peopleX1>spanX2 || peopleX3>spanX4 || peopleX2<spanX1){
// 没碰上
}else{
if (span.classList.contains("apple")) {
console.log("苹果");
totalNums+=30;
$(".appleaudio").play()
$(".totalNums").innerText = `${totalNums}分`
setTimeout(()=>{
body.removeChild(span)
clearInterval(timeout)
},540)
} else {
totalNums-=40;
span.src = "./img/bombimg.png"
$(".boomaudio").play()
$(".totalNums").innerText = `${totalNums}分`
setTimeout(()=>{
body.removeChild(span)
clearInterval(timeout)
},540)
console.log("炸弹")
}
}
}
function Created() {
var random = parseInt(Math.random() * 100);
if (random <= 80) {
CreatedResources("bomb")
console.log("生成炸弹")
} else {
CreatedResources("apple")
console.log("生成苹果")
}
}
setInterval(() => {
Created();
},1000)
function $(className) {
return document.querySelector(className)
}

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/img/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

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