first commit

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

View File

@@ -0,0 +1,120 @@
<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="tel:15056042604" target="_blank"> 百度 </a>
<a href="https://www.baidu.com/" target="_blank"> 百度 </a>
<img height="100px" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="抱歉,图片无法显示">
<!-- 无序列表 注释 实现重复性布局 -->
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<input type="text" placeholder="输入用户名" />
<input type="number" placeholder="输入手机号" />
<input type="password" placeholder="输入密码" />
<input type="date" />
<h2>性别</h2>
<input type="radio" name="sex" />
<input type="radio" name="sex" />
<hr>
<span>你好 留坑重点提</span>
<!-- 放图标的 icon -->
<i>你好</i>
<!-- 管理后台 -->
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<h2>爱好寄存器会比较好 <br>
全部为湖北地区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;为加快电气接口为</h2>
<input type="checkbox" name="aihao" />
<input type="checkbox" name="checkbox" />
<input type="checkbox" name="checkbox" />
<input type="checkbox" name="checkbox" />
<input type="checkbox" name="checkbox" />
<input type="button" value="登 录">
<button>登 录</button>
<input type="submit" value="登 录">
<input type="reset" value="登 录">
<select>
<option value="">-请选择-</option>
<option value="">合肥</option>
<option value="">南京</option>
</select>
<textarea placeholder="输入留言"></textarea>
<video src="https://www.runoob.com/try/demo_source/movie.ogg" controls
poster="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" muted autoplay loop></video>
<!-- <audio src=""></audio> -->
<form action="http://127.0.0.1/login.php">
<input type="text" name="user_name" placeholder="输入用户名" />
<input type="number" name="user_pwd" placeholder="输入手机号" />
<input type="submit" value="登 录">
<input type="reset" value="清除">
<input type="button" value="登 录">
</form>
<p>
<strong>菜鸟教程</strong> (www. <big>runoob</big> .com)提供了 <small>编程</small> 的基 <em>础技</em> 术教程, 介绍了HTML、CSS、Javascript、 <del>Python,Java</del> ,Ruby,C,PHP , MySQL等各种编程 <center>语言</center> 的基础知识。 同时本站中也提供了大量的在 32 <sub></sub> <sup></sup>
</p>
<span>你好</span>
<div>你好安静安静安静安静安静</div>
</body>
</html>

View File

@@ -0,0 +1,107 @@
web 前端开发
web
前端
html 人的骨骼 画结构
一种标签标记语言(超本文)
标签: 一组具有特殊功能的单词
<标签名 开始></标签名 结束>
html
head 头 这里面的代码是给浏览器看的,完成某些操作、
title 设置标题
meta 元数据
标签的分类:
块标签:可以独占一行的标签
可以通过css设置 宽高
div h1 ~ h6, ul li , p
行标签:不可以独占一行的标签
不可以通过css设置 宽高
a span img
作用:为了实现网页的布局
body 身体 用户可视区域
div 实现网页结构的划分。
结构划分要点:
网页最基本的结构:
header
content
footer
其次:
宽度满屏的单独用div画一个一般在header里面
一般菜单 和 logo 都在 header里面
很多宽度都一致的放content
重复性布局 用 ul被重复项 放 li 标签里面
还可以按照颜色,分割线,布局来划分结构
一个功能模块的应该放在一个div内部 多个 布局 在一行一定要在外层套父div
如果div内部只有一个标签那么div可以不写
结构学习重点:
1先把网站用截图的方式画出结构图
2在结构图合理没问题的情况下参考自己的结构图分屏左边放图右边放编辑器
去写代码实现布局,实现布局的时候参考上面的 【结构划分要点】
3写完后再想一遍结构加深自己的印象
px 像素
rem vw vh
css 人的外观(化妆品)
层叠样式表
javascriptjs 人的思想
运行在浏览器上的脚本 编程语言
1 原生js + jq
2 过渡阶段 mvc
3 mvvm
三个阶段
后端
数据库
html4
html5

