
JavaScript
姥姥家的饭
学海无涯苦作舟
展开
-
Js按日期分组数据
【代码】Js按日期分组数据。原创 2021-01-12 11:32:14 · 2144 阅读 · 2 评论 -
将html转换成图片
利用 html2canvas 脚本该脚本允许您直接在用户浏览器上拍摄网页或其中一部分的“屏幕截图”。屏幕截图基于DOM,因此可能无法真实表示100%的准确度,因为它无法生成实际的屏幕截图,而是根据页面上的可用信息构建屏幕截图。安装 npm安装npm install html2canvasimport html2canvas from 'html2canvas';使用html2canvas(document.body).then(function(canvas) { document.原创 2020-11-10 14:50:46 · 807 阅读 · 0 评论 -
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 · 202 阅读 · 0 评论 -
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 · 2286 阅读 · 0 评论 -
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 · 210 阅读 · 0 评论 -
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 · 210 阅读 · 0 评论 -
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 · 214 阅读 · 0 评论 -
JQ无限滚动(滚动至底部时,加载更多数据)
设计思想:利用onscroll方法监听盒子距离顶部的距离、可视区域高度、滚动条高度;距离顶部的距离+可视区域高度=滚动条高度的时候已到盒子底部然后进行数据加载;首次进入页面数据沾满盒子用回调函数判断盒子内容是否大于盒子的高度;否则继续加载;<div class="content"></div><script> $('.content').Scoller(res => { console.log('res:返回当前滚动到第几页'); })<.原创 2020-08-14 14:47:43 · 799 阅读 · 2 评论 -
es6异步变同步(让for循环规规矩矩的走完)
要用到ES6的 Pormise函数和async/await函数;首先了解一下什么是 Pormise函数和async/await函数Pormise函数简单的说就是用来处理异步操作的,可以让我们写异步调用的时候写起来更加优雅,更加美观便于阅读。 可以参考Promise 详情讲解async/await函数 是声明异步函数 可参考async/await详解什么时候用到呢?回调地狱(调接口的时候连续套四五层,这是很恐怖的事情);上一层逻辑没执行完不让走下一层逻辑 // 成功执行就用r原创 2020-08-10 16:37:39 · 4230 阅读 · 0 评论 -
js进阶 请求优化,渲染优化,JS优化
1.请求优化节流函数:一般用于,类似按钮请求这些,防止你一秒点击多次按钮产生重复请求,防抖函数:一般用于,类似实时监听input的请求,防止请求过多合理的应用缓存减少CPU计算、减少网络请求2.渲染优化静态资源的压缩合并(webpack 构建工具),不是根高级但是很有用。合并css,利用css继承CSS放前面,JS放后面懒加载(图片懒加载、下拉加载更多)避免css@import使用SASS/LESS, 无必要深层次的规则,这可能会导致复杂避免逐条改变样式,使用类名去合原创 2020-06-11 11:37:27 · 661 阅读 · 0 评论 -
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 · 496 阅读 · 0 评论 -
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 · 5905 阅读 · 0 评论 -
前端一键切换深色模式
切换主题色传统方式是切换css包获取用less,sass定义变量控制主题色,复杂而且不易维护;推荐一个插件 Darkmode.Js,一键切换深色模式使用方法引入Darkmode.Js,有两种方式:通过script标签直接引入;<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script><script> new Darkm.原创 2020-06-02 11:04:32 · 4997 阅读 · 0 评论 -
nativefier打包及配置nativefier
用nativefier快速生成安装包安装node.js(电脑没有安装在百度搜一下node.js去官网下载)安装nativefier,进入命令行界面,执行命令:npm install nativefier -g安装全局开始使用创建一个桌面应用程序:nativefier "https://www.baidu.com"或者自定义一个应用程序名:nativefier -...转载 2020-04-29 10:29:03 · 14143 阅读 · 8 评论 -
vue使用websocket及封装
创建websocket.jsconst WSS_URL = `wss://wss.xxxx.com/ws?appid=xxx`let Socket = ''let setIntervalWesocketPush = null/**建立连接 */export function createSocket() { if (!Socket) { console.log('建立w...原创 2020-04-26 14:26:43 · 11220 阅读 · 0 评论 -
vue实战干货,轻松应对市面上常见需求(建议收藏)
今天只聊业务实战,不聊代码原理(原理很重要…)一个完整的vue项目是要有自己所需要用到的基础东西vue-cli3(搭建一个vue工程,可在里面选less,vuex基础配置等等,感兴趣的童鞋可以自己百度一下)axios(从浏览器中创建XMLHttpRequests,node.js创建http请求。和ajax用法大同小异)外部组件框架(移动端推荐vant-ui,web端推荐element...原创 2020-04-14 11:40:26 · 7952 阅读 · 0 评论 -
js一键复制到剪切板
function copyText(text) { var textarea = document.createElement("input");//创建input对象 var currentFocus = document.activeElement;//当前获得焦点的元素 document.b...原创 2020-03-30 14:12:02 · 3091 阅读 · 2 评论 -
原生Js上传头像
HTML 部分<div class="upload"> <input type="file" name="file" id="file"> <img id="img" width="100%" height="100%" src="https://dss1.bdstatic.com/70cFuXSh_Q1Y...原创 2020-03-27 16:51:43 · 3342 阅读 · 0 评论 -
jQuery拖动排序并处理给后台的数据
引入jquery和插件sortable.js(可在官网下载);<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script><script src="js/jquery-sortable.js"></script>html结构<h3>点击下方拖拽排序...原创 2020-03-26 16:33:29 · 355 阅读 · 0 评论