- 博客(73)
- 资源 (4)
- 收藏
- 关注
原创 js操作时间
文章目录获取当前日期倒计时计时器时间戳转 HH-MM-SS获取时间戳获取当前日期getNowFormatDate() { var date = new Date(); var seperator1 = "-"; var year = date.getFullYear(); var month = date.getMonth() + 1; var strDate = date.getDate(); if (month >= 1 &&
2020-11-11 16:35:15 2223 1
原创 关于 JavaScript 的事件循环、微任务和宏任务
事件循环是 JavaScript 的一种执行模型,用于处理异步任务和事件。它通过监听事件队列中的任务,将任务分为宏任务和微任务,并按照一定的顺序执行它们,以实现 JavaScript 的异步执行。微任务和宏任务是指在 JavaScript 异步执行过程中,任务队列中的任务的分类。宏任务包括所有的异步任务,如 setTimeout、setInterval、I/O 操作等,而微任务则是宏任务执行完毕后立即执行的任务,如 Promise、MutationObserver 等。
2023-04-11 10:04:09 1008 1
原创 vue3使用element-china-area-data报错Cannot find module ‘element-china-area-data‘ or its corresponding typ
这个错误提示意味着代码中引用的模块 element-china-area-data 无法被找到,或者缺少类型声明文件。这通常是因为该模块没有被安装,或者安装的方式不正确。这样 TypeScript 就会把 element-china-area-data 当做一个无类型声明的模块来处理,但是可以避免出现编译错误。如果模块没有提供类型声明文件,可以手动创建一个类型声明文件。在项目根目录下创建一个名为。关于用TS使用没有规范类型的插件大家可以用这个思路解决问题~~
2023-03-29 19:15:11 1337
原创 uniapp上传图片、视频 包括预览、压缩、手动上传等功能
插件地址:https://ext.dcloud.net.cn/plugin?id=8941#detail
2022-10-24 10:44:30 793
原创 常用的ES6,ES7语法
变量声明let、const和var都是用来声明变量的,只不过let和const声明的变量作用域是块级,var是全局let声明的变量是可修改的,const声明的变量是不可以修改的if(true){ let name = '海贼王'; console.log(name); // 海贼王}console.log(name); // 报错--------------------------------------if(true){ const name = '海贼王'; console
2021-09-22 11:30:15 437
原创 uniapp更新版本
小程序版官方链接地址uni.getUpdateManager()本API返回全局唯一的版本更新管理器对象: updateManager,用于管理小程序更新。onCheckForUpdate callback 当向小程序后台请求完新版本信息,会进行回调 onUpdateReady callback 当新版本下载完成,会进行回调onUpdateFailed callback 当新版本下载失败,会进行回调applyUpdate 当新版本下载完成,调用该方法会强制当前小程序应用上新版本并重
2021-09-18 16:14:21 480
原创 express 调用阿里云发送短信
安装依赖npm i @alicloud/sms-sdk --save引入依赖const SMSClient = require('@alicloud/sms-sdk')发送短信router.get('/', function(req, res, next) { const phoneNum = req.query.phone if (req.data) { var accessKeyId = 'LTAI5tFnsf*************'; //在用户信息管理中可
2021-06-11 09:52:31 202 1
原创 Element 上传单张多张图片组件
<template> <div class='app-content'> <el-upload action="#" list-type="picture-card" :file-list="fileList" :on-preview="handlePictureCardPreview" :http-request="request"
2021-05-13 13:40:58 220
原创 vue-cli脚手架构建vue3项目
安装node.js 版本在8v+ (可以去官网下载)安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org(淘宝镜像会快一点,不安装也没关系)开始创建项目 vue create '项目名称'4. 运行项目cd 项目名称 (进入项目根目录)cnpm run serve (启动项目)...
2021-03-16 11:47:44 491
转载 vue3和vue2有哪些区别?
vue3.0的设计目标更小更快加强TypeScript支持加强API设计一致性提高自身可维护性开放更多底层功能压缩包体当前最小化并被压缩的 Vue 运行时大小约为 20kB(2.6.10 版为 22.8kB)。Vue 3.0捆绑包的大小大约会减少一半,即只有10kB!编译时优化Slot 默认编译为函数:父子之间不存在强耦合,提升性能Monomorphic vnode factory:参数一致化,给它children信息,建立数据 data这里就是Vue2与Vue3 最大的区
2021-03-02 18:07:45 2656
原创 Vue3的构建工具Vite使用
Vue3项目环境搭建安装Node.js官网下载安装:https://nodejs.org/en/ 对应系统、版本下载安装mac HomeBrew安装nodenode -v #版本查看npm -v #版本查看安装Vuenpm install -g @vue/cli #终端执行安装 Vue-CLI'vue -V #查看版本创建项目vue create <Project Name> #创
2021-03-02 18:05:38 340
转载 Js按日期分组数据
转载地址:小程序开发笔记(八)—Js数组按日期分组显示数据// 数据结构let data = [{ title: '今天天气真不错', content: '今天天气真不错,太阳暖暖的,白云在天上飘啊飘的,风轻轻的 吹着,吹得树叶摆啊摆的。', date: '2020-12-12'}, { title: '今天发生了件愉快的事情', content: '想着今天要陪小屁娃去看电竞展,以此为借口没有晨练! ', date: '2020-12-12'}, {
2021-01-12 11:32:14 1759
原创 vue项目常用插件
SortableJS 功能强大的JavaScript 拖拽库Sortable.js是一款优秀的js拖拽库,支持ie9及以上版本ie浏览器和现代浏览器,也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库,如Bootstrap、Element UI。你可以用来拖拽div、table等元素。vue-countTo 简单好用的一个数字滚动插件vue-countTo是一个无依赖,轻量级的vue组件,可以自行覆盖easin
2020-12-28 11:33:27 221
原创 将html转换成图片
利用 html2canvas 脚本该脚本允许您直接在用户浏览器上拍摄网页或其中一部分的“屏幕截图”。屏幕截图基于DOM,因此可能无法真实表示100%的准确度,因为它无法生成实际的屏幕截图,而是根据页面上的可用信息构建屏幕截图。安装 npm安装npm install html2canvasimport html2canvas from 'html2canvas';使用html2canvas(document.body).then(function(canvas) { document.
2020-11-10 14:50:46 686
原创 JSON 去重
json数据let json = [{name: '小明', age: 20}, { name: '小明', age: 12}, { name: '小刚', age: 20}, { name: '小刚', age: 25}];方法/* * JSON数组去重 * a:json * f:json字段名*/function removalHeavy(a, f) { let n = [], e = [];.
2020-09-25 10:14:12 264
转载 vue 节流函数防抖函数封装
封装assets/js/public.js/** * 函数防抖 * @param fn * @param delay * @returns {Function} * @constructor */export const Debounce = (fn, t) => { let delay = t || 500; let timer; return function() { let args = arguments; i..
2020-09-23 11:25:02 2952
原创 vue 全局弹窗内容自定义
最近项目中要用到二次确认组件,因为考虑到多出使用多次回调所以普通的公共组件满足不了。我需要的是this.massage();这种,所以就自己封装了一个,全局都可以使用在 src/components 下创建公共组件 visible.vuevisible.vue<!-- 二次确认组件 --><template> <section class='visible'> <el-dialog :visible.sync="visible" top="35v.
2020-09-11 15:36:08 2477
原创 typescript(五)--- typescript中的接口
接口的作用就是为这些类型命名和为你的代码或第三方代码定义规矩,达成一致在说接口之前我们需要了解下 TypeScript 里的类型,因为在接口的使用和类型密不可分。接口关键词 interface 定义一个接口。interface Home { // 定义接口,规定类型 name: string, age: number,}let options: Home = { // 使用接口 name: '小弥', age: 20,}console.log(opt.
2020-08-25 15:01:10 151
原创 typescript(四)--- class(类)
利用Class关键字定义类类的定义类的继承类的修饰符类的定义 class Person { name:string; constructor(name:string) { // 构造函数,实例化类的时候触发 this.name = name; } getName():string { return this.name; } setName(name:string):void { .
2020-08-21 15:11:45 2210
原创 typescript(三)--- typescript中的函数
函数声明告诉编译器函数的名称、返回类型和参数。函数定义提供了函数的实际主体。函数的定义定义方法传参可选参数默认参数剩余参数箭头函数函数的定义function run ():string { return '必须返回string类型';}function run ():number{ // 必须返回number类型 return 123;}匿名函数let run = function():string { return '必须返回string类型';}le.
2020-08-21 13:52:42 168
原创 typescript(二)--- typescript中的数据类型
typescript中的数据类型在typescript中为了让代码编写的更规范、有利于维护,增加了类型校验;布尔类型(boolean)数字类型(number)字符串类型(string)数组类型(array)元素类型(tuple)枚举类型(enum)任意类型(any)null 和 undefinedvoie类型never类型布尔类型(boolean)let flag: boolean = true; let flag: boolean = 123; // 如果赋值其他类型会
2020-08-21 12:11:58 163
原创 typescript(一)--- 介绍、安装、工具配置
什么是typescript1、TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。2、TypeScript 由微软开发的自由和开源的编程语言。3、TypeScript 设计目标是开发大型应用,它是尾缀为ts的文件,可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。安装typescript在使用npm之前电脑必须安装node.jsnpm install -g typescriptcnpm instal
2020-08-21 10:31:27 179
原创 JQ无限滚动(滚动至底部时,加载更多数据)
设计思想:利用onscroll方法监听盒子距离顶部的距离、可视区域高度、滚动条高度;距离顶部的距离+可视区域高度=滚动条高度的时候已到盒子底部然后进行数据加载;首次进入页面数据沾满盒子用回调函数判断盒子内容是否大于盒子的高度;否则继续加载;<div class="content"></div><script> $('.content').Scoller(res => { console.log('res:返回当前滚动到第几页'); })<.
2020-08-14 14:47:43 683 2
原创 es6异步变同步(让for循环规规矩矩的走完)
要用到ES6的 Pormise函数和async/await函数;首先了解一下什么是 Pormise函数和async/await函数Pormise函数简单的说就是用来处理异步操作的,可以让我们写异步调用的时候写起来更加优雅,更加美观便于阅读。 可以参考Promise 详情讲解async/await函数 是声明异步函数 可参考async/await详解什么时候用到呢?回调地狱(调接口的时候连续套四五层,这是很恐怖的事情);上一层逻辑没执行完不让走下一层逻辑 // 成功执行就用r
2020-08-10 16:37:39 4071
原创 jq搜索框插件
// 引入资源<link rel="stylesheet" href="css/source.css"><link rel="stylesheet" href="css/reset.css"><script src="./js/jquery.js"></script><script src="./js/source.js"></script>// 开始使用<div id="source" class="sourc.
2020-07-27 15:56:08 268
原创 axios下载Excel
在vue文件中import axios from "axios";methods: { // 获取excel文件流 getExcel(){ axios({ headers: { "Content-disposition": "attachment; filename=rzjl.xls", "Content-Type": "application / msexcel", }, responseType: "blob" method: "get", u
2020-07-01 11:42:14 367 1
原创 vue使用ECHarts并封装
npm安装echarts npm install echarts -S , 也可以 选择需要的模块,在线定制下载在 assets 中创建echarts文件夹放echarts-plug.js在echarts-plug.js 中引入echarts:import echarts from "echarts";开始封装—————————————————————————————————————————————import echarts from "echarts";let echarts = .
2020-06-23 11:08:33 377
原创 vue插件封装
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:1 添加全局方法或者 property。如:vue-custom-element2 添加全局资源:指令/过滤器/过渡等。如 vue-touch3 通过全局混入来添加一些组件选项。如 vue-router4 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。5 一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router使用插件———————————————
2020-06-23 10:47:01 173
原创 jQuery三级联动插件(2.3.2)
jQuery模仿element-ui三级联动,箭头图标用的layui里面的,可以自定义。数据用的本地三级联动数据,也可以改为后台数据代码github地址引入js <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://heerey525.github.io/layui-v2.4.3/layui/layui.js"></sc.
2020-06-22 09:54:17 1853 1
原创 js进阶 请求优化,渲染优化,JS优化
1.请求优化节流函数:一般用于,类似按钮请求这些,防止你一秒点击多次按钮产生重复请求,防抖函数:一般用于,类似实时监听input的请求,防止请求过多合理的应用缓存减少CPU计算、减少网络请求2.渲染优化静态资源的压缩合并(webpack 构建工具),不是根高级但是很有用。合并css,利用css继承CSS放前面,JS放后面懒加载(图片懒加载、下拉加载更多)避免css@import使用SASS/LESS, 无必要深层次的规则,这可能会导致复杂避免逐条改变样式,使用类名去合
2020-06-11 11:37:27 574
原创 js常用的正则及封装
调用方法 valida("验证类型","验证字符串") if (!valida('money', str)) { alert('输入的金额有误'); }正则方法 function valida(type, str) { let reg; switch (type) { case 'phone': reg = /^(13[0-9]|14[5|7].
2020-06-10 16:40:29 420
转载 js通过身份证计算年龄
如果把身份证号码传到页面上,在前端页面获取年龄就需要用到JS脚本了:示例:let age = GetAge('110101199003070337')function GetAge(identityCard) { var len = (identityCard + "").length; if (len == 0) { return 0; } else { if ((len != 15) && (len != 18))//身份证
2020-06-03 08:42:13 5654
原创 css 固定footer到底部
虽然说标题是说“固定”底部,但是我们想要的效果不是position: fixed。使用固定定位,在内容高于窗口高度时,就会挡住我们的内容。最完美的实现方式是使用Flexbox。实现的关键就是使用不太被关注的flex-grow属性,可以在我们的内容标签元素(比如div)中使用HTML<div id="document"> <nav> <h1>头部内容</h1> </nav> <main> <p>可以添加更多
2020-06-02 13:51:05 324
原创 纯css瀑布流布局
虽然这些新出的布局方式可以让我们解决很多以前的布局难题,但是像瀑布流布局这种,就无法用它们简单来实现了。因为瀑布流一般来说都是宽度一致,但是高度是根据图片自适应的。并且图片的位置也是根据在上方图片的位置而定的。其实最好实现瀑布流布局的办法就是用CSS的列属性套件,这套属性大多数都是用于排版杂志中的文本列。但是用于布局瀑布流也是特别实用哦。因为以前需要实现瀑布流,就必须有JavaScript的辅助来计算图片高度然后决定每张图片的定位和位置,所以现在有了列属性就可以使用纯CSS实现了。HTNL<d.
2020-06-02 13:48:26 3288
原创 前端一键切换深色模式
切换主题色传统方式是切换css包获取用less,sass定义变量控制主题色,复杂而且不易维护;推荐一个插件 Darkmode.Js,一键切换深色模式使用方法引入Darkmode.Js,有两种方式:通过script标签直接引入;<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script><script> new Darkm.
2020-06-02 11:04:32 4820
demo_cli3.zip
2020-04-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人