View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index2</title>
<style>
.box {
width: 200px;
height: 200px;
display: inline-block;
/* padding: 10px; 上 右 下 左 */
/* padding: 10px 20px; 上下 左右 */
/* padding: 10px 20px 30px; 上 左右 下 */
/* padding: 10px 20px 30px 40px; 上 右 下 左 */
/* padding-left: 10px; */
/* border: 10px solid #000; */
/* border-top: 10px solid #000;
border-right: 10px solid rgb(218, 255, 10);
border-bottom: 10px solid rgb(34, 0, 255);
border-left: 10px solid rgb(15, 255, 91); */
}
.box1 {
background: red;
}
.box2 {
background: blue;
}
.main p:hover+h3 {
display: block;
}
.main h3 {
display: none;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<!-- <div class="main">
<p>悬浮我</p>
<h3>你好</h3>
</div> -->
</body>
</html>

View File

@@ -0,0 +1,3 @@
h2 {
color: green !important;
}

View File

@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
.one,
.three {
color: blue;
}
.two {
color: green;
}
.main > a:hover {
color: yellow;
}
input:focus {
width: 300px;
}
/* ul li:nth-child(2n + 1) {
color: rgb(55, 255, 0);
} */
ul li:first-child {
color: blue;
}
ul li:last-child {
color: rgb(255, 0, 251);
}
.test::before{
content: "before -";
}
.test::after{
content: "- after";
}
.test::selection {
background: yellow;
}
</style>
</head>
<body>
<div class="" style="color: red;font-size: 38px;">你好</div>
<h2 class="one">你好1</h2>
<h2 class="two">你好2</h2>
<h2 class="three">你好3</h2>
<h3>啊哈哈吧</h3>
<div class="main">
<h3>对对对</h3>
<a href="">你好wwww</a>
<a href="">哈哈哈</a>
<div class="test">
<a href="">哈哈哈哈a</a>
</div>
</div>
<input type="text" placeholder="输入用户名">
<p class="test">你好</p>
<ul>
<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>
<li>列表11</li>
<li>列表12</li>
<li>列表13</li>
<li>列表14</li>
<li>列表15</li>
<li>列表16</li>
<li>列表17</li>
<li>列表18</li>
<li>列表19</li>
<li>列表20</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,108 @@
css 层叠样式表 做美化
css 三种写法
内部写法 最高
内联写法
外链写法
写法顺序。在后面覆盖前面的
提升优先级:
!important
css 写法规则
选择器 {
css 属性名css属性值;
css 属性名css属性值;
css 属性名css属性值;
}
选择器
标签选择器 清除css样式的时候用一下
类选择器 class .
id 选择器 #
默认口头约定,名字不能重复
通配符选择器 *
伪类选择器
hover
focus
选择多个
选择1, 选择器2 {
}
嵌套关系
选择1 选择器2 {
}
选择1同级最近的一个选择2
选择1 + 选择2 {
}
选中 选择1 里面最外层的选择器2
选择1>选择器2 {
}
相对路径
./ 当前路径
/ 根路径
../ 返回上一层
绝对路径
C:\Users\bmy\Desktop\fontendnine\每天上课\2022-05-31\index.css
盒子模型
具有宽高属性的标签
外边距 margin
内边距 padding
边框 border
内容
标准盒子模型
元素真实宽高 = 内容的宽高 + padding + border
怪异盒子模型IE盒子模型
box-sizing: border-box;
内容的宽高 = 元素真实宽高 - padding + border
display:
none
inline 转化为行标签
block 转化为块标签
inline-block 转化为行内块标签 放一行

View File

@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>background</title>
<style>
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
input {
width: 240px;
height: 38px;
border: none;
outline: none;
/*
background: #eee;
background-image: url("./search.png");
background-repeat: no-repeat;
background-size: 18px;
background-position: 207px center; */
background: #eee url("./search.png") no-repeat 207px center;
background-size: 18px;
border-radius: 20px;
padding: 0;
padding-left: 20px;
padding-right: 40px;
box-sizing: border-box;
}
.menu {
width: 100vw;
overflow-x: scroll;
}
.menu ul {
width: 1230px
}
.menu ul li {
display: inline-block;
}
.item {}
.item img {
width: 50px;
height: 50px;
vertical-align: middle;
}
</style>
</head>
<body>
<input type="text" placeholder="输入关键字">
<div class="menu">
<ul>
<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>
<li>标题11</li>
<li>标题12</li>
<li>标题13</li>
<li>标题14</li>
<li>标题15</li>
<li>标题16</li>
<li>标题17</li>
<li>标题18</li>
<li>标题19</li>
<li>标题20</li>
</ul>
</div>
<div class="item">
<img src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="">
<span>你好</span>
</div>
</body>
</html>

View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
float: left;
}
.bo1 {
background: red;
}
.bo2 {
background: blue;
}
.bo3 {
background: green;
}
</style>
</head>
<body>
<div class="main">
<div class="box bo1"></div>
<div class="box bo2"></div>
<div class="box bo3"></div>
</div>
<div class="conetnt">
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
</div>
</body>
</html>

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>Document</title>
<style>
body,h1,h2,h3,h4,h5,h6,ul,li {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
@font-face {
font-family: "test";
src: url("./Oxanium-Regular.ttf");
}
h1 {
font-family: test;
line-height: 30px;
}
.box {
width: 200px;
height: 200px;
}
.box1 {
background: red;
line-height: 200px;
}
.box2 {
background: rgb(169, 169, 169);
}
.title {
font-weight: bolder;
}
</style>
</head>
<body>
<a href="">你好</a>
<div class="box box1">
<p>你好1</p>
</div>
<div class="title">今天天气不好</div>
<div class="box box2">
爱时间彼此机器臂对不起爱时间彼此机器臂对不起爱时间彼此机器臂对不起爱时间彼此机器臂对不起爱时间彼此机器臂对不起爱时间彼此机器臂对不起爱时间彼此机器臂对不起爱时间彼此机器臂对不起爱时间彼此机器臂对不起爱时间彼此机器臂对不起爱时间彼此机器臂对不起爱时间彼此机器臂对不起爱时间彼此机器臂对不起爱时间彼此机器臂对不起
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 996 B

View File

@@ -0,0 +1,38 @@
text-decoration: none; 去除a标签的下划线
font-family
line-height 设置行高
设置单行文字的 垂直对齐, 数值和父元素高度一样
text-align: center;
设置水平方向的对其方式
注意:
line-height
text-align
div内部行内标签设置文字div内部的文字对齐
块标签 内部 块标签 要居中的时候
margin: 0 auto
font-weight 加错
letter-spacing 设置字符间距
text-shadow: x轴偏移 y轴偏移 阴影模糊度 阴影颜色; 文字阴影
box-shadow: 盒子阴影 一般给块标签设置的
border: none; 去除边框
outline: none; 去除外边框
border-radius 圆角
background-attachment: fixed; 背景图不随页面滚动
overflow: scroll; hidden 决定超过父元素的部分如何显示
float 浮动 让元素放一行
子元素设置浮动后,父元素就会没有高度,解决方案:
手动设置height
overflow: hidden;
clear: both;

View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
height: 3000px;
}
.box {
float: left;
width: 200px;
height: 200px;
}
.box_1 {
background: red;
position: relative;
left: 85px;
top: 54px;
}
.box_2 {
background: yellow;
}
.box_3 {
background: green;
}
.box_3_1 {
width: 100px;
height: 100px;
background: black;
position: absolute;
}
.box_4 {
background: blue;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box box_1"></div>
<div class="box box_2"></div>
<div class="box box_3">
<div class="box_3_1"></div>
</div>
<div class="box box_4"></div>
</body>
</html>

View File

@@ -0,0 +1,31 @@
定位:
把元素按照你的想法放在网页的如何一个位置!!!
相对定位 relative
当元素被设置相对定位后元素飘到3维空间里面了
他原本的位置还在,没有被删除
他的定位参考对象就是原本位置的左上角
绝对定位 absolute
当元素被设置绝对定位后元素飘到3维空间里面了
他原本的位置不在,被删除
他的定位参考对象:
父元素
父元素如果有定位,那么参考父元素的位置来
父元素如果没有定位,那么参考浏览器来
使用场景:
子元素绝对定位的时候,一般都在最近父元素上开启 相对定位
固定定位 fixed
当元素被设置绝对定位后元素飘到3维空间里面了
他原本的位置不在,被删除
他的定位参考对象是屏幕

View File

@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex</title>
<style>
/* 清除浏览器默认样式 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
html {}
li {
list-style: none;
}
input {
border: none;
outline: none;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}
ul {
display: flex;
height: 40px;
background: #8d8d8d;
align-items: center;
}
li {}
</style>
</head>
<body>
<ul>
<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>
</body>
</html>

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>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background: red;
transition: all 10s ease;
}
.box:hover {
height: 150px;
width: 150px;
border-radius: 100%;
background: #000;
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

View File

@@ -0,0 +1,37 @@
<!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>
.box {
width: 200px;
height: 200px;
border-radius: 100%;
background: red;
animation: anm 2s linear infinite;
}
@keyframes anm {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box">
你好
</div>
</body>
</html>

View File

@@ -0,0 +1,55 @@
平滑过渡
一种样式转变到另一个的时候
transform
translate() 和定位组合使用,实现元素快速的水平垂直居中
translateX
translateY
rotate() 旋转一定的度数 deg
scale() 放大和缩小元素
skew() 倾斜
matrix()
弹性盒子
在网页中实现快速布局(元素对齐,居中)
13 个css属性
display flex 开启弹性盒子 父元素上
子元素的浮动,清除浮动都将失效
7 应用在父元素上
align-items 垂直对齐
justify-content 水平对齐
flex-wrap 实现自动换行 需要手动设置一样一行能放下多少个元素
flex-direction 改变元素的排列方向
需要注意
align-items
justify-content
作用相反
align-content 多行对齐
6 应用在子元素上
order 改变元素的排列顺序 数值越小越靠前
flex-grow 元素的放大比例
flex-shrink 元素的缩小比例
flex 一般写一个数值,代表 flex-grow
flex-basis
align-self

View File

@@ -0,0 +1,37 @@
<!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 src="./rem.js"></script>
<style>
body {
margin: 0;
}
.box {
width: 3.75rem;
height: 3.75rem;
float: left;
}
.box_1 {
background: red;
font-size: .4rem;
}
.box_2 {
background: yellow;
}
</style>
</head>
<body>
<div class="box box_1">你好</div>
<div class="box box_2"></div>
</body>
</html>

View File

@@ -0,0 +1,12 @@
; (function (doc, win, undefined) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (clientWidth === undefined) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (doc.addEventListener === undefined) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window);

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>媒体查询</title>
</head>
<body>
</body>
</html>

View File

@@ -0,0 +1,14 @@
rem
弹性盒子 布局兼容
rem 尺寸兼容
真实的尺寸 = 你写的rem尺寸 * html上的font-size(16)
媒体查询
通过 css 去判断你的屏幕宽度,然后设置对应的兼容代码 响应式兼容
js

View File

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

View File

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

View File

@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件</title>
</head>
<body>
<button class="one">点我</button>
<button class="two" onclick="test()">哈哈哈</button>
<button class="three" >哈哈哈22333</button>
<a href="https://www.baidu.com/">百度</a>
</body>
<script>
// 事件
// 事件有三要素
// 事件源 事件类型 事件处理函数
// 事件冒泡
var a = document.querySelector(".one")
// a.innerHTML = "<span>你好</span>"
console.dir(a);
document.querySelector("a").onclick = function (e) {
// 阻止默认事件
e.preventDefault();
console.log("hahaah");
}
a.onclick = function (event) {
console.log(event);
alert("点我干什么1")
}
// function test() {
// alert("two")
// }
// document.querySelector(".three").addEventListener('click', function() {
// alert("哈哈哈1")
// })
// document.querySelector(".three").addEventListener('click', function() {
// alert("哈哈哈2")
// })
// var dom = {
// tagName: 'div',
// className: 'main',
// idName: null,
// children: [
// {
// tagName: 'h2',
// className: 'title',
// idName: null,
// children: [
// {
// tagName: 'img',
// className: null,
// idName: null,
// children: null
// }
// ]
// },
// {
// tagName: 'button',
// className: null,
// idName: null,
// children: [
// {
// tagName: '#text',
// className: null,
// idName: null,
// children: null
// }
// ]
// }
// ]
// }
// 虚拟domjs对象
// 影子dom
// 真实dom
</script>
</html>

View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="main">
<h2>你好</h2>
</div>
</body>
<script>
document.querySelector(".main").onclick = function () {
alert("详情")
}
document.querySelector(".main h2").onclick = function (e) {
e.stopPropagation()
alert("增加数量")
}
</script>
</html>

View File

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

View File

@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
border: 1px solid #000;
padding: 5px 10px;
}
</style>
</head>
<body>
</body>
<script>
// 条件语句
// var money = 10
// if (money > 50) {
// console.log("去吃好吃的");
// } else {
// console.log("简单吃一点");
// }
// 简写 三元运算符
// money > 50 ? console.log("去吃好吃的") : console.log("简单吃一点");
var cj = 98;
if (cj < 60 && cj >= 0) {
console.log("不及格");
} else if (cj >= 60 && cj <= 70) {
console.log("一般");
} else if (cj > 70 && cj <= 80) {
console.log("普通");
} else if (cj > 80 && cj <= 90) {
console.log("良");
} else if (cj > 90 && cj <= 100) {
console.log("优秀");
} else {
console.log("分数不正确");
}
// if switch
// switch 对固定的数值进行判断,一般代码比较简洁
var vipType = 0; // 0 1 2
switch (vipType) {
case 1:
console.log("普通vip");
break;
case 0:
console.log("普通用户");
break;
case 2:
console.log("超级vip");
break;
default:
console.log("不知道你是什么用户")
break;
}
// for (循环起始变量;循环结束条件;循环递增) {
// }
// for (var i = 1; i <= 100; i++) {
// console.log(i);
// }
// var i = 101;
// while (i <= 100) {
// console.log(i);
// i++;
// }
// do {
// console.log(i);
// i++;
// } while (i <= 100);
// 九九乘法表
var result = "";
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
// es6 新的字符串拼接方案
// `是字符串` ${写的是变量}
// result += j + " x " + i + " = " + i * j
result += `<span>${j} x ${i} = ${i * j}</span> `
}
result += " <br/><br/>"
}
document.write(result)
console.log(result);
</script>
</html>

View File

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

View File

@@ -0,0 +1,51 @@
class Ajax {
constructor() {
this.ajax = new XMLHttpRequest();
}
/**
*
* @param {*} params
* {
* url: '',
* data: {
* id: 1,
* page: 2
* },
* header: {
* 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
* }
* }
*/
get(params) {
return new Promise((success, error) => {
var str = ""
for (const key in params.data) {
str += `&${key}=${params.data[key]}`
}
str = str.replace("&", "?")
this.ajax.open("GET", `${params.url}${str}`)
this.ajax.send()
this.readystatechange(success, error)
})
}
post() { }
readystatechange(success, error) {
this.ajax.onreadystatechange = () => {
if (this.ajax.readyState == 4) {
if (this.ajax.status == 200) {
var data = JSON.parse(this.ajax.responseText)
// console.log(data);
success(data)
} else {
error(this.ajax)
}
}
}
}
}
var ajax = new Ajax();

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>ajax封装</title>
</head>
<body>
</body>
<script src="./ajax.js"></script>
<script>
// var result = ajax.test().test2()
// console.log(result);
// 异步 转 同步 callback 回调
ajax.get({
url: 'http://127.0.0.1/my.php',
data: {
id: 1,
page: 2
},
header: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
}).then(res => {
console.log("2: ", res);
}).catch(err => {
console.log(err);
})
// 链式调用
// promise
// ajax 请求代码会被拆分成 3层 config 配置层serve 请求中间层ajax 封装层
var a = async () => {
console.log("1");
var res = await ajax.index({ id: 1, page: 2 });
var res = await ajax.get({
url: 'http://127.0.0.1/my.php',
data: {
id: 1,
page: 2
},
header: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
});
console.log("2: ", res);
console.log("3");
}
console.log("1111");
a()
console.log("3333");
</script>
</html>

