错言语-优快云博客

原创 PC端特效

PC端特效元素可视区 client用 client 的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。元素滚动 scrollscroll 的相关属性可以动态的得到该元素的大小、滚动距离等元素偏移量 offsetoffset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位o

2021-11-10 22:33:36 177

原创 BOM浏览器对象模型

BOM 浏览器对象模型BOM 概述BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。（由网景公司提出）DOM与BOM区别DOM：文档对象模型DOM 就是把「文档」当做一个「对象」来看待顶级对象是 document操作页面元素W3C 标准规范BOM：浏览器对象模型把「浏览器」当做一个「对象」来看待顶级对象是 window浏览器窗口交互的一些对象浏览器厂商在各自浏览器上定义的，兼容性

2021-11-06 07:00:00 233

原创跟随鼠标的天使

天使图片跟随鼠标移动而移动鼠标不断的移动，使用鼠标移动事件： mousemove在页面中移动，给document注册事件图片要移动距离，而且不占位置，我们使用绝对定位即可核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的top和left 值就可以移动图片核心代码：var pic = document.querySelector('img');document.addEventListener('mousemove', function(e) {var x

2021-11-06 02:32:04 171

原创 DOM（三）

事件高级注册事件（绑定事件）给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式传统注册方法：利用 on 开头的事件 onclick<button onclick=“alert('hi~')”></button>btn.onclick = function() {}特点：注册事件的唯一性同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式w3c 标准推荐方式-add

2021-11-03 06:15:00 240

原创动态生成表格

动态生成表格因为里面的学生数据都是动态的，我们需要js 动态生成。这里我们模拟数据，自己定义好数据。数据我们采取对象形式存储。所有的数据都是放到tbody里面的行里面。因为行很多，我们需要循环创建多个行（对应多少人）每个行里面又有很多单元格（对应里面的数据），我们还继续使用循环创建多个单元格，并且把数据存入里面（双重for循环）最后一列单元格是删除，需要单独创建单元格。最后添加删除操作，单击删除，可以删除当前行。href="javascript:;’'阻止链接跳转效果图：<!

2021-11-03 05:45:00 217

原创简单版发布留言

简单版发布留言核心思路：点击按钮之后，就动态创建一个li，添加到ul 里面。创建li 的同时，把文本域里面的值通过li.innerHTML 赋值给 li如果想要新的留言后面显示就用 appendChild 如果想要前面显示就用insertBefore当我们把文本域里面的值赋值给li 的时候，多添加一个删除的链接需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li阻止链接跳转需要添加 javascript:void(0); 或者 javascri

2021-11-03 01:25:06 274

原创新浪下拉菜单

新浪下拉菜单导航栏里面的li 都要有鼠标经过效果，所以需要循环注册鼠标事件核心原理：当鼠标经过li 里面的第二个孩子 ul 显示，当鼠标离开，则ul 隐藏效果图参考新浪下拉菜单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-

2021-11-03 01:23:17 147

原创排他思想（十分常用）

排他思想首先先排除其他人，然后才设置自己的样式这种排除其他人的思想我们成为排他思想<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl

2021-10-31 21:30:00 275

原创 tab栏切换(十分好用)

tab栏切换布局效果当鼠标点击上面相应的选项卡（tab），下面内容跟随变化分析：Tab栏切换有2个大的模块上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想）修改类名的方式下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。核心思路：给上面的tab_list 里面的所有小li 添加自定义属性，属性值从0开始编号。当我们点击tab_list 里面的某个小li，让tab_con 里面对应序号的

2021-10-31 17:21:24 1023 1

原创 DOM（二）

自定义属性的操作1.获取属性值element.属性获取属性值（元素本身自带的属性）console.log(div.id);element.getArrtibute('属性')get获得attribute属性的意思console.log(div.getAttribute('id')); console.log(div.getAttribute('index'));2.设置元素属性值element.属性='值'div.id = 'test';div.classN

2021-10-31 17:18:20 88

原创循环精灵图

循环精灵图背景首先精灵图图片排列有规律的核心思路：利用for循环修改精灵图片的背景位置 background-position让循环里面的 i 索引号 * 44 就是每个图片的y坐标效果图：实现代码：<style> * { margin: 0; padding: 0; } li { list-style-type: non

2021-10-29 09:00:00 238

原创分时间显示问候图片

分时间显示问候图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <t

2021-10-29 01:48:32 158

原创点击按钮显示明文密码

点击按钮将密码切换成文本框，并可以查看密码明文核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框算法：利用一个flag变量，来判断flag的值，如果是1 就切换为文本框，flag 设置为0，如果是0 就切换为密码框，flag设置为1 <style> .box { position: relative; width: 40

2021-10-29 01:46:57 1244

原创案例---点击获得当前时间

点击按钮会获得当前时间<!DOCTYPE html><html lang="en"><head> <title>点击按钮会获得当前时间</title> <style> div, p { width: 250px; height: 25px; line-height: 25px; colo

2021-10-29 01:45:29 372

原创案例----点击按钮更换图片

点击按钮更换图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti

2021-10-29 01:44:14 277

原创 DOM（一）

DOM什么是DOM？文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。DOM的作用获取页面元素给元素注册事件操作DOM元素的属性创建元素操作DOM元素DOM树文档：一个页面就是一个文档，DOM 中使用 document 表示元素：页面中的所有标签都是元素，DOM 中使用 eleme

2021-10-29 01:42:15 109

原创 node基础---补充内容

Unicode任何字符都是2个字节；UTF-8汉字3个字节，英文1个字节，特殊西文2个字节计算机一个0或一个1我们称为1位(bit)8bit = 1byte (美书)1024byte = 1kb1024kb = 1mb1024mb = 1gb1024gb = 1tbvar str = "hello 大世界";var buf = Buffer.from(str);console.log(buf.length);//占用内存的大小 15console.log(str.length);//字

2021-10-28 22:45:00 296

原创 16.fs其他方法

FS的其他方法验证路径是否存在 fs.existsSync(path)获取文件信息 fs.stat(path, callback) fs.statSync(path) -获取文件的状态 -他会给我们的返回一个对象，这个对象保存了当前对象状态的相关信息删除文件 fs.unlink(path, callback) fs.unlinkSync(path)列出文件 fs.readdir(path[ options], callback) fs.readdirSync(

2021-10-28 22:00:00 253

原创 15.流式文件读取

流式文件读取—也适用于大文件可以分多次将文件读取到内存var fs = require("fs");//创建一个可读流var rs = fs.creatReadStream("an.mp3");//创建一个可写流var ws = fs.creatWriteStream("b.mp3");//监听流的开启和关闭rs.once("open",function(){ console.log("可读流打开了");});rs.once("close",function(){

2021-10-28 20:15:00 847

原创 14.简单文件读取

简单文件读取fs.readFile(path[, options], callback)fs.readFileSync(path[, options]) -path 要读取的文件的路径 -options 读取的选项 -callback 回调函数，通过回调函数将读取到内容返回（err，data） err 错误对象 data 读取到的对象，会返回一个Buffer(读取的文件不唯一，所以返回Buffer)var fs = require("fs");fs.readFile("hel

2021-10-28 19:45:00 256

原创 13.流式文件写入

流式文件写入同步、异步、简单文件的写入都不适合大文件的写入，性能较差，容易导致内存的溢出fs. createWriteStream (path[, options])-可以用来创建一个可写流path,文件路径options配置的参数var fs=require("fs") ;//流式文件写入//创建一个可写流var ws = fs.createWriteStream("he11o3. txt") ;//通过监听流的open和close事件来监听流的打开和关闭ws.once("

2021-10-28 19:15:00 291

原创 12.简单文件写入

简单文件写入—同步和异步fs.writeFileSync(file, data[, options])fs.writeFile(file, data[, options], callback) -file 要操作的文件路径 -data 要写入的数据 -options 选项，可以对写入进行一些设置 -callback 当写入完成以后执行的函数注：1.writeFile直接封装好了打开文件，关闭文件（想要查看源码，直接CTRL点击）2.当写入的hello3.txt有内容时，通过“w”写

2021-10-28 15:05:53 148

原创 11.异步文件写入

异步文件写入—性能更好fs.open(path[, flags[, mode]], callback) -用来打开一个文件 -异步调用的方法，结果都是通过回调函数的参数返回的 -回调函数的两个参数 err 错误对象，如果没有错误则为null fd 文件的描述符fs.write(fd, string[, position[, encoding]], callback) -用异步写入一个文件fs.close(fd[, callback]) -用来关闭文件的//1.引入fs

2021-10-28 15:04:28 252

原创案例---模块math

定义一个模块math -在该模块中提供两个方法 add（a,b）//求a+b mul (a,b) //求a,b的积math.js:exports.add = function (a,b){ return a+b;};exports.mul = function (a,b){ return a*b;};在module.js中使用math.jsvar math = require('./math');//引用math.jsconsole.log(math.ad

2021-10-28 15:03:16 144

原创 10.同步文件的写入

文件系统（File System）文件系统简单来说就是通过Node来操作系统中的文件使用文件系统，需要先引入fs模块，fs是核心模块，直接引入不需要下载在Node中,与文件系统的交互是非常重要的,服务器的本质就将本地的文件发送给远程的客户端Node通过fs模块来和文件系统进行交互该模块提供了一些标准文件访问API来打开、读取、写入文件,以及与其交互。要使用fs模块，首先需要对其进行加载const fs = require("fs ");同步和异步调用fs模块中所有的操作都有两种形式可供

2021-10-27 06:15:00 158

原创 9.Buffer缓冲区

Buffer缓冲区产生的原因用户发给服务器的请求都是二进制数据，数据存储在Buffer中服务器给客户端的响应中，除了数值，字符串等还有图像、音频、视频等，传统的array数组无法存储这些二进制的文件。Buffer (缓冲区) ●从结构上看Buffer非常像一个数组,操作方法也类似与数组 ●数组无法存储这些写二进制的文件，buffer就是专门用来存储二进制数据，但是显示时都是以16进制，实际上一个元素就表示内存中的一个字节，范围是00-ff。 ●实际上Buffer中的内存不是通过Java

2021-10-27 05:45:00 227

原创 8.node搜索包的流程

node搜索包的流程node在使用模块名字时，他会首先在当前目录的node_modules中寻找是否含有该模块如果有则直接使用，没有则会去上一级node_modules中寻找；如果有则直接使用，没有则会去更上一级中寻找，直到找到为止；找到磁盘的根目录为止，如果没有则报错。...

2021-10-27 05:30:00 283

原创 7.配置cnpm

配置cnpm1.在下载相对大的包时，npm相对较慢2.由于一些问题，无法访问3.npm有一些情况下，不太稳定，多人发请求，npm服务器会误认为是攻击行为，对ip地址屏蔽解决方法：镜像服务器淘宝镜像npm config set registry https://registry.npm.taobao.org查看是否成功npm config get registry...

2021-10-27 05:15:00 736

原创 6.npm

NPM（Node Package Manager）包管理 NPM帮助其完成了第3 方模块的发布、安装和依赖等。借助NPM Node与第三方模块之间形成了很好的一个生态系统。（使开发变得简单，下载node后自带npm）NPM命令 npm -V -查看版本 npm -version -查看所有模块的版本 npm -帮助说明 npm search包名 -搜索模块包 npm install /i 包名 -在当前目录安装包 npm install 包名

2021-10-27 05:00:00 339

原创 5.包简介

包packageCommonJS的包规范允许我们将一组相关的模块组合到一起,形成一组完整的工具。CommonJS的包规范由包结构和包描述文件两个部分组成。包结构-用于组织包中的各种文件包描述文件-描述包的相关信息,以供外部读取分析包结构包实际上就一个压缩文件,解压以后还原为目录。符合规范的目录,应该包含如下文件:package.json 描述文件bin 可执行二进制文件lib js代码doc 文档test 单元测试包描述文件包描述文件用于表达非代码

2021-10-27 04:45:00 175

原创 4.exports和module

exports和module.exports的区别exportsjuli.jsexports = { name :"猪八戒"; age:89; sayName:function(){ console.log("我是猪八戒"); }};yinyong.jsvar juli = require("./juli");console.log(juli.name);console.log(juli.age);juli.sayName();直接使

2021-10-27 04:30:00 139

原创 3.node简介

node简介-node.js是一个能够在服务器端运行javascript的开放源代码、跨平台javascript运行环境-node采用google开发的V8引擎运行代码，使用事件驱动、非阻塞和异步I/O模型等技术来提高性能，可优化应用程序的传输量和规模总结：node.js扩展了js的适用范围，从前端到整个系统（浏览器–》服务器）瑞安·达尔（node之父），node主要借鉴Ruby所有项目最终的问题都是i/o问题，node主要是在客户端和服务器间加了一个node服务器，用来渲染页面node的用

2021-10-27 00:08:08 212

原创 2.进程和线程

进程和线程任务管理器–进程–CPU显示00表示闲置进程： -进程负责程序的运行提供一个必备的环境 -进程类似于一个工厂中的车间线程： -线程是计算机中最小的计算单位，线程负责执行进程中的程序 -线程相当于工厂中的工人单线程： -每个正在运行的程序（即进程），至少包括一个线程，这个线程叫主线程，主线程在程序启动时被创建，用于执行main函数，只有一个主线程的程序，称作单线程程序，主线程负责执行程序的所有代码（UI展现以及刷新，网络请求，本地存储等等）。这些代码只能顺序执行，无法并发

2021-10-27 00:06:23 119

原创 1.命令行窗口

命令行窗口（小黑屏）、CMD窗口、终端、shell打开方式：1.开始菜单—>运行—>CMD—>回车（win7）2.win+R—>CMD—>回车(win10)3.搜索框—>CMD—>回车(win10)常用指令：dir命令：列出当前目录下的所有文件cd命令：进入指定的目录，cd 目录名。例如：cd Desktopmd命令：创建一个文件夹，md 目录名rd命令：删除文件夹换盘符：“：”例如E:目录：. 当前目录，例如：（./）style.css括号

2021-10-27 00:04:59 204

原创 CSS案例---搜索记录

效果图：实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* 整个搜索记录的块 */ div { width: 268px; height: 350px; background-color: #ccc; } /* 输入框的大小

2021-10-25 22:45:00 383

原创 CSS案例---新闻

效果图：实现代码：<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style

2021-10-25 22:00:00 119

原创 CSS案例---个人简历

效果图：实现代码：<head> <meta charset="UTF-8"> <title>Document</title> <style> h1{ text-align: center; } .info{ color: green; } em{ color: red; } p{ text-indent: 2em; } </style></head>

2021-10-25 21:30:00 1027

原创 CSS（一）

CSS（一）CSS作用CSS 的主要使用场景就是美化网页,布局页面的.HTML 的局限性HTML只关注内容的语义CSS-网页的美容师CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.是一种标记语言，主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即结构 ( HTML ) 与样式( CSS )

2021-10-25 21:15:00 127

原创 CSS案例---百度首页

效果图：实现代码：<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>百度一下，你就知道</title> <style type="text/css"> /* 百度logo */ .logo { text-al

2021-10-25 21:15:00 511

原创 HTML表格（三）--小说排行榜

效果图：实现代码：<!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">

2021-10-25 20:30:00 1002

空空如也

空空如也