![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Web前端开发
文章平均质量分 80
Web前端开发
梦幻之光_dream
快乐学习每一天
展开
-
es6模块化
node.js遵循了CommonJS的模块化规范。导入其他模块使用require()方法。模块对外共享成module.exports对象。大家都遵循同样的模块化规范写代码,降低了沟通的成本,极大方便了各个模块之间的相互调用。AMD、CMD适用于浏览器端。CommonJS适用于服务器端。大多数模块化规范给开发者增加了学习的难度和开发的成本。因此,es6模块规范诞生了。es6模块化规范中定义:每个js文件都是一个独立的模块。导入其他模块成员使用import关键字。向外共享模块成员使用export关键字。在原创 2022-06-30 22:48:02 · 1516 阅读 · 0 评论 -
es6系列-扩展运算符(...)
文章目录一.扩展运算符二.最大值案例三.实战运用1.参数序列2.结合div3.函数调用(合并操作 + 相加操作)4.扩展运算符后面可以放置表达式5.与解构赋值结合6.函数的返回值7.扩展运算符可以将字符串转成数组一.扩展运算符扩展运算符(spread):…作用:它可以将一个数组转为用逗号分隔的参数序列。总结:不管数字外面有什么符号,全部去掉。二.最大值案例<script> function _max(array) { var max=Math.max(...a原创 2022-05-07 19:28:59 · 1211 阅读 · 0 评论 -
趣谈web协议
文章目录一.前言二.TCP协议1.传输控制协议2.TCP三次握手三.网络程序通信的流程1.客户端程序2.服务端程序四.socket中的两种原理五.其他六.故事一.前言ip地址:网络设备中的一个地址。ipv4:目前使用的地址。由点号的十进制组成。ipv6:未来使用的地址。由冒号的十六进制组成。Windows的IP地址查看命令:ipconfig端口:可以理解为设备与外界通讯的出口。端口号:它会用数字代表。例如端口号默认是8080。进程:正在运行的程序。套接字(socket):两个程序进原创 2022-05-02 15:00:10 · 1078 阅读 · 0 评论 -
vue-element项目实战之商品管理系统
商品管理后台系统。(该项目由登录、会员等级、会员列表、商品详情、商品列表、用户中心等页面组成,有登录、注册、重置、增删改查等功能,详细功能前往gitee说明文档查看)原创 2022-04-20 16:44:34 · 2954 阅读 · 1 评论 -
Axios应用程序
文章目录0.准备工作1.Axios概述2.参考资料3.代码index.htmldata.json4.效果0.准备工作编译器:Hbuilder X1.Axios概述Axios是一个网络请求库,可以请求和响应数据,也能自动转换json数据。2.参考资料Axios中文文档:https://www.axios-http.cn/docs/introAxios百度百科https://baike.baidu.com/item/axios/56933453?fr=aladdin3.代码index.ht原创 2022-01-18 14:50:57 · 527 阅读 · 0 评论 -
vue学习笔记
文章目录0.准备工作1.声明式渲染2.条件渲染3.列表渲染4.事件处理5.表单输入绑定6.vue组件7.计算属性8.插槽0.准备工作https://cn.vuejs.org/v2/guide/installation.html下载好的vue.js可以放在js文件中。实验工具:vscode编译器。1.声明式渲染声明式渲染:将数据渲染进DOM中,也就是网页中。<!DOCTYPE html><html lang="en"><head> <meta原创 2022-01-18 13:53:43 · 749 阅读 · 0 评论 -
vue-router案例 - 英文单词分类
文章目录一.英文单词分类1.代码2.功能设计3.参考资料vue.js路由二.vue-cli+vue.router的实战笔记1.vue-router的安装2.命令讲述3.配置路由的思路4.项目运行5.错误分析一.英文单词分类1.代码<!DOCTYPE html><html><head><meta charset="utf-8"><title>英文单词分类</title><script src="https://cdn原创 2022-01-18 11:06:10 · 761 阅读 · 0 评论 -
webpack的安装与使用
文章目录一.webpack概述二.webpack的安装1.全局安装webpack、webpack-cli2.版本查看三.项目文件hello.jsmain.js配置webpack.config.js文件四.webpack打包五.引入打包之后的js文件六.查看最终结果七.监听内容手动实现命令实现一.webpack概述webpack是一个打包工具,基于node.js,可以将开发环境转成运行环境,可以快速地浏览代码与效果。在webpack里,一切文件皆为模块。webpack的功能:将多个js文件合并在一起,原创 2022-01-14 11:57:28 · 666 阅读 · 0 评论 -
Vue-cli搭建demo项目
文章目录1.查看版本号2.安装淘宝镜像3.vue-cli安装4.查看是否安装5.下载模板6.进入文件目录,安装依赖1.查看版本号node -v :查看node.js版本号npm -v :查看npm版本号2.安装淘宝镜像npm install --registry=https://registy.npm.taobao.org3.vue-cli安装npm install vue-cli -g4.查看是否安装vue list5.下载模板vue init webpack firstvue原创 2022-01-13 16:02:05 · 493 阅读 · 0 评论 -
canvas教程18-刮刮乐
文章目录一.刮刮乐二.效果图篇章一.刮刮乐<!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"&g原创 2021-08-02 09:18:56 · 290 阅读 · 0 评论 -
canvas教程17-合成
文章目录一.合成二.知识点总结三.图形解释1.默认(source-over)2.source-in(相交的部分)3.source-out4.source-atop5.destination-over6.destination-in7.destination-out8.destination-atop9.lighter篇章一.合成<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-08-02 09:14:19 · 328 阅读 · 0 评论 -
canvas教程16-滚动的车轮
文章目录一.滚动的车轮二.效果图篇章一.滚动的车轮<!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.原创 2021-08-02 08:45:44 · 461 阅读 · 0 评论 -
canvas教程15-变形
文章目录一.保存与恢复二.平移( translate )1.用法2.源码3.图形解释4.总结5.不正确的做法三.旋转( rotate )1.用法2.源码3.效果图四.缩放( scale )1.知识点2.源码3.效果图五.变形的综合写法1.用法2.源码3.效果图篇章一.保存与恢复var ctx = canvas.getContext("2d");canvas是可以进行变形的,但是,变形的不是元素,而是整个画布的渲染区域(ctx)。我们需要在画布变形前进行 保存【 save() 】和 恢复【 rest原创 2021-08-01 11:32:25 · 883 阅读 · 0 评论 -
canvas教程14-资源管理器
文章目录一.资源管理器二.源码三.效果图篇章一.资源管理器资源管理器:在开发游戏的时候,静态资源是需要请求回来的。如果游戏直接开始(静态资源没有被请求回来),那么网页可能会报错、空白等现象。例如,游戏背景图如果没有被请求过来,那么游戏的背景就会出现空白现象。资源管理器:当游戏资源全部加载完,再开始游戏。我们目前利用canvas,在渲染过程中对图片进行资源加载。var allAmount = Object.keys(this.R);此时会返回一个数组,它是所有key的集合。获取对象中原创 2021-07-31 17:16:36 · 325 阅读 · 0 评论 -
canvas教程13-使用图片
文章目录一.使用图片二.源码三.效果图篇章一.使用图片src:设置图片的地址。onload:图片加载完立即执行。drawImage的参数解析:ctx.drawImage(image,100,100,400,200); 第一个参数:图片元素。第二、三个参数:表示x坐标、y坐标。第四、五个参数:表示图片的宽度、高度。ctx.drawImage(image,100,100,400,200,90,90,50,50);除了image之外,前四个参数用来描述图片,后四个参数用来描述切片(从图原创 2021-07-31 17:11:27 · 665 阅读 · 0 评论 -
canvas教程12-阴影
文章目录一.阴影二.源码三.效果图篇章一.阴影shadowOffsetX与shadowOffsetY的值代表阴影偏移的坐标点。如果值是正数,那么往右、下偏移;如果值是负数,那么往左、上偏移。shadowOffBlur的值越大,模糊效果就越明显。shadowColor:阴影的颜色。二.源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta h原创 2021-07-31 17:05:54 · 313 阅读 · 0 评论 -
canvas教程11-渐变
文章目录一.渐变1.线型渐变2.径向渐变二.源码1.线型渐变2.径向渐变三.效果图1.线型渐变2.径向渐变篇章一.渐变渐变有两种方式,一种是线型渐变,一种是径向渐变。1.线型渐变var linear = ctx.createLinearGradient(x1,y1,x2,y2);这4个参数分别表示渐变线段的起始点(x1,y1)和结束点(x2,y2)。addColorStop方法有2个参数:linear.addColorStop(0.5,"grey");第一个参数:当前渐变的位置(0-1原创 2021-07-31 17:00:30 · 670 阅读 · 0 评论 -
canvas教程10-绘制文本
文章目录一.绘制文本二.源码三.效果图篇章一.绘制文本font属性:可以设置字体的大小和字体名称。fillText方法的作用:填充文字。第一个参数:填充的文字内容。第二个参数:代表x的值。第三个参数:代表y的值。所以,第二、三个参数的作用:设置文字的坐标位置(x,y)。textAlign属性的作用:文字的对齐方式。属性值讲解:left:文本左对齐。right:文本右对齐。center:文本居中对齐。start(默认值):文本从指定位置开始。end:文本才指定位置结束。二.源码原创 2021-07-31 16:44:33 · 810 阅读 · 0 评论 -
canvas教程9-线型的属性
文章目录一.线型知识二.图案V的案例1.源码2.效果图三.虚线案例1.源码2.效果图篇章一.线型知识lineWidth属性:设置线的粗细,属性值必须是数字,默认是1且没有单位。lineCap属性的作用:绘制线段末端。lineCap有3个属性值: butt:线段末端以方形结束。 round:线段末端以圆形结束。 square:线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度的一半的矩形区域。lineCap属性的学习网址:https://developer.mozil原创 2021-07-28 20:18:59 · 554 阅读 · 0 评论 -
canvas教程8-小球连线之碰壁则返
文章目录一.反弹球的无规则运动与连线二.效果图篇章一.反弹球的无规则运动与连线<!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, in原创 2021-07-28 20:02:50 · 477 阅读 · 0 评论 -
canvas教程7-炫彩小球
文章目录一.炫彩小球二.效果图篇章一.炫彩小球<!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-07-27 15:57:27 · 401 阅读 · 0 评论 -
canvas教程6-绘制圆弧
文章目录一.绘制圆弧1.学习canvas的网站2.知识点二.源码三.效果图篇章一.绘制圆弧1.学习canvas的网站图中的知识来源于MDN Web Docs。canvas参考教程:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes2.知识点绘制圆弧的时候,我们需要学习arc方法。ctx.arc(200,200,100,0,2*Math.PI,false);(200,20原创 2021-07-26 19:32:39 · 979 阅读 · 0 评论 -
canvas教程5-绘制路径
文章目录一.绘制不规则图形的思路1.需要设置路径起点2.使用绘制命令画出路径3.封闭路径4.填充或者绘制已经封闭路径的形状二.源码三.图形解释篇章一.绘制不规则图形的思路绘制路径的作用:为了设置一个不规则的多边形状态。路径是闭合的,需要按照规定的步骤进行绘制。步骤如下:1.需要设置路径起点开始路径。ctx.beginPath();2.使用绘制命令画出路径①移动绘制点。ctx.moveTo(x,y);②描述绘制路径。ctx.lineTo(x,y);③再次描述路径。ctx.lin原创 2021-07-26 16:02:03 · 980 阅读 · 0 评论 -
canvas教程4-canvas的绘制功能
文章目录一.canvas的绘制功能二.源码篇章一.canvas的绘制功能填充矩形的颜色:fillStyle属性。填充矩形:fillRect方法。绘制矩形边框的颜色:strokeStyle属性。绘制矩形边框:strokeRect方法。擦除矩形:clearRect方法。二.源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-eq原创 2021-07-25 19:39:31 · 485 阅读 · 0 评论 -
canvas教程3-用面向对象思维来实现动画
文章目录一.用面向对象思维来实现canvas动画二.源码篇章一.用面向对象思维来实现canvas动画因为canvas不能得到已经存在的对象,所以我们要维持对象的状态。在canvas动画中,我们都使用面向对象来进行编程,因为我们可以使用面向对象的方式来维持canvas需要的属性和状态。总结:动画过程在定时器里,每一帧都会调用实例对象的更新和渲染的方法。二.源码<!DOCTYPE html><html lang="en"><head> <meta原创 2021-07-25 19:29:59 · 523 阅读 · 0 评论 -
canvas教程2-canvas的编程思想
文章目录一.canvas的编程思想二.源码篇章一.canvas的编程思想canvas的像素化:我们使用canvas绘制了一个图形,一旦绘制成功,图形就会被像素化。canvas没有能力再次修改画布上已经存在的内容,这就是canvas比较轻的原因。flash重的原因:它可以通过对应的API得到画布上已经存在的内容再次绘制。canvas编程思想:我们想要图形移动,必须按照清屏-更新-渲染的逻辑进行编程,总之就是重新再画一次。动画的过程:静态页面的连续播放。我们把每一次绘制的静态画面叫做 “一帧”,原创 2021-07-25 19:23:36 · 723 阅读 · 0 评论 -
canvas教程1-canvas的基本使用
文章目录一.canvas的简介二.源码三.效果图四.知识点总结篇章一.canvas的简介一直以来,web上的动画都是flash实现的,例如,广告、游戏等。flash是有缺点的,例如我们需要安装Adobe flash player插件,并且漏洞多、重量比较大、卡顿、不流畅等。因此,HTML5推出了新的画布标签—canvas。canvas是一个轻量级的画布,我们使用canvas进行JavaScript编程,不需要增加额外的插件,性能也很好,不卡顿,在手机中也很流畅。canvas彻底颠覆了flash原创 2021-07-24 08:21:05 · 4747 阅读 · 1 评论 -
jQuery教程10-轮播图之淡入与淡出
文章目录一.轮播图的功能分析二.源码三.效果图篇章一.轮播图的功能分析1.左侧、右侧按钮需要绑定单机事件。2.利用特效函数。【当前显示的图片淡出之后,下一张图渐渐地淡入】二.源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <原创 2021-07-23 12:50:39 · 433 阅读 · 0 评论 -
jQuery教程9-绑定事件
文章目录一.绑定事件二.源码三.效果图篇章一.绑定事件$(selector).eventType(callBack);二.源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont原创 2021-07-23 12:45:04 · 111 阅读 · 0 评论 -
jQuery教程8-特效函数
文章目录一.特效函数二.源码三.效果图篇章一.特效函数jQuery框架提供了很多的特效函数。$(selector).slideDown(time,callBack) || $(selector).slideUp(参数可有可无,但是不超过2个) 作用:可以让匹配的元素进行向下滑动或向上滑动。第一个参数time:代表每一次的动画时间,单位:毫秒。第二个参数callBack:回调函数。总结:动态修改元素的高度。$(selector).fadeOut || $(selector).fade原创 2021-07-23 12:40:45 · 216 阅读 · 2 评论 -
jQuery教程7-操作节点文本
文章目录一.操作节点文本二.源码三.效果图篇章一.操作节点文本在原生DOM操作的时候,我们可以操作节点文本。操作非表单元素文本(input) — 使用的是innerHTML属性。操作表单元素文本 — 使用的是value属性。jQuery框架也提供了一些操作文本的方法。操作非表单元素文本 — 使用html方法。操作表单元素文本 — 使用val方法。二.源码<!DOCTYPE html><html lang="en"><head> &l原创 2021-07-23 12:31:50 · 272 阅读 · 0 评论 -
jQuery教程6-操作节点属性
文章目录一.操作节点属性二.源码三.效果图篇章一.操作节点属性attr是attribute的缩写,有属性的意思。attr方法的作用:获取节点的属性。二.源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=原创 2021-07-23 12:26:23 · 317 阅读 · 0 评论 -
jQuery教程5-操作节点样式
文章目录一.操作节点样式二.源码三.效果图四.总结篇章一.操作节点样式css方法的作用:可以设置匹配节点的行内样式。 $("div").css("color","red");第一个参数:匹配节点添加样式名字。第二个参数:匹配节点添加样式的属性值。二.源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-原创 2021-07-23 12:21:23 · 452 阅读 · 0 评论 -
jQuery教程4-表格制作
文章目录一.表格制作二.效果图篇章一.表格制作<!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-07-23 11:10:36 · 561 阅读 · 0 评论 -
jQuery教程3-框架独有的选择器
文章目录一.框架独有的选择器selector:first || selector:lastselector:odd(奇数) || selector:even(偶数)selector:gt(index) || selector:lt(index)selector:eq(index)二.源码三.效果图篇章一.框架独有的选择器jQuery框架给我们提供了独有的css选择器,只能在jQuery框架中使用。selector:first || selector:last作用:可以获取标签的第一个元素或最后一个元原创 2021-07-23 10:36:58 · 124 阅读 · 0 评论 -
jQuery教程2-框架的基本使用
文章目录一.框架的基础知识二.源码三.效果图篇章一.框架的基础知识在前端领域,jQuery是非常优秀的js函数库。$函数是核心函数,可以用来匹配节点树上的标签。jQuery支持的css选择器:*【通配选择器】、标签选择器、类选择器、id选择器等。jQuery是以$函数开头的,并且可以连续打点,支持链式语法。css函数是jQuery提供的函数,用来设置匹配节点的行内样式。jQuery对象(类数组)才可以使用jQuery里的方法。二.源码<!DOCTYPE html><htm原创 2021-07-23 10:26:24 · 152 阅读 · 0 评论 -
jQuery教程1-框架的简介和体验
文章目录一.简介二.源码篇章一.简介jQuery是一个简洁的JavaScript框架,设计宗旨是写更少的代码,做更多的事情。jQuery拥有独特的链式语法的特性,也就是用点的方法进行连接。jQuery拥有高效灵活的css选择器,并且可以进行扩展。jQuery可以兼容各种主流的浏览器。参考jQuery百度百科:https://baike.baidu.com/item/jQuery/5385065?fr=aladdin引包 :js文件嵌套在静态页面里,让js语法有了可以执行的环境。jQuery原创 2021-07-23 10:20:32 · 132 阅读 · 0 评论 -
BOM教程4-游戏实战之坦克行走
文章目录一.游戏素材官网二.源码三.实现功能篇章一.游戏素材官网游戏素材网站:https://www.aigei.com/二.源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con原创 2021-07-19 08:57:10 · 142 阅读 · 0 评论 -
BOM教程3-运动套路
文章目录一.运动套路二.源码篇章一.运动套路在前端领域中,元素经常有运动效果,实现原理:定时器 + 改变定位元素的left、top套路。二.源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo原创 2021-07-19 08:52:06 · 136 阅读 · 1 评论 -
BOM教程2-定时器
文章目录一.定时器二.源码篇章一.定时器定时器:每隔一段时间执行一次回调函数。定时器方法setInterval(callBack,time); //设置时间间隔1.定时器是BOM对象的方法,因此可以省略window。2.第一个参数【回调函数】:当一个函数执行的时候,传递实参是另外一个函数声明部分。这个参数必须有。3.第二个参数【时间:毫秒(ms)】 1s=1000ms 这个参数可有可无。总结在js当中,定时器是异步语句。js中的异步语句:语句很耗时间。异步语句有一原创 2021-07-19 08:47:50 · 233 阅读 · 0 评论