View File

@@ -0,0 +1,64 @@
<!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 ajax学习</title>
</head>
<body>
<ul>
</ul>
</body>
<script>
// 1 创建一个新的ajax对象 拿出手机 xhr
// fetch 全新的ajax请求方式
var ajax = new XMLHttpRequest()
// var form = new FormData();
// form.append("username", 1)
// var params = {
// id : 1
// }
var a = 'id=1'
// 2 配置需要访问的后端地址,请求方式, 设置 号码
ajax.open("POST", "http://127.0.0.1/my.php")
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8')
// 3 发送请求 拨号
ajax.send(a)
// 监听请求状态
ajax.onreadystatechange = function () {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
var data = JSON.parse(ajax.responseText)
console.log(data);
data.result.forEach(v => {
document.querySelector("ul").innerHTML += `<li>${v.title}</li>`
});
// stringify
// parse
} else {
alert("网络请求失败")
}
}
}
// function getData(res) {
// console.log(res);
// }
</script>
<!-- <script src="http://127.0.0.1/index.php?cb=getData"></script> -->
</html>

View File

@@ -0,0 +1,84 @@
前后端数据交互的工具:
ajax
无刷新 的数据交互方式
http
请求头
存放着,发送此次请求的客户端的一些基本信息
例如:什么设备 user-agent发送了多长的数据在什么时间发送的是否需要压缩数据来传输
content-length
https://www.cnblogs.com/smallzhen/p/14094928.html
响应头
存放着,响应此次请求的服务端的一些基本信息
https://blog.csdn.net/qq_30953791/article/details/114002893
请求体
请求状态码
https://blog.csdn.net/m0_56227492/article/details/123101337
请求方式:
GET 要
参数:
http://127.0.0.1/index.php?id=1&page=2&key=value
缺点:不是和提交一些敏感数据
POST 给
http://127.0.0.1/index.php
请求体里面
multipart/form-data; 上传文件
application/x-www-form-urlencoded;
application/json;
PUT 更新
DELETE 删除
OPTIONS 预检查 留坑
ajax 浏览器 同源策略
绕过同源策略:跨域
前端网址:
http://127.0.0.1:8080/index.html
后端接口地址
http://192.168.31.1:9090/index.php
协议 http 80 http 443
域名
端口
三种解决方案:
1: 后端设置请求头,允许跨域 cors
2: jsonp 把ajax请求伪装成 js文件请求绕过 同源策略 达到 发送请求 的目的,通过 回调函数 拿回数据
3: 服务端代理
A 前端 ---> B 别人的后端
A 前端 ---> C 自己的后端 ---> B 别人的后端
服务端渲染
前后端分离

