anphygvyti09102-CSDN博客

转载 canvas 简单的实现柱状图

效果如何，先看下图既然看到图片的效果了，那么下面我们进行代码分析1.封装一个函数来绘画柱形条// 在 canvas 画一个柱形条function draw(opts) { // 获得 2d 上下文对象 let ctx = opts.ctx let oPoint = opts.oPoint let lPoint = opts.lPoint...

2019-08-01 18:00:00 590

转载用 node-xlsx 将从打卡机中导出的考勤信息处理生成考勤表

导出来的考勤信息表（只是获取打卡信息并处理成报表.xlsx , 初始的表格没了）下图是 “报表.xlsx”看起来乱糟糟的，虽然能看但是需要花费大量的精力去处理才能成标准表格，下面我直接上代码（代码里已有注释）const xlsx = require('node-xlsx');const fs = require('fs');// 获取 xlsx 表格中的数...

2019-07-12 17:52:00 1259

转载 Mint UI官网无法访问的解决办法（非首创）

Mint UI：饿了么官方开发的移动端组件库，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。对于常用这个组件库的我苦恼于它的时而可以访问时而又不可以，今天将它进行本地的搭建方法罗列出来--非首创（之前在其他地方看到的教程--时间有点久了忘了链接）方法一：如果你现在还能打开访问官网，那么看下面的 gif下载下来解压好...

2019-07-10 16:58:00 971

转载 Vue 3.0 yarn test 进行测试时报错

