Ko0VGOmBbaqG
简单的多条折线图 小伙伴写过多条折线图的都知道， 常见的折线图是xAxis配置项下的data属性上设置时间或者日期。 series配置项下是对应的legend中的数据以及该条折线的数据。 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>多条折线图</title> <scriptsr...
Mingtianxie 遇见问题，这是你成长的机会，如果你能够解决，这就是收获。 作者：晚来南风晚相识
创建多页面入口 1.在根目录下创建demo1.htm1，demo2.htm1这两个文件 2.在vite.config.js文件中配置入口 3.在src下创建文件夹和文件，src/demo1/app.vue和src/demo1/main.js demo1.htm1 <!doctypehtml> <htmllang="en"> <head> <metacharset="UTF-8"/> <linkrel="icon"type="image/svg+xml"href="/vite.svg"/> <metaname="viewpo...
起因 今天遇见一个特别有意思的小功能。 就是更换人物图像的背景颜色。 大致操作步骤就是:点击人物-实现背景颜色发生变化 将图片绘画到canvas画布上 我们需要将图片绘制到canvas画布上。 这样做的目的是为了方便我们去操作像素点来更改颜色。 首先创建Image的实例。将图片的地址赋值给图片实例src。 当图片加载完成后，onload事件可以知道图片是否加载完成 根据Image的实例将图片大小赋值给画布，让他们大小保持一致。 最后使用ctx.drawImage来进行绘画就行 特别提醒的是：src属性一定要写到onload的后面，否则程序在IE中会出错。 <body> &...
初识canvas canvas我们可以理解为是一个画布。 它是一个载体。 我们的文字，图案，都是在这个载体(画布)上来进行操作的。 canvas的5个要素 canvas具有的5个要素： 1.id元素的唯一标识 2.width宽度 3.height高度 4.画笔,上下文canvas.getContext('2d') 5.内容(文字，图形，其他) canvas有两种形式的绘制模式 canvas有两种形式的绘制模式: 1.填充模式(我们可以理解为是实心的)如：ctx.fillRect 2.路径模式(空心,线段连成的图案):由一系列的点连成的线段ctx.strokeRect 使用ctx.f...
场景描述 今天遇见一个问题，那就是产品希望在弹出来的窗口。 可以移动这个弹窗的位置 增加用户体验，我们直接使用的element-ui中的Dialog对话框 我们现在需要拖拽标题，移动元素位置 元素拖拽的思路 要让元素按下移动，我们需要实现以下几个步骤： 1.鼠标按下元素跟随光标移动 2.鼠标抬起元素停止移动 3.移动的区域进行限制(只能在屏幕可视区域内移动-不能产生滚动条) 4.鼠标抬起之后，移除移动和抬起事件 5.处理抬起事件偶尔不会被触发呢？ 拖拽的核心示意图以及用到的方法 offsetX：设置或获取鼠标指针位置相对于触发事件对象的x坐标。 offsetY：设置或获取鼠标指针位置...
newDate()你知道多少 很多小伙伴可能都知道, Date是js中的一个内置对象，用于处理日期和时间。 当你调用newDate()时，它会创建一个新的日期(Date)对象。 表示当前本地日期和时间。 那么你知道newDate()可以接收几种形式的参数吗？ 它的默认返回是什么日期格式? newDate()可以接收4种形式的参数。 常见的日期格式有几种？ 我们经常看见WedAug16202308:00:00GMT+0800(中国标准时间) 这样的时间格式，你知道有几种常见的日期格式吗？ 上面这一种又是属于那一种呢？ 好了，不卖关子，常见的日期格式有如下这几种： 1.中国标准时间如:Wed...
签名的实现功能 我们要实现签名： 1.我们首先要鼠标按下,移动，抬起。经过这三个步骤。 我们可以实现一笔或者连笔。 按下的时候我们需要移动画笔，可以使用moveTo来移动画笔。 e.pageX,e.pageY来获取坐标位置 移动的时候我们进行绘制 ctx.lineTo(e.pageX,e.pageY) ctx.stroke() 通过开关flag来判断是否绘制 2.我们可以调整画笔的粗细 3.当我们写错的时候，可以撤回上一步 4.重置整个画板 5.点击保存的时候，可以生成一张图片 6.base64转化为file 实现签名 <!DOCTYPEhtml> <htmllang...
实现放大镜的整体思路 1.当鼠标放在图片上的时候,出现蒙层。 2.出现蒙层，让鼠标在蒙层中心 3.限制蒙层移动的范围 4.放大镜移动 最终实现的效果 鼠标放上去的时候,出现一个蒙层。 蒙层的移动范围只能在图片里，不能超出范围。 移动蒙层时，右侧会出现图片的放大部分。 移除图片的范围，放大镜消失。 鼠标放上去时候出现蒙层 <style> { padding:0; margin:0; } .box{ margin-left:400px; margin-top:150px; position:relative; } .small-box{ position:absolute;...
开场白 5月份，vue团队发布了vue3.3. 这次小版本的发布主要解决了-- Vue与TypeScript一起使用时的许多长期存在的痛点. 下面我们一起来学习一下vue3.3新特征 准备新新特征的环境 根据官方团队的描述，我们需要准备一下工作。 vue升级到3.3时，建议同时更新以下依赖项： Volar/vue-tsc@^1.6.4 vite@^4.3.5 @vitejs/plugin-vue@^4.2.0 vue-loader@^17.1.0（如果使用webpack或vue-cli） 使用vite来学习vue3.3的新特征 1.yarncreatevite创建vite项目 2.输...
1.ListView的简单介绍 ListView是最常用的可以滚动组件之一，它可以沿一个方向进行线性排列所有的子组件。下面是ListView的属性值介绍：scrollDirection:列表的滚动方向，可选值有Axis的horizontal和vertical，默认是垂直方向上滚动。controller:控制器，与列表滚动相关，比如监听列表的滚动事件。physics:列表滚动至边缘后继续拖动的物理效果，Android与iOS效果不同。Android会呈现出一个波纹状（对应ClampingScrollPhysics），而iOS上有一个回弹的弹性效果（对应BouncingScrollPhysi...
1flutter项目目录介绍 android安卓平台的的相关代理build编译后的iosios平台的的相关代理lib自己写代码的目录包好自己的代码资源test放测试文件的pubspec.yaml我们项目的配置文件包含有项目名称、项目描述、第三方资源依赖 2lib目录下的main.dart是fluttre项目的入口文件 fim快捷键引入这个import'package:flutter/material.dart';dart中所有的方法都是放在这个main方法中的哈在flutter中所有的组件都是类的形式 遇见问题，这是你成长的机会，如果你能够解决，这就是收获。 作者：晚...
css3的属性应该加上浏览器前缀 不同的浏览器内核不同，因此css的前缀不同。常见的几种浏览器内核火狐浏览器Geoko内核前缀是-mox-谷歌浏览器，Webkit内核前缀是-wekbit-IE浏览器Trident内核前缀是-ms-opera浏览器Presto内核前缀是-o- 文字描边 <style>{padding:0;margin:0;}div{font-size:50px;/颜色是无色，描边成为淡红色/-webkit-text-stroke:1pxf00;color:transparent;}</style><div>好好学习</...
连接数据库 mysql-hlocalhost-uroot-proot DQL-介绍 DQL英文全称是DataQueryLanguage(数据查询语言)，数据查询语言，用来查询数据库中表的记录 查询 SELECT 字段列表 FROM 表名列表 WHERE 条件列表 GROUPBY 分组字段列表 HAVING 分组后条件列表 ORDERBY 排序字段列表 LIMIT 分页参数 查询一个表中的多个字段 select字段1,字段2,....from表名; 如:selectid,workno,name,sex,age,intimefromperson; 或者 selectfrom表名;[这...