View File

@@ -0,0 +1 @@
你好

View File

@@ -0,0 +1,11 @@
const http = require('http');
const fs = require('fs');
// 创建本地服务器来从其接收数据
const server = http.createServer((req, res) => {
var html = fs.readFileSync("./index.html");
res.writeHead(200, { 'Content-Type': 'text/html; charset=UTF-8' });
res.end(html.toString());
});
server.listen(8000);

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>
<h2>哈哈哈哈</h2>
</body>
</html>

View File

@@ -0,0 +1,8 @@
// const axios = require('axios').default;
// const a = require("./utils");
// a.a.test()
// console.log(require("./utils"));
const fs = require("fs");
fs.writeFileSync("./1.txt", "你好")

View File

@@ -0,0 +1,63 @@
{
"name": "2020-07-05",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"axios": {
"version": "0.27.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
"integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
"requires": {
"follow-redirects": "^1.14.9",
"form-data": "^4.0.0"
}
},
"combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"requires": {
"delayed-stream": "~1.0.0"
}
},
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
},
"follow-redirects": {
"version": "1.15.1",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
"integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
},
"form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"requires": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
}
},
"mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
},
"mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"requires": {
"mime-db": "1.52.0"
}
}
}
}

View File

@@ -0,0 +1,16 @@
{
"name": "2020-07-05",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node-dev index.js",
"serve": "node-dev http.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.27.2"
}
}

View File

@@ -0,0 +1,9 @@
class utils {
test() {
console.log(this);
console.log("hhaahhah");
}
}
module.exports = new utils()
// exports.a = new utils()

View File

@@ -0,0 +1,75 @@
Node.js 是什么?
fs
是一个js在服务器上的运行环境
v8
c++
能不能让js变成后端语言
Node.js
js 运行 靠 V8 引擎
前端开发三个阶段
1 HTML CSS table
2 html+css+jsjquery 操作dom
mvc mvc框架
nodejs 蓬勃发展
3 mvvm angular.js
react
vue
npm 全球最大的包(插件,依赖)管理工具
npm init 初始化一个 nodejs 项目 package.json
-y
npm run xxx 使用npm运行scripts中的命令
npm install简写 i 插件名称 参数
参数:
--save -S 将插件保存到上线阶段 dependencies
--save-dev -D 将插件保存到开发阶段 devDependencies
-g 将插件安装到操作系统全局
npm i
devDependencies 开发阶段的插件依赖
dependencies 上线阶段的插件依赖
cnpm 淘宝
npm uninstall 插件名
node_modules 存放你项目开发中所有下载下来的插件
package-lock.json
爬虫

View File

@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue学习</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="app" v-cloak>
<h2 v-once>{{ text }}</h2>
<div v-text="message"></div>
<ul>
<li v-for="v,i in news" :key="i" @click="enterInfo(v)">{{ i }} | {{ v.title }}</li>
</ul>
<ul>
<li v-for="v,k in obj">{{ k }} | {{ v }}</li>
</ul>
<img :src="imgSrc" :alt="text">
<div v-if=" type == 0 ">未开vip</div>
<div v-else-if=" type == 1 ">普通vip</div>
<div v-else-if=" type == 2 ">超级vip</div>
<div v-else-if=" type == 3 ">至尊vip</div>
<div v-else>请登录</div>
<div v-show="isShow">show true</div>
<input type="text" placeholder="输入用户名" v-model="userName">
<button @click="UserLogin">登 录</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
// m v vm
// vue 指令 就是一些特殊的 html 标签属性
// v-text 没啥用
// v-html 把内容渲染中html结构
// v-for 循环数组 & 对象
// 一定要加 key
// v-bind 帮变量绑定到标签的属性上
// 简写
// v-if 根据条件来显示隐藏元素不符合条件的html将被删除
// v-show
// v-model 一般给输入框使用的,来获取输入框用户输入的值
// v-on
// 简写 @
var vm = new Vue({
el: '.app',
// 所有的变量都定义在data中数据的
data: {
text: '我是测试的文字',
message: `<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">`,
news: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' },
{ id: 4, title: '新闻4' },
],
obj: { id: 1, title: '新闻1' },
imgSrc: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
type: 0,
isShow: true,
userName: ''
},
// 存放所有的方法
methods: {
UserLogin() {
console.log("UserLogin: ", this.userName);
this.test();
},
test() {
console.log("test");
},
enterInfo(v) {
console.log(v);
}
}
})
</script>
</html>

View File

@@ -0,0 +1,243 @@
<!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>vue-router 路由管理</title>
<style>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/">首页</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<transition name="slide-fade">
<router-view></router-view>
</transition>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
<script>
// 0. 如果使用模块化机制编程导入Vue和VueRouter要调用 Vue.use(VueRouter)
// TODO 嵌套路由 在管理后台的项目里面讲解
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Index = {
data() {
return {
list: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' },
{ id: 4, title: '新闻4' },
]
}
},
template: `
<div class="index">
首页
<ul>
<li @click="enterInfo(item)" v-for="item,index in list" :key="index">{{ item.title }}</li>
</ul>
</div>
`,
methods: {
enterInfo(item) {
this.$router.push({
name: 'info',
query: {
id: item.id,
page: 1
}
})
}
}
}
const Bar = { template: '<div>bar</div>' }
const info = {
template: `
<div>详情页面 {{ $route.query.id }}</div>
`,
data() {
return {
// id: 0
}
},
created() {
// this.id = this.$route.query.id
console.log(this.$route.query.id);
},
methods: {
}
}
const login = {
template: `
<div @click="login">登录页面</div>
`,
data() {
return {
// id: 0
}
},
methods: {
login() {
//
localStorage.setItem("token", "11111")
if(this.$route.query.hasOwnProperty("to")) {
this.$router.push({
path: this.$route.query.to
})
} else {
this.$router.push("/")
}
}
}
}
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{
path: '/',
redirect: '/index',
meta: {
isLogin: false
}
},
{
name: 'index',
path: '/index',
component: Index,
meta: {
isLogin: false
}
},
{
name: 'bar',
path: '/bar',
component: Bar,
meta: {
isLogin: false
}
},
{
name: 'info',
path: '/info',
component: info,
meta: {
isLogin: true
}
},
{
name: 'login',
path: '/login',
component: login,
meta: {
isLogin: false
}
},
]
// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
mode: 'hash',
routes // (缩写) 相当于 routes: routes
})
router.beforeEach((to, from, next) => {
console.log(to);
// 你访问的页面需要登录
if (to.meta.isLogin) {
// 未登录
if (localStorage.getItem("token") == null ) {
next({
name: 'login',
query: {
to: to.fullPath
}
})
} else {
next()
}
} else {
next()
}
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
el: '#app',
router
})
// 两种 路由模式
// TODO 路由模式的原理(面试)
// hash
// http://www.a.com/#/about?id=1
// history
// http://www.a.com/about
// vue-router 两种页面跳转方式
// router-link
// 使用js来跳转
// 传参方式:
// query
// http://www.a.com?id=1&page=2
// params
// http://www.a.com/1/2
// this.$route 用来获取路由信息的(地址,参数这些信息)
// this.$router 用来获取路由跳转方法的
// 导航守卫 就是拦路虎
// 一般 实现 登录拦截,权限拦截等功能..
// 全局导航守卫
// 路由配置中的 导航守卫
// 组件内部的 导航守卫
</script>
</html>

View File