yarn test 执行报错Error: ENOSPC: no space left on device, write at Object.writeSync (fs.js:568:3) at Object.writeFileSync (fs.js:1199:26) at Object.writeFileSync (D:\project\jest\n...

2019-07-05 18:48:00 893

转载 Yarn 无法自动生成 yarn.lock 文件

info No lockfile found.[1/4] Resolving packages...warning jest > jest-cli > jest-config > jest-environment-jsdom > jsdom > left-pad@1.3.0: use String.prototype.padStart()[2...

2019-05-14 17:31:00 3100

转载使用Mint-UI的Loadmore实现上拉加载更多和下拉刷新

最近用 mint-ui 实现了上拉加载更多和下拉刷新，正好今天有空就把实现过程都给记录下来，下面我准备来个小白教程。我这个利用vue单页和普通页面方式展示。1、首先用脚手架 vue-cli 搭建环境（这里我百度找了一个算看到舒服的教程，仅供参考）2、Mint-UI(这里官网快速上手，可以根据里面的教程快速的添加 mint-ui 到项目中去,图片和代码看都有，推荐自己看图手...

2019-01-18 14:53:00 288

转载 JavaScript的日常所得

1、去除字符串左右两边的空格（利用正则实现trim）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>去除字符串左右两边的空格</title></head><body&g...

2018-11-30 15:20:00 109

转载 web网站性能优化整理

async 和 defer 的区别<script src="a.js" async></script><script src="a.js" defer></script>上面 async 和 defer 都是异步加载脚本，虽然两者都是页面解析过程中在后台下载，但是 async 在下载完并且页面还未解析完时将...

2018-11-12 18:05:00 176

转载 ArrayBuffer

ArrayBuffer语法var abuffer = new ArrayBuffer(length)length 要创建的 ArrayBuffer 的大小，单位为字节。如果 length 大于 Number.MAX_SAFE_INTEGER（>= 2 ** 53）或为负数，则抛出一个 RangeError 异常。属性ArrayBuffer.l...

2018-11-07 17:23:00 131

转载 Blob

Blob语法var aBlob = new Blob(array, options)array 是一个由 ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array, 或者其他类似对象的混合体，它将会被放进 Blob。 DOMStrings 会被编码为 UTF-8options 是一个可选的 BlobP...

2018-11-07 16:57:00 139

转载 FormData

语法var formData = new FormData(form)form--可选，一个 HTML 上的 <form> 表单元素一一当指定了，这种方式创建的 FormData 对象会自动将 form 中的表单值也包含进去，包括文件内容也会被编码之后包含进去例子第一种方式var formData = new FormData() ...

2018-11-07 15:52:00 154

转载 FileReader

FileReader语法var reader = new FileReader()属性FileReader.error 一个 DOMException ,表示在读取文件时发生的错误。FileReader.readyState 表示 FileReader 状态的数字常量名值描述EMPTY0还没加载任何数据L...

2018-11-07 11:23:00 349

转载 websocket的实践

最近接触到 websocket，由于之前并没有使用过，所以网上百度一番，最后还是看了一遍websocket的介绍上面文章原理上的都说的很明白，所以我就提取出我自己要用的小 demo 来，下面分别是属性，事件，方法的介绍，为了方便查看故将上面介绍中的顺便拿过来。属性readyState (只读属性readyState表示连接状态)0 - 表示连接尚未建立。1...

2018-10-26 20:19:00 115

转载 Vue CLI 3的Vue.config.js

module.exports = { // 部署应用包时的基本URL。 // https://www.app.com/ => '/' // https://www.app.com/my-app/ => '/my-app/' // 如果值为空字符串 '' 或者是相对路径 './', 都会被链接为相对路径 baseUrl: process.en...

2018-10-16 17:46:00 184

转载别人遇到的两条前端面试题

9.写出一个数组展开函数，如输入： [1,[2,[3,4,2],2],5,[6]]，输出数组： [1,2,3,4,2,2,5,6]function traversal(arr, result){ for (var i=0;i<arr.length;i++) { if (isArr(arr[i])) { traversal(arr[i], r...

2018-09-11 16:16:00 108

转载在HTML打开已安装的App，未安装跳转到对应的下载链接

借鉴 HTML中判断手机是否安装某APP，跳转或下载该应用function lookApp () { var ua = navigator.userAgent var isAndroid = /(Android);?[\s/]+([\d.]+)?/.test(ua) var isIpad = /(iPad).*OS\s([\d_]+)/.test(ua) ...

2018-08-22 17:49:00 949

转载 promise的使用

之前使用promise都是用时会，用时理解，过后一段时间没有又忘了，今天有空正好整理一下，方便日后自己查阅。-- 代码来源于阮一峰老师的 promisePromise有4个方法：[ resolve, reject, all, race]常见的resolve和reject 　resolve：成功时的回调函数　reject：失败时的回调函数/...

2018-07-20 17:08:00 112

转载特殊的json对象转数组，最合成新的json数据

今天从后台获取到的json数据如下：var dataJson = { '0': { id: 1 }, '1': { id: 2 }, '2': { id: 3 }, 'count': 1}这种json我们取数据十分麻烦， dataJson['0'] 才能获取到第一条数据，而且现在这个json没有长度这个属性的，所以，无法像数组...

2018-07-02 15:55:00 131

转载 JavaScript--正则表达式

语法var reg = new RegExp(pattern, modifiers)或者更简单的方式：var reg = /pattern/modifierspattern(模式)描述了表达式的模式 modifiers(修饰符)用于指定全局匹配、区分大小写的匹配和多行匹配注意：当使用构造函数（new RegExp()）创建正则对象时，需要常规的字符转义规则...

2018-06-07 10:50:00 138

转载 Rem兼容知多少？

话说，在手机端使用的单位都是rem;所以对于经常写手机页面的程序猿来说rem的使用频率很高，虽然现在有些其他好的替代方案（VW）但是我考虑到rem大家用的比较多而且兼容性会好点(后面链接可以直接查看兼容性)------- Can I use，所以我这里只对rem兼容进行修正。下面附上rem和vw的兼容图remvw在前段时间做了一个简单的活动页面，当然...

2018-06-05 13:08:00 284

转载 parseInt的结果看不懂，请看我分析

parseInt的使用，对于今天之前的我还是只使用用它来转换字符数字，但是今天我遇到下面三个表达式蒙圈了console.log(parseInt(3,8)); //3console.log(parseInt(3,2)); //NaNconsole.log(parseInt(3,0)); //3看到这里，突然发现我对parseInt很陌生呀，所以，...

2018-04-06 15:06:00 799

转载 canvas实现简单的画图工具中画笔效果,外加画好的笑脸

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas实现简单的画图工具中画笔效果,外加画好的笑脸</title></head><body> <canvas wi...

2017-12-02 22:46:00 267

转载 webpack简单教程(2)--使用less并生成独立的CSS样式

在webpack中配置并使用less直接生成css样式　　1、在F盘中创建一个文件夹webpack-less　　2、在文件夹中创建index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>...

2017-08-27 12:35:00 517

转载 webpack简单教程(1)--从零开始搭建一个webpack小例子

基于Windows操作系统下搭建webpack的运行环境，这里采用npm环境，node.js官网下载最新版本的，这里忽略下载和安装，然后直接运行 Node 环境，如下图所示。检查一下，node版本和npm工具的版本确保是最新的，这里并不是最新版本的，如果版本都是最新的，那么就可以来直接搭建webpack一个小demo案例。　　1、在F盘中创建一...

2017-08-26 12:53:00 100

转载箭头函数无法使用this的解决方法

ES6中箭头函数 () => { } ，看到这么简单的写法，我也是很喜欢用的。但是如果想在箭头函数里面使用this，那么就会出现获取不到当前对象，而是获取到window对象。下面这个是ES5中原型链上添加了一个say函数，在函数内打印出this对象，运行后能够得到正确 Person {name: "小米", age: 7}<!DOCTYPE htm...

2017-08-03 23:44:00 1006

转载 H5表单新增元素和属性

1、form--把要提交的内容指定特定表单，而这个要提交内容不需要被包含在特定表单中。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>form</title></head>&...

2017-07-27 23:38:00 82

转载 HTML 5中的全局属性

1、contentEditable--在使用这个属性下的子元素为可编辑。属性是true/false<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>contentEditable属性示例</title&...

2017-07-27 21:41:00 76

转载 2、less的用法

1、可以使用注释，注释分为两种，　　一种是常见于css样式中的注释（这种注释会被解析到CSS中） /* CSS中能看见我 */　　另一种也是常见于js代码中的注释（这种注释不会被解析到CSS） // CSS中看不见我2、可以定义和使用变量　　变量是需要在前面使用@符号，即@width:100px;这样就定义了一个变量，接下来是使用它，　　　　假设一个div...

2017-07-22 22:03:00 251

转载 1、koala软件的安装和使用--less教程

最近在学习less，感觉可以编译的CSS真是爽，懒人必备。1、我这里使用到koala软件来编译less文件生成CSS。附上百度网盘下载链接：下载链接　　　　　　　密码： heqj最新版本：官网链接如下图：好了，不管你是用最新版本还是用我百度网盘的，第一步，先安装后并运行这个koala软件。选择设置，更改语言为简体中文，记得关闭软件重启字体更改...

2017-07-15 02:36:00 456

转载 js--选中文字复制到剪贴板上

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点击按钮时将选中文字复制</title></head><body> <h2>我是H2标签<...

2017-07-15 01:45:00 118

转载 1-4、aside元素

示例一：包含在article中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名称解释等。<!DOCTYPE html><html><head><meta charset="utf-8"><title>aside元素示例</title></head>&...

2017-07-02 22:16:00 98

转载 1-3、nav元素

<!DOCTYPE html><html><head><meta charset="utf-8"><title>nav</title></head><body> <h1>技术资料</h1> <nav> ...

2017-07-02 21:42:00 97

转载 1-2、section元素

示例一： <!DOCTYPE html><html><head><meta charset="utf-8"><title>section</title></head><body><section> <h1>哈密瓜</...

2017-07-02 21:32:00 121

转载 1-1、article元素

示例一：　　　<article>　　　　<header>　　　　　　<h1>苹果</h1>　　　　　　<p>发表日期：<time pubdate>2017/07/02</time></p>　　　　</header>　　　　<p><b&g...

2017-07-02 21:11:00 96

转载 6.新增事件

新增事件:元素或对象事件触发时机代码示例window对象body元素beforeprint即将开始打印之前触发<body onbeforeprint="alert('即将打印');">afterprint打印完毕时触发<body onafterprint="alert('打印完毕');"">...

2017-07-02 18:04:00 125

转载 5.链接相关的属性以及其他属性

链接相关的属性:　　1、为a与area元素增加了media属性、download属性以及ping属性，其中media属性规定目标URL是为什么类型的媒介/设备进行优化的，download属性用于让用户下载目标链接所指向的资源，而不是直接打开该目标资源，这些属性均只能在href属性存在时使用。　　2、为area元素增加了hreflang属性与rel属性，以保持与a元素、link元素...

2017-07-02 17:25:00 134

转载 4.新增表单相关的属性

新增表单相关的属性　　1、可以对input（type=text）、select、textarea与button元素指定autofocus属性。它以指定属性的方式让元素在打开页面时自动获得焦点。　　2、可以对input（type=text）和textarea元素指定placeholder属性，它会对用户的输入进行提示，提示用户可以输出的内容。　　3、可以对input、outpu...

2017-07-02 17:09:00 88

转载 3.新增input类型

新增input类型：　　　email:表示必须输入e-mail地址的文本输入框。　　url:表示必须输入URL地址的文本输入框。　　number:表示必须输入数值的文本输入框。　　range:表示必须输入指定范围的文本输入框。　　Date Pickers:HTML5拥有多个可供选取日期和时间的新型输入文本框。　　　　date:选取日、月、年。　　　　month...

2017-07-02 16:45:00 102

转载 2.HTML5新增的其他元素

HTML5新增的其他元素：　　video元素用于定义视频。　　audio元素用于定义音频。　　embed元素用于插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等。　　mark元素主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字。mark元素的一个比较经典的应用就是在搜索结果中向用户高亮显示搜索关键词。　　progress元素表示运行中的进...

2017-07-02 16:35:00 56

转载 1.HTML5新增结构元素

HTML5新增结构元素：　　header元素表示页面中一个内容区块或整个页面的标题。　　section元素表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、h4、h5、/6等元素结合使用，标示文档结构。　　article元素表示页面中的一块与上下文不相关的独立内容，譬如博客中的一篇文章或报纸中的一篇文章。　　aside元素表...

2017-07-02 15:17:00 132

空空如也

空空如也