身份证校验规则

T_ambition — Tue, 14 Jun 2022 15:31:44 +0800

身份证校验规则

使用原生HTML、CSS、JavaScript实现时钟转动

T_ambition — Tue, 03 Aug 2021 09:47:25 +0800

这里直接贴代码 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

canvas实现时钟转动

T_ambition — Tue, 27 Jul 2021 09:55:32 +0800

1、找到canvas的中心，画出表心，以及表款 2、获取当前时间，并根据时间画出时针，分针，秒针，还有刻度 3、使用定时器，没过一秒获取新的时间，并重新绘图，达到时钟转动的效果 1、表心和表框

获取电脑摄像头权限，并将画面渲染在html中

T_ambition — Mon, 26 Jul 2021 10:34:35 +0800

此处获取电脑摄像头画面，并通过video标签展示画面 2、使用Js来绘制图像，首先获取dom元素 const canvas = document.getElementById('canvas'); // 此处被渲染的标签必须是canvas标签 const ctx

生成水印文件watermarkJS

T_ambition — Thu, 01 Jul 2021 11:00:58 +0800

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', .

js实时监测网速

T_ambition — Thu, 27 May 2021 09:36:59 +0800

利用图片加载速度进行判断 // 网速 let speedInterval = null // let networkInternet = null // let reNetWorkInternet = null //网络连接状态 // let getConnectStatus = null let time = 5000 export function TestInternet () { startNetwork() startSpeed() } export function stopTest

怎么将JSON串base64编码

T_ambition — Tue, 12 Jan 2021 17:04:16 +0800

1.首先这里引入插件base-64 cnpm i base-64 -D 2.引入组件并调用就可以实现JSON串转base64格式 import Base64 from 'base-64' const XParam = Base64.encode(JSON.stringify({ language: 'cn|en', location: 'false' })) 3如上最终结果为 XParam: eyJsYW5ndWFnZSI6ImNufGVuIiwibG9jYXRpb24iOiJmY

Vue中图片转base64格式

T_ambition — Tue, 12 Jan 2021 16:58:35 +0800

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[

vue中监听移动端滑动事件

T_ambition — Wed, 06 Jan 2021 11:14:19 +0800

第一步下载kim-vue-touch包 npm i kim-vue-touch -D cnpm 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)=&.

在vue Cli 中使用Swiper插件

T_ambition — Sun, 13 Dec 2020 10:02:22 +0800

安装（必须携带版本，最新版本有问题） npm install vue-awesome-swiper@3 --save-dev //或 npm i vue-awesome-swiper@3 -D cnpm i vue-awesome-swiper@3 -D 封装一个组件去使用他，不需要全局引入 swiper为轮播图容器UI swiper-slide为轮播的内容 img中的图片进行替换就能正确显示，注意图片的格式大小，不然会出现问题更多问题请访问https://www.swiper.com.cn/a

处理时间格式

T_ambition — Thu, 10 Dec 2020 17:16:26 +0800

Date.prototype.format = function(fmt) { //author: meizz var o = { "M+" : this.getMonth()+1, //月份 "d+" : this.getDate(), //日 "h+" : this.getHours(), //小时 "m+" : this.g.

前端常用tool.js

T_ambition — Thu, 10 Dec 2020 16:51:03 +0800

保留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; } 去掉字符串两端空

script的src和img的src跨域的区别

T_ambition — Tue, 24 Nov 2020 10:04:25 +0800

原理上都是利用标签的src可绕过同源限制，跨域请求的特点，硬要说不同，那么区别在于：img只能单向发送get请求，不可访问响应内容（只是展现），而script可对其进行解析

如何优化前端页面加载速度

T_ambition — Sat, 21 Nov 2020 10:07:29 +0800

1.网络加载优化 1.获取信息方式尽量使用Ajax方式获取内容 2.减少HTTP资源请求次数和请求大小 3.使用外链JS和CSS 2.页面渲染优化 1.在编写前端页面的时候，把CSS资源引用代码放到HTML文件的头部，这样浏览器可以优先下载CSS并尽早完成页面渲染！ 2.JavaScript的引用代码放到HTML文件底部，防止JS的加载和解析执行对页面渲染造成阻塞！ 3.页面缓存优化 1.合理利用浏览器缓存可以大大提高页面中静态资源的加载速度（cookie，localStorage） 4.图片优

在项目中生成富文本编辑器

T_ambition — Fri, 13 Nov 2020 09:48:23 +0800

1.下载wangeditor插件 $ npm i wangeditor -S 2.在调用页引入 import E from 'wangeditor' 3.生成富文本编辑器在vue中methods中创建方法，在mounted中调用，this.$refs.XXX获取挂载的DOM元素 // 创建富文本编辑器 createEditor () { const editor = new E(this.$refs.content) editor.config.zInde

如何在Vue中将数据导出成Excel

T_ambition — Thu, 12 Nov 2020 19:18:53 +0800

如何在Vue中将数据导出成Excel 1.下载xlsx插件 $ npm install xlsx $ npm i xlsx -S 2.在组件中调用该插件 // 在调用的组件中引入（全局引入在这里无法调用） import XLSX from 'xlsx' data () { return { // 列表数据 tableData: [], // 导出Excel数据 data: [ ['id', 'name', 'value'

vue引入eCharts

T_ambition — Mon, 09 Nov 2020 21:15:58 +0800

vue引入eCharts 1.下载eCharts npm i echarts -S 2.在main.js中全局调用echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 3.在vue组件中调用echarts基本案例

T_ambition的博客

身份证校验规则

使用原生HTML、CSS、JavaScript实现时钟转动

canvas实现时钟转动

获取电脑摄像头权限，并将画面渲染在html中

生成水印文件watermarkJS

js实时监测网速

怎么将JSON串base64编码

Vue中图片转base64格式

vue中监听移动端滑动事件

在vue Cli 中使用Swiper插件

处理时间格式

前端常用tool.js

script的src和img的src跨域的区别

如何优化前端页面加载速度

在项目中生成富文本编辑器

如何在Vue中将数据导出成Excel

vue引入eCharts

Vue面试题（更）

vue中监听页面滚动事件