@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tab</title>
<style>
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 10px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<div class="app">
<ul class="title">
<li :class=" i == index ? 'active' : '' "
v-for="v,i in arr"
@click="index = i"
:key="i">
{{ v.title }}
</li>
</ul>
<ul class="content">
<li :class=" i == index ? 'active' : '' " v-for="v,i in arr" :key="i">
<p v-for="item,index in v.content">{{ item.text }}</p>
</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
new Vue({
el: '.app',
data: {
index: 0,
arr: [
{
title: '首页',
content: [
{ text: '首页的内容1' },
{ text: '首页的内容2' },
{ text: '首页的内容3' },
{ text: '首页的内容4' },
{ text: '首页的内容5' },
]
},
{
title: '社会',
content: [
{ text: '社会 的内容1' },
{ text: '社会 的内容2' },
{ text: '社会 的内容3' },
]
},
{
title: '军事',
content: [
{ text: '军事 的内容1' },
{ text: '军事 的内容2' },
{ text: '军事 的内容3' },
]
},
{
title: '科技',
content: [
{ text: '科技 的内容1' },
{ text: '科技 的内容2' },
{ text: '科技 的内容3' },
]
}
]
},
methods: {
change(index) {
this.index = index
}
}
})
</script>
</html>

View File

@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app">
<h2 v-title="test">{{ test | filTest }}</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
// 混入
// 官方提供的封装方案可以解决this指向的问题
var more = {
data () {
return {
page: 1,
totalPage: 0
}
},
methods: {
getMore() {
console.log("getMore", this.test);
}
}
};
new Vue({
el: '.app',
data: {
test: '你好你好你好你好你好你好你好'
},
created() {
console.log(this.page);
this.getMore()
},
mixins: [ more ],
methods: {
},
directives: {
title: {
bind(el,binding) {
document.title = binding.value
console.log("bind: ",el,binding);
},
inserted (el,binding) {
console.log("inserted: ",el,binding);
},
update(el,binding) {
}
}
},
filters: {
filTest(val) {
return val.substring(0,4) + '...'
}
}
})
</script>
</html>

View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue生命周期</title>
</head>
<body>
<div class="app">
<h2 ref="test">{{ test }}</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
// TODO activated 需要说明
var vm = new Vue({
el: '.app',
data: {
test: '你好'
},
// 发送ajax请求
created() {
console.log(this.$refs.test);
// console.log(document.querySelector("h2"));
},
// 也可以发送ajax请求
mounted() {
this.getTest
console.log(this.getHello);
console.log(this.$refs.test);
},
updated() {
console.log("数据更新了");
},
methods: {
getTest() {
console.log("getTest");
}
},
// computed 写法上和 methods 是一样的,
// 会做缓存
computed: {
getHello() {
console.log("getHello");
return 1
}
},
// 使用watch 监听数据的修改,触发一些其他操作
watch: {
test(newVal, oldVal) {
console.log("newVal: ", newVal);
console.log("oldVal: ", oldVal);
}
}
});
</script>
</html>

View File

@@ -0,0 +1,62 @@
原生 js + jquery
1 原生 js jquery
2 mmodel 数据vview 视图ccontroller 控制器)
3 mmodel 数据 存储的是ajax的返回数据vview 视图vmview and model
双向数据绑定
去dom化
angular.js
react.js
vue.js 1.x ~ 2.x 过渡版本 3.x
单页(spa) web应用
单页 : 只有一个html文件其他页面其实就是 组件,被浏览器运行的时候其实就是 js 对象
vue-router
[
{
path: '/about',
component: aaaa
}
]
www.abc.com/about
php Laravel
vue.js html 引入js
vue.js nodejs
混入
自定义指令
过滤器
组件系统
vue-router
vue-cli vue 脚手架 帮你创建vue项目运行项目使用的
2.x
vue init webpack test
3.x

View File

@@ -0,0 +1,102 @@
<!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">
<v-header @change="getData" :title=" '2' "></v-header>
测试文字
<aaaa></aaaa>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 组件????
// 以html为核心的代码封装
// 局部组件
//
var aaaa = {
template: `
<div>
<v-header></v-header>
<h3>{{ title }}</h3>
</div>
`,
data() {
return {
title: '公共底部'
}
},
created() {}
}
// 全局组件
// 组件名组件名其实就是html的标签名称不可以用默认标签的名字
Vue.component('v-header',{
template: `
<div>
<h2 @click="submit">{{ title }}</h2>
</div>
`,
// props: ['title'],
props: {
title: {
default: "这是默认标题",
type: String
}
},
data() {
return {
list: "这是子组件的数据"
}
},
created() {
console.log("公共的头部 的生命周期:", this);
console.log(this.$parent.$data.text);
},
methods: {
submit() {
this.$emit("change", this.list)
}
},
components: {
aaaa
}
})
// 父组件 ---> 子组件 传数据
// props
// 子组件 ---> 父组件
// $emit 借助事件,把数据抛出去
var vm = new Vue({
el: '.app',
data: {
text: 'jvbjkhbjhbjhbjhb'
},
mounted() {
console.log(this.$children[1]);
},
methods: {
getData(val) {
console.log("父组件收到的数据:", val);
}
},
components: {
// "f": footer
aaaa
}
})
</script>
</html>

View File

