05 2022 档案
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum
阅读全文
摘要：文件1： // 导入 express const express = require('express') // 创建服务器实例 const app = express() // 配置解析表单数据的中间件 app.use(express.urlencoded({ extended: false })
阅读全文
摘要：// 导入 express 模块 const express = require('express') // 创建 express 的服务器实例 const app = express() // 导入 Node.js 内置的 querystring 模块 const qs = require('qu
阅读全文
摘要：// 导入 express 模块 const express = require('express') // 创建 express 的服务器实例 const app = express() // 1. 定义路由 app.get('/', (req, res) => { // 1.1 人为的制造错误
阅读全文
摘要：// 导入 express 模块 const express = require('express') // 创建 express 的服务器实例 const app = express() // 1. 定义中间件函数 const mw1 = (req, res, next) => { console
阅读全文
摘要：// 导入 express 模块 const express = require('express') // 创建 express 的服务器实例 const app = express() // 1. 定义中间件函数 const mw1 = (req, res, next) => { console
阅读全文
摘要：const express = require('express') const app = express() // 定义第一个全局中间件 app.use((req, res, next) => { console.log('调用了第1个全局中间件') next() }) // 定义第二个全局中间
阅读全文
摘要：const express = require('express') const app = express() // // 定义一个最简单的中间件函数 // const mw = function (req, res, next) { // console.log('这是最简单的中间件函数') /
阅读全文
摘要：js文件1： const express = require('express') const app = express() // app.use('/files', express.static('./files')) // 1. 导入路由模块 const router = require('.
阅读全文
摘要：const express = require('express') const app = express() // 挂载路由 app.get('/', (req, res) => { res.send('hello world.') }) app.post('/', (req, res) =>
阅读全文
摘要：// 1. 导入 express const express = require('express') // 2. 创建 web 服务器 const app = express() // 4. 监听客户端的 GET 和 POST 请求，并向客户端响应具体的内容 app.get('/user', (r
阅读全文
摘要：// 1. 导入需要的包 // 注意：导入的名称，就是装包时候的名称 const moment = require('moment') const dt = moment().format('YYYY-MM-DD HH:mm:ss') console.log(dt)
阅读全文
摘要：// 1.1 导入 http 模块 const http = require('http') // 1.2 导入 fs 模块 const fs = require('fs') // 1.3 导入 path 模块 const path = require('path') // 2.1 创建 web 服
阅读全文
摘要：const http = require('http') const server = http.createServer() server.on('request', (req, res) => { // 1. 获取请求的 url 地址 const url = req.url // 2. 设置默认
阅读全文
摘要：// 1. 导入 http 模块 const http = require('http') // 2. 创建 web 服务器实例 const server = http.createServer() // 3. 为服务器实例绑定 request 事件，监听客户端的请求 server.on('requ
阅读全文
摘要：// 1.1 导入 fs 模块 const fs = require('fs') // 1.2 导入 path 模块 const path = require('path') // 1.3 定义正则表达式，分别匹配 <style></style> 和 <script></script> 标签 con
阅读全文
摘要：const path = require('path') // 这是文件的存放路径 const fpath = '/a/b/c/index.html' const fext = path.extname(fpath) console.log(fext)
阅读全文
摘要：const path = require('path') // 定义文件的存放路径 const fpath = '/a/b/c/index.html' // const fullName = path.basename(fpath) // console.log(fullName) const na
阅读全文
摘要：const path = require('path') const fs = require('fs') // 注意： ../ 会抵消前面的路径 // const pathStr = path.join('/a', '/b/c', '../../', './d', 'e') // console.
阅读全文
摘要：const fs = require('fs') // __dirname 表示当前文件所处的目录 // console.log(__dirname) fs.readFile(__dirname + '/files/1.txt', 'utf8', function(err, dataStr) { i
阅读全文
摘要：// 1. 导入 fs 模块 const fs = require('fs') // 2. 调用 fs.readFile() 读取文件的内容 fs.readFile('../素材/成绩.txt', 'utf8', function(err, dataStr) { // 3. 判断是否读取成功 if
阅读全文
摘要：// 1. 导入 fs 文件系统模块 const fs = require('fs') // 2. 调用 fs.writeFile() 方法，写入文件的内容 // 参数1：表示文件的存放路径 // 参数2：表示要写入的内容 // 参数3：回调函数 fs.writeFile('./files/3.tx
阅读全文
摘要：const fs = require('fs') fs.readFile('./files/11.txt', 'utf8', function(err, dataStr) { if (err) { return console.log('读取文件失败！' + err.message) } conso
阅读全文
摘要：// 1. 导入 fs 模块，来操作文件 const fs = require('fs') // 2. 调用 fs.readFile() 方法读取文件 // 参数1：读取文件的存放路径 // 参数2：读取文件时候采用的编码格式，一般默认指定 utf8 // 参数3：回调函数，拿到读取失败和成功的结果
阅读全文
摘要：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center; height: 30px;
阅读全文
摘要：// offset 系列 var father = document.querySelector('.father'); var son = document.querySelector('.son'); // 1.可以得到元素的偏移 位置 返回的不带单位的数值 console.log(father
阅读全文
摘要：//前进一个页面 history.go(1); //后退一个页面 history.go(-1);
阅读全文
摘要：if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebO
阅读全文
摘要：console.log(location.search); // ?uname=andy // 1.先去掉？ substr('起始的位置'，截取几个字符); var params = location.search.substr(1); // uname=andy console.log(param
阅读全文
摘要：var btn = document.querySelector('button'); var div = document.querySelector('div'); btn.addEventListener('click', function() { // console.log(locatio
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：// 1. setInterval // 语法规范： window.setInterval(调用函数, 延时时间); setInterval(function() { console.log('继续输出'); }, 1000); // 2. setTimeout 延时时间到了，就去调用这个回调函数，
阅读全文
摘要：var btn = document.querySelector('button'); var timer = setTimeout(function() { console.log('爆炸了'); }, 5000); btn.addEventListener('click', function()
阅读全文
摘要：// 1. setTimeout // 语法规范： window.setTimeout(调用函数, 延时时间); // 1. 这个window在调用的时候可以省略 // 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0 // 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：// window.onload = function() { // var btn = document.querySelector('button'); // btn.addEventListener('click', function() { // alert('点击我'); // }) //
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：// 核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面 // 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键 // 搜索框获得焦点： 使用 js 里面的 focus() 方法 var search = document.querySelector('in
阅读全文
摘要：// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值 // 1. 我们的keyup 和keydown事件不区分字母大小写 a 和 A 得到的都是65 // 2. 我们的keypress 事件 区分字母大小写 a 97 和 A 得到的是65 document.addEventList
阅读全文
摘要：// 常用的键盘事件 //1. keyup 按键弹起的时候触发 // document.onkeyup = function() { // console.log('我弹起了'); // } document.addEventListener('keyup', function() { consol
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：// 常见事件对象的属性和方法 // 1. e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素） // 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁 var div = document.quer
阅读全文
摘要：var divs = document.querySelectorAll('div'); divs[0].onclick = function() { alert(11); // 1. 传统方式删除事件 divs[0].onclick = null; } // 2. removeEventListe
阅读全文
摘要：var btns = document.querySelectorAll('button'); // 1. 传统方式注册事件 btns[0].onclick = function() { alert('hi'); } btns[0].onclick = function() { alert('hao
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：// 1. 创建节点元素节点 var li = document.createElement('li'); // 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素 类似于数组中的push var ul = document.queryS
阅读全文
摘要：// 1. 获取元素 var nav = document.querySelector('.nav'); var lis = nav.children; //得到4个小li // 2.循环注册事件 for(var i=0;i<lis.length;i++){ lis[i].onmouseover =
阅读全文
摘要：什么是节点？ 网页中所有的元素都是节点（标签，属性，文本，注释等） // 1. 父节点 parentNode var erweima = document.querySelector('.erweima'); // var box = document.querySelector('.box');
阅读全文
摘要：//设置自定义属性 setAttribute('index',i); //获取自定义属性 getAttribute div.getAttribute('getTime')； //自定义属性规范 data-开头 //直接在html里加 data-index="2" //通过js加自定义属性 setAt
阅读全文
摘要：align-items: center; justify-content: center;
阅读全文
摘要：/*启用flex布局*/ display: flex; 布局方式 /*居中*/ justify-content: center; /*间距在腾讯盒子（子级）之间*/ justify-content: space-between; /*所有地方的间距都相等*/ justify-content: spa
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum
阅读全文
摘要：.box { /* 1680/12 */ width: 140px; height: 140px; /* border: 1px solid #000; */ background-image: url(./images/bg.png); animation: move 1s steps(12) i
阅读全文
摘要：/*分步动画,重复3次播放*/ animation: change 1s steps(3) 1s 3; /*无限循环*/ animation: change 1s infinite alternate; /*执行完毕状态*/ animation: change 5s forwards;
阅读全文
摘要：.box { width: 200px; height: 100px; background-color: pink; /*使用动画*/ animation: change 5s; } /* 一. 定义动画：从200变大到600 */ /* @keyframes change{ from{ widt
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D导航</tit
阅读全文
摘要：/*半透明渐变*/ background-image: linear-gradient( transparent, rgba(0,0,0,.6) );
阅读全文
摘要：/*取值大于1（放大），取值小于1（缩小）*/ transform:scale(x轴缩放倍数,y轴缩放倍数)
阅读全文
摘要：/* 边走边转 */ transform: translate(600px) rotate(360deg);
阅读全文
摘要：transform-origin: right bottom; transform-origin: left bottom;
阅读全文
摘要：img { width: 250px; transition: all 2s; } img:hover { transform: rotate(360deg); }
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } .box{ width: 1366px; height: 600px; margin: 0
阅读全文
摘要：position: absolute; left: 50%; top: 50%; /*位移*/ transform: translate(-50%,-50%);
阅读全文
摘要：平面位移 transform: translate(50px,100px); transform: translate(50%,100%); 单独一个方向移动 transform:translateX() ; transform:translateY() ;
阅读全文
摘要：字体图标官网：www.iconfont.cn 素材库——》官方图标库——》选择图标库——》看到喜欢的点击购物车小图标——》选择本地下载 ——》解压到本地项目根目录 样式引入：<link rel="stylesheet" href="./iconfont/iconfont.css"> 类名：class
阅读全文
摘要：li:nth-child(5n); /*最后一个*/ li:last-child;
阅读全文
摘要：<link rel="stylesheet" href="css/base.css"/> <link rel="stylesheet" href="css/commom.css"/> <link rel="stylesheet" href="css/index.css"/>
阅读全文
摘要：.box{ width: 200px; height: 200px; background-color: #FFC0CB; /*宽度200，悬停的时候宽度到600，花费1秒*/ /* transition: width 1s,background-color 2s; */ /* all 代表所有属性
阅读全文
摘要：background-image: url(); background-position: -3px 0;
阅读全文
摘要：overflow溢出 /*溢出的内容隐藏掉*/ overflow: hidden; /*溢出的内容加滚动条来显示*/ overflow: auto;
阅读全文
摘要：border-radius圆角边框 border-radius:10px,20px,40px,80px
阅读全文
摘要：基线对齐 居中： vertical-align: middle; 顶部： vertical-align: top;
阅读全文
摘要：/*相对定位*/ position: relative; width: 200px; height: 200px; /*绝对定位*/ position: absolute; left: 0; top: 200px; /*固定定位*/ position: fixed;
阅读全文
摘要：transform:translate(-50%,-50%); 位移
阅读全文
摘要：添加盒子下边缘阴影 box-shadow:0px 2px 3px 0px rgba(118,118,118,0.2);
阅读全文
摘要：text-align: center; /*40为整个行高*/ line-height: 40px; 水平垂直居中
阅读全文
摘要：font-family改变字体 font-family:宋体;
阅读全文
摘要：a:hover时a标签实现鼠标悬停效果 a:hover{ background-color: #CEEDCE; } 鼠标悬停a标签显示背景颜色
阅读全文
摘要：标签转换成行内块 display:inline-block; 可以使标签获得宽和高
阅读全文
摘要：box-sizing: border-box盒子内边距不增大 *{ /*不增大*/ box-sizing: border-box; } 设置后父元素就不会跟着增大了
阅读全文
摘要：字体垂直居中 /*文字垂直居中，50为盒子的高度*/ line-height:50px
阅读全文
摘要：list-style:none去掉列表的符号： ul｛ list-style:none; ｝
阅读全文
摘要：代码如下： a{ text-decoration: none; width: 100px; height: 50px; background-color: red; display: inline-block; color: white; text-align: center; line-heigh
阅读全文
摘要：a标签转块 a{ text-decoration: none; width: 100px; height: 50px; background-color: red; display: inline-block; color: white; text-align: center; line-heigh
阅读全文
摘要：display: inline-block： 将多个div转换成在同一行 代码如下： div{ /*将多个块转换成在同一行*/ display: inline-block; }
阅读全文
摘要：去除html页面和body之间的空白 代码如下： * { margin: 0; padding: 0; }
阅读全文
摘要：背景图垂直水平居中： background-position: center;
阅读全文
摘要：背景图拉伸铺满 background: url("img.jpg") no-repeat; background-size:100% 100%;
阅读全文
摘要：超链接去下划线： a{ /*超链接去下划线*/ text-decoration: none; }
阅读全文
摘要：让div（盒子）水平居中 可以通过margin: 0 auto 实现 文字居中 text-align: center;
阅读全文
摘要：取值： 1.数字+px 2.倍数（当前标签font-size的倍数） p{ /*line-height: 50px; */ line-height: 1.5; //字体的1.5倍 } 字体行的间距
阅读全文
摘要：代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> p{ /*首行缩进2个字的大小*/ text-indent: 2em; } </style> <body> <p> 总
阅读全文
摘要：下面就是复合属性的写法： p{ /* font：style样式 weight粗细 size大小 字体 */ font: italic 700 66px 宋体 /*上面就是复合属性的写法*/ }
阅读全文
摘要：JS中的点击按钮herf跳转 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>location对象</title> <script> window.onload = function(){ var bt = document.g
阅读全文
摘要：刷新页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>location对象</title> <script> window.onload = function(){ var bt1 = document.getElement
阅读全文
摘要：图片轮播代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图</title> <script> var i =1; window.onload = function(){ setInterval("change()",
阅读全文
摘要：setTimeout() 在指定的毫秒数后调用函数或计算表达式 clearTimeout() 取消由 setTimeout() 方法设置的 timeout 1 <script> 2 var id; 3 window.onload = function(){ 4 var bt1 = document.
阅读全文
摘要：计时器方法 setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式 两个参数： 第一个参数：要执行的任务 第二个参数：多长时间（毫秒值） clearInterval() 取消由 setInterval() 设置的 timeout 1 <script> 2 var id; 3 w
阅读全文
摘要：open()：打开一个新的浏览器窗口 close()：关闭浏览器窗口 <script> window.onload = function(){ var bt = document.getElementById("bt"); bt.onclick = function(){ //警告框 alert("
阅读全文
摘要：常见的方法 弹出框方法 alert()：警告框 confirm()：确认按钮和取消按钮的对话框 prompt()：显示可提示用户输入的对话框 1 <script> 2 window.onload = function(){ 3 var bt = document.getElementById("bt
阅读全文
摘要：1.BOM 浏览器对象模型 把浏览器的各个组件拆分出来，每一个都封装成一个对象 分哪些部分？ Navigator：浏览器对象 Window：浏览器窗口对象 Location：浏览器地址栏对象 History：浏览器历史栏对象 Screen：浏览器参数对象 Document：浏览器文档对象，单独一个，
阅读全文
摘要：事件处理（单击事件） 方式一：使用html中的事件属性 1 <script> 2 function aaa(){ 3 alert("欢迎"); 4 } 5 </script> 6 <input type="button" value="点我啊" onclick="aaa()"/> 方式二：使用JS原
阅读全文
浙公网安备 33010602011771号