- 博客(39)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 使用原生HTML、CSS、JavaScript实现时钟转动
这里直接贴代码reset.css/* reset */html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}header,footer,section,article,aside,nav,hgroup,address,fi
2021-08-03 09:47:25
905
原创 canvas实现时钟转动
1、找到canvas的中心，画出表心，以及表款2、获取当前时间，并根据时间画出时针，分针，秒针，还有刻度3、使用定时器，没过一秒获取新的时间，并重新绘图，达到时钟转动的效果1、表心和表框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g...
2021-07-27 09:55:32
489
原创 获取电脑摄像头权限，并将画面渲染在html中
此处获取电脑摄像头画面，并通过video标签展示画面<!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=
2021-07-26 10:34:35
460
原创 关于Canvas的学习（学习中）
一、创建一个画布1、一个画布在网页中一般是一个矩形框，通过canvas元素来绘制（默认情况下<canvas>元素没有边框和内容。） <canvas id="canvas" width="600px" height="300px"></canvas>2、使用Js来绘制图像，首先获取dom元素const canvas = document.getElementById('canvas');// 此处被渲染的标签必须是canvas标签const ctx
2021-07-13 15:43:22
128
原创 生成水印文件watermarkJS
export function watermark (settings) { let defaultSettings = { watermark_txt : 'text', watermark_x : 20, watermark_y : 20, watermark_rows: 20, watermark_cols: 20, watermark_x_space: 200, watermark_y_space: 100, watermark_color: '#aaa', .
2021-07-01 11:00:58
702
原创 js实时监测网速
利用图片加载速度进行判断// 网速let speedInterval = null// let networkInternet = null//let reNetWorkInternet = null//网络连接状态// let getConnectStatus = nulllet time = 5000export function TestInternet () { startNetwork() startSpeed()}export function stopTest
2021-05-27 09:36:59
3934
5
原创 怎么将JSON串base64编码
1.首先这里引入插件base-64cnpm i base-64 -D2.引入组件并调用就可以实现JSON串转base64格式import Base64 from 'base-64'const XParam = Base64.encode(JSON.stringify({ language: 'cn|en', location: 'false'}))3如上最终结果为XParam: eyJsYW5ndWFnZSI6ImNufGVuIiwibG9jYXRpb24iOiJmY
2021-01-12 17:04:16
1515
原创 Vue中图片转base64格式
1.首先在main.js中写一个函数并将函数挂载在全局变量中// 图片转base64格式 挂载在全局Vue.prototype.$base64Img = (e) => { return new Promise(function (resolve, reject) { // 使用Promise进行异步处理 let fileSize = 0 const fileMaxSize = 1024 // 设置图片最大为 1M fileSize = e.target.files[
2021-01-12 16:58:35
2521
原创 vue中监听移动端滑动事件
第一步 下载kim-vue-touch包npm i kim-vue-touch -Dcnpm i kim-vue-touch -D第二步再main.js全局引入import vueTouch from 'kim-vue-touch'Vue.use(vueTouch)第三步 再vue组件中使用kim-vue-touch提供了点击、长按、左滑、右滑、上滑、下滑等事件， 当你不需要传参时可以通过v-tap="touch"的形式调用方法， 当你需要传参时v-tap="(e)=&.
2021-01-06 11:14:19
2236
1
原创 在vue Cli 中使用Swiper插件
安装（必须携带版本，最新版本有问题）npm install vue-awesome-swiper@3 --save-dev//或npm i vue-awesome-swiper@3 -Dcnpm i vue-awesome-swiper@3 -D封装一个组件去使用他，不需要全局引入swiper为轮播图容器UIswiper-slide为轮播的内容img中的图片进行替换就能正确显示，注意图片的格式大小，不然会出现问题更多问题请访问https://www.swiper.com.cn/a
2020-12-13 10:02:22
333
原创 处理时间格式
Date.prototype.format = function(fmt) { //author: meizz var o = { "M+" : this.getMonth()+1, //月份 "d+" : this.getDate(), //日 "h+" : this.getHours(), //小时 "m+" : this.g.
2020-12-10 17:16:26
153
2
原创 前端常用tool.js
保留N位小数，最终返回的是字符串，若转换失败，返回参数原值pointX(str, x = 0) { if (!str && str !== 0) { return str; } const temp = Number(str); if (temp === 0) { return temp.toFixed(x); } return temp ? temp.toFixed(x) : str; }去掉字符串两端空
2020-12-10 16:51:03
615
原创 script的src和img的src跨域的区别
原理上都是利用标签的src可绕过同源限制，跨域请求的特点，硬要说不同，那么区别在于：img只能单向发送get请求，不可访问响应内容（只是展现），而script可对其进行解析
2020-11-24 10:04:25
1242
原创 如何优化前端页面加载速度
1.网络加载优化1.获取信息方式尽量使用Ajax方式获取内容2.减少HTTP资源请求次数和请求大小3.使用外链JS和CSS2.页面渲染优化1.在编写前端页面的时候，把CSS资源引用代码放到HTML文件的头部，这样浏览器可以优先下载CSS并尽早完成页面渲染！2.JavaScript的引用代码放到HTML文件底部，防止JS的加载和解析执行对页面渲染造成阻塞！3.页面缓存优化1.合理利用浏览器缓存可以大大提高页面中静态资源的加载速度（cookie，localStorage）4.图片优
2020-11-21 10:07:29
1507
原创 在项目中生成富文本编辑器
1.下载wangeditor插件$ npm i wangeditor -S2.在调用页引入import E from 'wangeditor'3.生成富文本编辑器在vue中methods中创建方法，在mounted中调用，this.$refs.XXX获取挂载的DOM元素// 创建富文本编辑器 createEditor () { const editor = new E(this.$refs.content) editor.config.zInde
2020-11-13 09:48:23
245
原创 如何在Vue中将数据导出成Excel
如何在Vue中将数据导出成Excel1.下载xlsx插件$ npm install xlsx $ npm i xlsx -S2.在组件中调用该插件// 在调用的组件中引入（全局引入在这里无法调用）import XLSX from 'xlsx'data () { return { // 列表数据 tableData: [], // 导出Excel数据 data: [ ['id', 'name', 'value'
2020-11-12 19:18:53
287
原创 vue引入eCharts
vue引入eCharts1.下载eChartsnpm i echarts -S2.在main.js中全局调用echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts3.在vue组件中调用echarts基本案例<template> <div> <div id="echart" :style='{ height: "300px" }'></..
2020-11-09 21:15:58
151
原创 Vue面试题（更）
一、对于MVVM的理解？MVVM是Model-View-ViewModel的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View代表UI组件，他负责将数据模型转化成UI展现出来。ViewModel监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View和Model的对象，连接Model和View。在MVVM架构下，VIew和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因
2020-11-02 09:52:28
308
1
原创 vue中监听页面滚动事件
页面监听滚动首先在data中return一个scrollTop数据用来存储滚动的高度其次在methods中定义一个方法用来进行你需要进行的操作接着就是在mounted中绑定事件于window上，这里只能使用事件监听addEventListener的方法最后就是离开这个页面时，销毁事件监听removeEventListener，因为如果我们不进行销毁的话，在离开当前页面会影响其他的页面操作代码如下；<script>export default { data () {
2020-10-25 17:53:32
1441
原创 Vuex 管理状态（数据）
基础这个状态自管理应用包含以下几个部分：state，驱动应用的数据源； view，以声明方式将state映射到视图； actions，响应在view上的用户输入导致的状态变化。以下是一个表示“单向数据流”理念的简单示意：但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：多个视图依赖于同一状态。 来自不同视图的行为需要变更同一状态。state用来存储模块中使用的数据mutations是用来存储操作state中的数据的方法action是...
2020-10-19 20:00:20
191
原创 Vue-Router 过度/切换动效
过渡动效<router-view>是基本的动态组件，所以我们可以用<transition>组件给它添加一些过渡效果：<transition> <router-view></router-view></transition>Transition 的所有功能在这里同样适用。单个路由的过渡上面的用法会给所有的路由设置一样的过渡效果，如果你想让每个路由组件有各自的过渡效果，可以在各路有组件内是由<tr...
2020-10-18 17:53:22
820
1
原创 Vue Router 导航守卫 /登录鉴权
Vue Router 高级导航守卫导航表示路由发生改变正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化，或使用beforeRouteUpdate的组件内守卫。全局前置守卫你可以使用router.beforeEach注册一个全局前置守卫：const router = ...
2020-10-18 16:53:39
631
原创 Vue路由基础
路由实现spa应用（singlepageapplication）优点：1.、整个应用只有一个html文件，所以的路由对应页面都是由组件来实现2、在切换路由时不需要重新加载页面只需要切换组件即可（切换效率较高）缺点：因为代码都在js中，html源码基本看不到内容，seo爬虫爬取的时html源码，不会爬取js中的内容对于seo不友好相对应的是（mpamultiplepageapplication多页面应用）路由基础配置语法如下co...
2020-10-14 14:57:35
183
原创 Vue中使用axios请求Ajax
Vue中使用aniox请求Ajaxaxios 是一个 封装好的 第三方ajax请求的库 特点：支持restfulapi 支持promise 解决回到地狱 支持ajax请求拦截get请求语法如下（不携带参数）axios.get('http://xxxx.xxx.com?a=10&b=20').then(res=>{ //成功回调}).catch(err=>{ // 失败回调})<...
2020-10-13 20:14:53
280
原创 Vue中利用fetch请求ajax
Vue中利用fetch请求ajax我们来写一个demo，请求URl：https://m.maizuo.com/gateway？cityId=440300&pageNum=1&pageSize=10&type=1&k=9532407中的数据；首先新建一个实例，在实例中写一个空的数组用于存储请求回来的json数据，方便将数据渲染到页面上；接下来在methods中写一个方法，在方法中定义一个请求函数fetch，fetch语法如下/* fet
2020-10-13 19:38:52
502
原创 Vue mixin混入
基础混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。首先定义混入对象，再将混入对象挂载到自定义组件上，从而实现Vue组件中的复用功能<body> <div id="app"> <home></home> </div></body><script>/
2020-10-11 15:50:15
153
原创 Vue插槽
插槽利用<slot>标签可以实现组件在不同的父组件中使用有不同的html结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl...
2020-10-10 10:50:14
133
1
原创 Vue组件多种通信方式
组件间关系组件间互相嵌套使用形成大概以下关系父子兄弟祖先后代组件分类容器组件（父组件）UI组件（子组件）状态提升（数据）：一个容器组件中可以使用多个UI组件应该将UI组件需要用到的数据都提升到容器组件中管理（只负责展示数据和收集数据不做逻辑处理，逻辑应该在容器组件中处理）组件通信父-->子通信<body> <div id="app"> <home></home> &l...
2020-10-09 21:03:02
123
转载 Vue组件基础
这里有一个 Vue 组件的示例：// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'})组件是可复用的 Vu
2020-10-09 08:47:13
271
转载 运算符的重载
1、什么是运算符的重载 重载：重新赋予新的含义；函数重载：对一个已有的函数赋予新的含义，使之实现新的功能。 运算符也可以重载，例：计算机处理整数、单精度数和双精度数进行加法的操作方法是不同的，由于C++已经对运算符“+”进行了重载，使“+”能适用于int，float，double类型的不同的运算。例题1.通过函数来实现复数相加#include<iostream>us...
2018-06-11 20:45:31
294
转载 基类的构造函数和析构函数能不能被继承
1：简单的派生类的构造函数#include<iostream> #include<string>using namespace std;class Student//声明基类{protected: int num; string name; char sex;public: Student(int n,string nam,char s)//定义基类（含...
2018-05-29 00:23:22
7913
转载 C++使用system（“pause”）;来暂停黑窗口
在编写的c++程序中，如果是窗口，有时会一闪就消失了，如果不想让其消失，在程序中添加：system（“pause”）；注意：不要在return的语句之后加，那样就执行不到了。分析：system（）就是调用（DOS）系统命令（和shell命令）。pause，即DOS命令集合中的暂停命令；在一个程序中写有system（“pause”）语句时，就是说从该程序里调用了“pause”命令，即让操作系统来暂停...
2018-05-15 22:52:58
2106
转载 常成员函数
常成员函数能不能返回非常成员函数：常成员函数不能用来更新类的成员变量，也不能调用类中用const修饰的成员函数。只能调用长成员函数，即常成员函数不能更改类中的成员状态，这与const语义相符，即不能返回非常成员函数；常成员函数中静态成员为什么可以改变：常成员函数的const是修饰成员函数的this指针，而静态成员没有this指针所以可以修改；...
2018-05-15 08:15:45
482
转载 C++的深拷贝和浅拷贝
对于普通类型的对象来说，它们之间的复制是很简单的，例如：int a=88;int b=a; 而类对象与普通对象不同，类对象内部结构一般较为复杂，存在各种成员变量。下面看一个类对象拷贝的简单例子。 #include <iostream>using namespace std; class CExample {private: int a;public: CE...
2018-04-17 08:35:00
149
原创 创建一个复数类Complex，进行复数的加、减运算。编写主函数进行测试。
数具有如下形式： realPart+imaginaryPart*i。 用double变量表示该类的private数据：realPart（实部）和imaginaryPart（虚部）。提供一个无参构造函数，使realPart和imaginaryPart均为0；一个有参构造函数，使对象在声明时就得以初始化。提供public的成员函数：① Complex ComPlexAdd(Compl...
2018-04-12 08:44:44
18688
1
转载 类的定义与实现
一、"类" 的介绍 在C++中, 用 "类" 来描述 "对象", 所谓的"对象"是指现实世界中的一切事物。那么类就可以看做是对相似事物的抽象, 找到这些不同事物间的共同点, 如自行车和摩托车, 首先他们都属于"对象", 并且具有一定得相同点, 和一些不同点, 相同点如他们都有质量、都有两个轮子, 都是属于交通工具等。"都有质量"、"两个轮子"属于这个对象的属性,
2018-04-09 21:10:45
3368
转载 C++中的引用符号“&“的用法
引用是C++引入的新语言特性，是C++常用的一个重要内容之一，正确、灵活地使用引用，可以使程序简洁、高效。 引用简介 引用就是某一变量（目标）的一个别名，对引用的操作与对变量直接操作完全一样。 引用的声明方法：类型标识符 &引用名=目标变量名； 【例1】：int a; int &ra=a; //定义引用ra,它是变量a的引用，即别名 说明： （1）&在此不是求地...
2018-04-02 20:42:05
1694
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人