@@ -0,0 +1,83 @@
git 源代码版本控制
团队合作的一个工具
例子: 网站项目 论文
操作系统
windows 视窗
macos 苹果
linus
linux 服务器
github 全世界最大的代码仓库 同性交友网站
gitee 码云
coding
git
作用:用来存储代码的 仓库
开发
测试
上线
远程仓库
本地仓库
git init 初始化一个本地仓库
git add 选择你要上传的文件
每次要提交代码都需要执行:
1 git add -A 全选 暂存
2 git commit -m "今天完成xxx事情" 设置上传备注
3 git pull 下载更新代码(拉取)
4 git push
git push -u origin "master" 上传代码
git remote add origin https://gitee.com/bmycode/font-end-nine.git 将本地仓库和远程仓库建立关联
README.md 读我 markdown
git clone 网址 克隆远程仓库到本地
嘿嘿嘿嘿
git clone 网址 克隆远程仓库到本地滴滴
1111111
凤凰网比分别为器大青蛙多无群大厦
softc1oud
1111111 948656312
哈哈哈哈强无敌翁
很客观v与一个
哈哈哈哈
嘻嘻嘻嘻
上的恻然恻然
v不错不错
带我去多无群带我去多多
dawkjfigjewog
带我去多无群
111
长期的期望

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

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>Document</title>
</head>
<body>
<button>点我</button>
<div style="display: block;" class="text">哈哈哈哈</div>
</body>
<script>
// 1 点击显示(block)和隐藏display: none元素
// 思路:
// 1 给button 绑定 点击事件
// 2
// 2 显示的时候随机变化颜色
// hsla 来实现的
var button = $("button"), text = $(".text");
button.onclick = function () {
if (text.style.display == "block") {
text.style.display = "none"
} else {
text.style.display = "block"
text.style.color = `hsl(${Math.random() * 360},100%,50%)`
}
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,91 @@
<!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>tab</title>
<style>
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 10px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<ul class="title">
<li class="active">首页</li>
<li>社会</li>
<li>军事</li>
<li>科技</li>
</ul>
<ul class="content">
<li class="active">首页 的内容</li>
<li>社会 的内容</li>
<li>军事 的内容</li>
<li>科技 的内容</li>
</ul>
</body>
<script>
var titleLi = _(".title li"), contentLi = _(".content li");
// for (var i = 0; i < titleLi.length; i++) {
// console.log(titleLi[i]);
// }
// NodeList.prototype.forLb = function(callback) {
// for (let i = 0; i < this.length; i++) {
// callback(this[i], i, this)
// }
// }
titleLi.forEach(function(v, i) {
v.onclick = function () {
titleLi.forEach(function(item, index) {
item.className = ""
contentLi[index].className = ""
})
v.className = "active"
contentLi[i].className = "active"
}
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

View File

@@ -0,0 +1,154 @@
<!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>tab</title>
<style>
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 10px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<ul class="title">
</ul>
<ul class="content">
</ul>
</body>
<script>
var titleLi = _(".title li"), contentLi = _(".content li");
// json
// js object + array 的组合
var tabs = [
{
title: '首页',
content: [
{ text: '首页的内容1' },
{ text: '首页的内容2' },
{ text: '首页的内容3' },
{ text: '首页的内容4' },
{ text: '首页的内容5' },
]
},
{
title: '社会',
content: [
{ text: '社会 的内容1' },
{ text: '社会 的内容2' },
{ text: '社会 的内容3' },
]
},
{
title: '军事',
content: [
{ text: '军事 的内容1' },
{ text: '军事 的内容2' },
{ text: '军事 的内容3' },
]
},
{
title: '科技',
content: [
{ text: '科技 的内容1' },
{ text: '科技 的内容2' },
{ text: '科技 的内容3' },
]
}
]
function renderTitle() {
tabs.forEach((v, i) => {
$(".title").innerHTML += `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`
})
renderContent();
var titleLi = _(".title li"), contentLi = _(".content li");
titleLi.forEach(function (v, i) {
v.onclick = function () {
titleLi.forEach(function (item, index) {
item.className = ""
contentLi[index].className = ""
})
v.className = "active"
contentLi[i].className = "active"
}
})
}
function renderContent() {
tabs.forEach((v, i) => {
$(".content").innerHTML += `
<li class="${i == 0 ? 'active' : ''}">
<li class="${i == 0 ? 'active' : ''}"
${v.content.map(j => {
return `<p>${j.text}</p>`
}).toString().replaceAll(",", "")
}
</li>
`
})
}
renderTitle();
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
// map
var a = [1, 2, 3, 4, 5, 6].map(v => {
return v
})
console.log(a);
</script>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 424 B

View File

@@ -0,0 +1,219 @@
<!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,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.header {
width: 100%;
height: 45px;
position: fixed;
left: 0;
right: 0;
top: 0;
background: #fff;
z-index: 999;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
box-sizing: border-box;
border-bottom: 1px solid #dadada;
}
.header img {
width: 20px;
height: 20px;
}
.content {
margin-top: 45px;
}
.content li {
height: 40px;
display: flex;
align-items: center;
border-bottom: 1px solid #dadada;
padding: 0 10px;
}
.refresh {
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
position: fixed;
left: 50%;
z-index: 998;
background: #fff;
border-radius: 100%;
box-shadow: 0px 0px 9px #858585;
margin-left: -15px;
transition: all 0.1s;
}
.refresh img {
width: 100%;
height: 100%;
}
.rotate {
animation: rotateAction 1s linear infinite;
}
@keyframes rotateAction {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="header">
<img src="./back.png" alt="">
<span>热门视频</span>
<span></span>
</div>
<ul class="content">
<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>
<li>列表11</li>
<li>列表12</li>
<li>列表13</li>
<li>列表14</li>
<li>列表15</li>
<li>列表16</li>
<li>列表17</li>
<li>列表18</li>
<li>列表19</li>
<li>列表20</li>
<li>列表21</li>
<li>列表22</li>
<li>列表23</li>
<li>列表24</li>
<li>列表25</li>
<li>列表26</li>
<li>列表27</li>
<li>列表28</li>
<li>列表29</li>
<li>列表30</li>
<li>列表31</li>
<li>列表32</li>
<li>列表33</li>
<li>列表34</li>
<li>列表35</li>
<li>列表36</li>
<li>列表37</li>
<li>列表38</li>
<li>列表39</li>
<li>列表40</li>
</ul>
<div class="refresh" style="top: 10px;">
<img src="./refresh.png" alt="">
</div>
</body>
<script>
var startY = 0, moveY = 0, endY = 0;
if (isTop()) {
addMove();
} else {
window.addEventListener('scroll', () => isTop() ? addMove() : '')
}
function addMove() {
$(".content").addEventListener('touchstart', (e) => {
startY = e.targetTouches[0].pageY
});
$(".content").addEventListener('touchmove', (e) => {
if (isTop()) {
moveY = e.targetTouches[0].pageY;
if (moveY > startY) {
// 必须要阻止默认事件,如果不阻止会和页面的滚动相互冲突
e.preventDefault();
var sTop = moveY - startY;
if (sTop <= 120) {
$(".refresh").style = `
top: ${sTop}px;
transform: rotate(${sTop * 3}deg);
`;
}
}
}
});
$(".content").addEventListener('touchend', (e) => {
endY = e.changedTouches[0].pageY;
var eTop = endY - startY;
if (eTop <= 60) {
$(".refresh").style = `
top: 10px;
transform: rotate(0deg);
`;
} else {
$(".refresh").className = "refresh rotate"
$(".refresh").style = `
top: 80px;
transform: rotate(0}deg);
`;
setTimeout(() => {
$(".refresh").style = `
top: 10px;
transform: rotate(0deg);
`;
$(".refresh").className = "refresh"
}, 2000)
}
});
}
function isTop() {
return document.documentElement.scrollTop === 0 ? true : false
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -0,0 +1,179 @@
<!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,
ul,
li {
margin: 0;
padding: 0;
}
.main {}
.main ul {
overflow: hidden;
}
.main ul li {
display: flex;
height: 45px;
align-items: center;
position: relative;
padding: 0 15px;
border-bottom: 1px solid #f4f0f0;
transition-duration: 0.3s;
}
.main .item {
width: 100%;
}
.main .action {
display: flex;
align-items: center;
height: 100%;
position: absolute;
right: -180px;
}
.main .action .item {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 14px;
color: #fff;
}
.action .top {
background: #c8c7cd;
}
.action .read {
background: #ff9c00;
}
.action .delete {
background: #ff3a31;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li>
<div class="item">新闻1</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
<li>
<div class="item">新闻2</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
<li>
<div class="item">新闻3</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
</ul>
</div>
</body>9
<script>
var startX = 0;
_(".main li").forEach((v, i) => {
// v.open = false
v.addEventListener('touchstart', (e) => {
startX = e.targetTouches[0].screenX;
_(".main li").forEach((j, index) => {
if (index != i) {
j.style.transform = `translateX(0px)`;
}
})
console.log("startX: ", startX);
})
v.addEventListener('touchmove', (e) => {
var moveX = e.targetTouches[0].screenX;
console.log('moveX',moveX);
// 左滑
if (startX > moveX) {
if (!v.open) {
var x = moveX - startX
console.log("左滑:",);
v.style.transform = `translateX(${x < -180 ? -180 : x}px)`;
v.open = true
}
} else {
if (v.open) {
var newX = -180 + (moveX - startX)
v.style.transform = `translateX(${newX <= 0 ? newX : 0}px)`;
console.log("右滑");
}
}
})
v.addEventListener('touchend', (e) => {
var endX = e.changedTouches[0].screenX;
var ox = endX - startX;
console.log('endX',endX,);
// 左滑
if (startX > endX) {
if (ox > -60) {
v.style.transform = `translateX(0px)`;
v.open = false
} else {
v.style.transform = `translateX(-180px)`;
}
// 右滑
} else {
console.log("ox: ", ox);
if (ox > 60) {
v.style.transform = `translateX(0px)`;
v.open = false
} else {
v.style.transform = `translateX(-180px)`;
}
}
})
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

View File

@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>右键菜单</title>
<style>
body {
height: 100vh;
}
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 152px;
border-radius: 6px;
box-shadow: 2px 2px 9px #d7d7d7;
display: none;
position: fixed;
}
li {
height: 40px;
padding: 0 15px;
box-sizing: border-box;
line-height: 40px;
}
</style>
</head>
<body>
<ul>
<li>新建文件夹</li>
<li>上传文件</li>
<li>上传文件夹</li>
<li>刷新网页</li>
</ul>
</body>
<script>
$("body").oncontextmenu = function (e) {
e.preventDefault();
var { x, y } = e;
var { clientWidth, clientHeight } = document.body;
if (clientWidth - x < 152 && clientHeight - y < 160) {
$("ul").style = `
top: ${y - 160}px;
left: ${x - 152}px;
display: block;
`
} else if (clientWidth - x < 152) {
$("ul").style = `
top: ${y}px;
left: ${x - 152}px;
display: block;
`
} else if (clientHeight - y < 160) {
$("ul").style = `
top: ${y - 160}px;
left: ${x}px;
display: block;
`
} else {
$("ul").style = `
top: ${y}px;
left: ${x}px;
display: block;
`
}
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,71 @@
@font-face {
font-family: "iconfont"; /* Project id 3445167 */
src: url('iconfont.woff2?t=1655693871496') format('woff2'),
url('iconfont.woff?t=1655693871496') format('woff'),
url('iconfont.ttf?t=1655693871496') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-close:before {
content: "\e6a7";
}
.icon-yulanxuanzhuan:before {
content: "\e627";
}
.icon-quanping:before {
content: "\e626";
}
.icon-suoxiao:before {
content: "\ec13";
}
.icon-fangda:before {
content: "\ec14";
}
.icon-beijingyibiyi:before {
content: "\e64f";
}
.icon-fanhui:before {
content: "\e601";
}
.icon-yunshangchuan:before {
content: "\e600";
}
.icon-xiazai:before {
content: "\e668";
}
.icon-sousuo:before {
content: "\e752";
}
.icon-z044:before {
content: "\e630";
}
.icon-jiahao:before {
content: "\eaf3";
}
.icon-gengduo:before {
content: "\e620";
}
.icon-shuaxin:before {
content: "\e631";
}

View File

@@ -0,0 +1,83 @@
.preview {
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.preview_task {
width: 100%;
height: 100%;
background: #0000008a;
position: absolute;
z-index: -1;
}
.preview_wrap {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.preview_img {
height: 100%;
position: relative;
z-index: 10;
}
.preview_close {
position: absolute;
right: 20px;
top: 20px;
color: #fff;
z-index: 9;
font-size: 28px;
}
.navigation {
position: absolute;
z-index: 9;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 27px;
background: #939090;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
}
.navigation_left {
left: 10px;
}
.navigation_right {
right: 10px;
}
.preview_list {
width: 282px;
height: 44px;
position: absolute;
z-index: 11;
left: 50%;
bottom: 30px;
display: flex;
align-items: center;
justify-content: space-between;
transform: translateX(-50%);
padding: 0 23px;
background-color: #606266;
box-sizing: border-box;
border-radius: 22px;
color: #fff
}
.preview_list .preview_list_item {
cursor: pointer;
}
.preview_list .right {
transform: rotateY(180deg);
}

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">
<link rel="stylesheet" href="./css/iconfont.css">
<link rel="stylesheet" href="./css/preview.css">
<title>图片预览</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.main img {
width: 200px;
}
</style>
</head>
<body>
<div class="main"></div>
</body>
<script src="./index.js"></script>
<script>
var img = [
'https://img1.baidu.com/it/u=2863108920,4275403644&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
'https://img2.baidu.com/it/u=3395582942,4228440123&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
'https://img1.baidu.com/it/u=2638231904,4072091792&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
'https://img2.baidu.com/it/u=2311492523,2796016539&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281'
];
img.forEach(v => {
$(".main").innerHTML += ` <img src="${v}" alt="">`
})
_(".main img").forEach((v, i) => {
v.onclick = () => {
console.log(v);
new PicturePreview({
index: i,
arr: img
})
}
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

View File

@@ -0,0 +1,195 @@
// class 类
// 其实就是现实生活中具体事物在编程中的表现
// 莫一个事物具体的属性(变量)和功能(方法)
// 构造函数 constructor
// 类被初始化(new)的时候,第一个默认执行的方法
// 做参数的接受和保存
// 本质上就是 object
// 语法糖
class PicturePreview {
scale = 1;
rotate = 0;
constructor(params) {
this.params = params;
this.initHtml();
}
initHtml () {
this.$("body").insertAdjacentHTML('beforeend', `
<div class="preview">
<div class="preview_task"></div>
<div class="preview_wrap">
<img style="transform: scale(${this.scale}) rotate(${this.rotate}deg);margin-left: 0px;margin-top: 0px;" class="preview_img" src="${this.params.arr[this.params.index]}" alt="">
</div>
<div class="preview_close iconfont icon-close"></div>
<div class="navigation navigation_left iconfont icon-fanhui"></div>
<div class="navigation navigation_right iconfont icon-gengduo"></div>
<div class="preview_list">
<div class="iconfont icon-suoxiao preview_list_item"></div>
<div class="iconfont icon-fangda preview_list_item"></div>
<div class="iconfont icon-quanping sf preview_list_item"></div>
<div class="iconfont icon-yulanxuanzhuan left preview_list_item"></div>
<div class="iconfont icon-yulanxuanzhuan right preview_list_item"></div>
</div>
</div>
`)
this.bindEvents()
}
bindEvents() {
this.$(".preview_wrap img").onmousedown = (e) => {
e.preventDefault();
this.startX = e.x;
this.startY = e.y;
this.status = true
this.oldLeft = parseInt(this.$(".preview_wrap img").style.marginLeft)
this.oldTop = parseInt(this.$(".preview_wrap img").style.marginTop)
this.moveEl(".preview_wrap img")
this.$(".preview_wrap img").onmouseout = (e) => {
this.$(".preview_wrap img").onmousemove = null
if ( this.status) {
this.moveEl(".preview_wrap")
}
}
}
this.$(".preview_wrap img").onmouseup = (e) => {
this.status = false
this.$(".preview_wrap img").onmousemove = null
}
this.$(".preview_wrap").onmouseup = (e) => {
this.status = false
this.$(".preview_wrap").onmousemove = null
}
this.$(".preview_close").onclick = () => {
this.$("body").removeChild(this.$(".preview"))
}
// 上一页
this.$(".icon-fanhui").onclick = () => {
this.params.index -= 1
if (this.params.index < 0) {
this.params.index = 0
}
this.$(".preview_img").src = this.params.arr[this.params.index]
}
// 下一页
this.$(".icon-gengduo").onclick = () => {
this.params.index += 1
if (this.params.index > (this.params.arr.length -1)) {
this.params.index = this.params.arr.length -1
}
this.$(".preview_img").src = this.params.arr[this.params.index]
}
this.$(".icon-suoxiao").onclick = () => {
this.scale -= 0.2;
if (this.scale <= 0.2) {
this.scale = 0.2
}
this.transform()
}
this.$(".icon-fangda").onclick = () => {
this.scale += 0.2;
this.transform()
}
this.$(".left").onclick = () => {
this.rotate -= 90
this.transform()
}
this.$(".right").onclick = () => {
this.rotate += 90
this.transform()
}
this.$(".sf").onclick = () => {
this.scale = 1
this.rotate = 0
this.transform()
if (this.$(".sf").classList.contains("icon-quanping")) {
this.$(".preview_wrap img").style.height = "auto"
this.$(".sf").classList.replace("icon-quanping", "icon-beijingyibiyi")
} else {
this.$(".preview_wrap img").style.height = "100%"
this.$(".sf").classList.replace("icon-beijingyibiyi", "icon-quanping")
}
}
}
transform() {
this.$(".preview_wrap img").style = `
transform: scale(${this.scale}) rotate(${this.rotate}deg);
margin-left: ${parseInt(this.$(".preview_wrap img").style.marginLeft)}px;
margin-top: ${parseInt(this.$(".preview_wrap img").style.marginTop)}px;
`
}
moveEl(className) {
this.$(className).onmousemove = (e) => {
e.stopPropagation();
e.preventDefault();
var endX = e.x - this.startX;
var endY = e.y - this.startY;
this.$(".preview_wrap img").style.marginLeft = `${endX + this.oldLeft}px`
this.$(".preview_wrap img").style.marginTop = `${endY + this.oldTop}px`
}
}
$(className) {
return document.querySelector(className)
}
}
// 箭头函数会解绑(释放) this 执行
// bind call apply
// var PicturePreview = {
// init (test) {
// console.log(this);
// this.a = test;
// },
// getA: function() {
// console.log(this.a);
// }
// }
// window.PicturePreview.init()

View File

@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>富强</title>
<style>
body {
height: 100vh;
}
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
span {
position: fixed;
}
</style>
</head>
<body>
</body>
<script>
// 1在鼠标点击的位置依次显示字
// 1 为body绑定点击事件然后拿到 x,y坐标设置到 span(使用js创建) 标签上
// 2 把做好的span 放到body上
// 2: 让文字运动起来
var textArr = ['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善'];
var index = 0;
$("body").onclick = function (e) {
var time = null;
var { x, y } = e;
var span = document.createElement("span");
span.innerText = textArr[index];
span.style = `
left: ${x}px;
top: ${y}px;
`;
index++
index > 11 ? index = 0 : ''
span.move = 0
$("body").appendChild(span)
function motion() {
span.move += 4;
console.log("span.move: ", span.move);
if (span.move > 100) {
setTimeout(() => $("body").removeChild(span), 300)
// clearTimeout(time)
cancelAnimationFrame(time)
} else {
span.style.top = `${y - span.move}px`
time = requestAnimationFrame(motion)
}
}
motion()
}
function motion(el, y) {
// time = setTimeout(function fn() {
// el.move+=4;
// console.log("el.move: ", el.move);
// if (el.move > 100) {
// setTimeout(() => $("body").removeChild(el),300)
// clearTimeout(time)
// } else {
// el.style.top = `${y - el.move}px`
// time = setTimeout(fn, 1000/60)
// }
// }, 1000/60)
// setTimeout(function () {
// $("body").removeChild(el)
// }, 800)
}
function $(className) {
return document.querySelector(className)
}
// 箭头函数
// var a = test => console.log("test")
// a(1)
// 闭包
// 函数内部的函数访问外部变量的过程
// 为了解决:变量缓存的问题
function a() {
var c = 1
function test() {
c++
return c;
}
return test
}
var t = a();
console.log(t());
console.log(t());
var c = a();
console.log(c());
</script>
</html>

View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索建议</title>
<style>
</style>
</head>
<body>
<input type="text" placeholder="请输入搜索关键字">
<ul>
</ul>
</body>
<script>
// 1 给输入框绑定 oninput 输入事件,实时获取输入的数值
// 2 拿到用户输入的 关键字,去搜索建议的数组中,找到包含这个关键字的数据
// 3 拿到匹配的数据后,需要保存到 新的数组 中
// 4 渲染 新数组 ,显示到 ul 中
// 5 实现 匹配的 关键词 加红色突出显示
// 天气
var arr = ['今天天气真好', 'html学习', '不喜欢html', '热爱学习', '天气不好,是阴天', '不喜欢学习'];
var searchList = [];
$("input").oninput = function () {
searchList = []
if ($("input").value.length != 0) {
arr.forEach(function (v, i) {
if (v.includes($("input").value)) {
var span = `<span style="color: red;">${ $("input").value }</span>`
searchList.push(v.replace($("input").value, span))
}
});
renderLi();
} else {
$("ul").innerHTML = ""
}
}
function renderLi() {
$("ul").innerHTML = ""
searchList.forEach(function (v, i) {
$("ul").innerHTML += `<li>${v}</li>`
})
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,190 @@
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
width: 100%;
height: 100vh;
background-image: url("../img/back.png");
background-size: contain;
position: relative;
overflow: hidden;
user-select: none;
}
.result {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 30px;
z-index: 999;
}
.ground {
position: absolute;
width: 100%;
height: 112px;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
}
.ground img {
position: absolute;
width: 100%;
height: 100%;
}
.bird {
width: 34px;
height: 24px;
position: absolute;
left: 100px;
transition: all linear 0.15s;
z-index: 999;
}
.up {
transform: rotate(-38deg);
}
.down {
transform: rotate(90deg);
}
.sg {
width: 55px;
position: absolute;
}
@keyframes birdShake {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(0px);
}
}
@keyframes birdMotion {
0% {
background: url("../img/hn1.png");
}
50% {
background: url("../img/hn2.png");
}
100% {
background: url("../img/hn3.png");
}
}
@keyframes birdBlueMotion {
0% {
background: url("../img/hn_blue_1.png");
}
50% {
background: url("../img/hn_blue_2.png");
}
100% {
background: url("../img/hn_blue_3.png");
}
}
@keyframes birdRedMotion {
0% {
background: url("../img/hn_red_1.png");
}
50% {
background: url("../img/hn_red_2.png");
}
100% {
background: url("../img/hn_red_3.png");
}
}
.start {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -40%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 999;
}
.start .play {
width: 60px;
margin-top: 20px;
cursor: pointer;
}
.start .bird_list {
display: flex;
align-items: center;
justify-content: space-between;
}
.start .bird_list img {
cursor: pointer;
}
.start .bird_list img:nth-child(2){
margin: 0 30px;
}
.start .menu {
margin: 20px 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
background: #00000038;
color: #fff;
border-radius: 6px;
}
.start .menu .item {
width: 100%;
height: 100%;
text-align: center;
height: 40px;
line-height: 40px;
cursor: pointer;
}
.start .menu .item:first-child {
border-bottom: 0.5px solid #b9b9b9;
}
.pause {
position: absolute;
left: 20px;
top: 20px;
cursor: pointer;
z-index: 999;
}
.show {
display: block !important;
}
.hidden {
display: none !important;
}
audio {
display: none;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水管鸟游戏</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<audio class="hit" src="./sounds/sfx_hit.ogg"></audio>
<audio class="point" src="./sounds/sfx_point.ogg"></audio>
<div class="result hidden">
</div>
<img class="pause hidden" src="./img/pause.png" alt="">
<div class="start">
<img class="logo" src="./img/title.png" alt="">
<div class="menu">
<div class="item simple">普通难度</div>
<div class="item Infernal">地狱难度</div>
</div>
<div class="bird_list">
<img src="./img/hn1.png" alt="">
<img src="./img/hn_blue_1.png" alt="">
<img src="./img/hn_red_1.png" alt="">
</div>
<img class="play hidden" src="./img/start.png" alt="">
</div>
<div class="bird" style="top: 0px; animation: birdMotion 0.4s linear infinite;"></div>
<div class="ground">
<img class="groundOne" src="./img/diban.png" alt="">
<img class="groundTwo" src="./img/diban.png" alt="">
</div>
</body>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
</html>

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