- 博客(32)
- 收藏
- 关注
RSS订阅
原创 js项目中常用的一些工具函数
记录一下在项目中常用的工具函数，随时更新var utils = { /** * 获取路径参数方法 返回参数值 * @name 参数名字 * */ getQueryString: function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&am...
2019-11-18 16:28:48
370
原创 JS事件流、事件冒泡、阻止冒泡、事件捕获（一看就懂）
讲 事件冒泡 、阻止冒泡 和 事件捕获 之前先说说什么是事件流，这样会更容易明白一、事件和事件流1、什么是事件事件是可以被 JavaScript 侦测到的行为。鼠标点击、鼠标移动、鼠标滚动、按下键盘，浏览器窗口大小的改变，网页加载完成，关闭网页等等都会发生事件。2、什么是事件流事件流，描述的是页面中接受事件的顺序。一个完整的JS事件流是从window开始，最后回到window的...
2019-03-05 17:14:56
750
原创 Node实现文件（图片、音/视频等）上传
node文件上传完整代码。使用 multer 中间件 来储存上传的文件，支持自定义保存到哪个文件目录下
2022-12-02 15:17:08
2286
7
原创 JS实现复制内容到剪贴板的方法
复制方法/** * 复制功能 * text 传入要复制的文本 * callback 复制完成后的回调*/function copy(text, callback) { // 实现复制方法一： if (navigator.clipboard) { navigator.clipboard.writeText(text); callback && callback(true); return; } //
2021-11-12 17:47:18
2327
1
原创 小程序转盘抽奖组件（使用简单）
项目地址点我查看完整代码效果图使用方式引入组件 .json{ "usingComponents": { "turnplate-lottery": "/components/turnplate-lottery/index" }}使用组件 .wxml<turnplate-lottery id="turnplate" list="{{prizeList}}"></turnplate-lottery><button catchtap="onSta
2021-11-12 14:28:34
2020
原创 图解转盘抽奖布局样式，以小程序为例
目前抽奖最常见的两种：九宫格抽奖 和 转盘抽奖，但转盘抽奖的大多是采用的是将做好的图放在页面上，如果需要变动奖池里面的奖品或数量，就会让设计师重新出一张图片。分享我自己在自定义转盘抽奖的样式布局思路，只是样式布局，没有功能实现；布局思路整个转盘抽奖布局分为两部分：底部转盘背景图 和 奖品内容布局一. 底部转盘背景图1：用canvas画个转盘出来（我采用的这种，自定义更高），再转为临时路径或base64数据，放到底部背景图上；2：用默认的转盘背景图，放到底部背景图上；二. 奖品内容布局首先需要
2021-03-19 15:17:09
2612
6
原创 小程序中实现视图懒加载
欢迎访问我的 个人博客前言小程序中对初始时渲染太多wxml节点数做懒加载是很有必要的！这是一个真实案例在写小程序时，有个页面由于要展示很多内容，光弹窗都6个，还有大量的列表，所以wxml节点数很多，超过了小程序建议的1000个节点以下。示例项目已放到 github 和 码云 上，文章最后附有地址。问题这个内容很多的页面是分包的第一个页面，再此之前开发工具上能正常的运行，因此没有去管它。但是在上周六（2020年1月16日）后，开发工具上就出问题了！！！进入这个分包页面，视图半天才渲染，但事件是会立
2021-01-21 10:01:05
804
原创 mongoose连接多个数据库简单例子
欢迎访问我的 个人博客执行代码前截图server.jsconst mongoose = require("mongoose");// 通过 createConnection 连接多个数据库var conn1 = mongoose.createConnection("mongodb://127.0.0.1:27017/wx");var conn2 = mongoose.createConnection("mongodb://127.0.0.1:27017/test");var Schema
2020-11-15 22:16:56
1266
原创 web前端开发时推荐用rem做单位
欢迎访问我的 个人博客我之前做页面写css样式的时候一直用的 px 做单位，因为直接看着PC端的设计图标注多少像素就写多少像素。 直到做了一个内容宽度是1440px 大小的PC端设计图后，我感觉用 rem 做单位才是最好的选择（个人认为），不管开发的是PC端还是移动端，还是响应式页面。下面我说下我对 rem 的看法，和我怎样使用 rem ，为什么推荐使用 rem一、rem 单位rem 是一个相对单位，相对根元素 <html>标签 字体大小的单位，一般浏览器默认的是 1rem = 16p
2020-06-09 19:18:35
1520
原创 Window平台安装MongoDB4.x并启动服务详细图解
PS：我安装的MongoDB版本是4.x，MongoDB4之后的版本安装步骤和配置都变简单了。不需要手动的去创建 data 和 log 文件夹，也不需要去创建并配置 .conf 的格式的文件。但在安装MongoDB服务的时候会修改 mongod.cfg 里面的东西，删掉里面的 mp: 就可以了一、安装MongoDBMongoDB官网下载地址安装步骤图解目录结构├── bin...
2020-01-08 15:04:09
405
1
原创 vue router页面跳转与传值取值
记录在学习vue的时候遇到的一些问题一、页面跳转与传值1、使用<router-link>标签的形式<router-link to="/home/recommend">推荐</router-link><router-link :to="{name: 'list',params:{pagename: '新闻列表'}}">新闻列表</r...
2019-12-24 14:22:59
1292
原创 原生js + canvas 实现刻度尺效果
手势事件touchstart 手指按下 、touchmove 手指移动 、 touchend 手指抬起效果图：完整代码：ruler.jsvar ruler = { /** * 初始化刻度尺插件 * @el 容器 String * @height 刻度尺高度 Number * @maxScale 最大刻度 Number * ...
2019-12-10 17:43:38
6537
5
原创 vue.js + axios.js图片压缩处理并上传到服务器demo
图片压缩原理将图片重新画入一个canvas中。可设置最大宽度，再按图片宽高比例定义canvas画布的宽高。完整代码demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>上传图片</title> <...
2019-11-07 16:05:14
642
原创 微信小程序中实现吸顶效果(流畅、不卡顿)
最开始的时候，在小程序中实现吸顶效果，开发工具看起来还挺好的，但是在真机上就会有问题了。 原因是我不停的去 setData 会导致操作反馈延迟严重，无法及时将操作处理结果及时传递到视图层。后面就对代码进行了调整，避免不停的去setData效果图吸顶前吸顶后代码部分wxml<view style="width: 90%; height: 300rpx; backgrou...
2019-08-21 18:05:37
10772
16
原创 JS实现设置cookie、读取cookie、删除cookie
设置cookie/** * 设置cookie * @name cookie名 * @value cookie值 * @expiredays 过期天数 * */function setCookie(name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expired...
2019-02-27 10:35:40
324
原创 JS实现JSON数组合并和去重
数组合并用的是concat方法，它可以用于字符串之间的连接和数组之间的连接；JSON数组去重利用对象的属性名不可重的特性来做判断，然后得到新的数组，就是去重后的数组；
2019-02-20 12:00:32
9263
原创 Node.js+Mock.js+Vue.js实现接口和上拉加载数据
Node.js+Mock.js+Vue.js实现接口和上拉加载数据效果图一、接口1、创建项目2、代码部分3、启动服务二、页面1、代码部分效果图一、接口需要用到Express 和 Mock.js ， 如果不熟悉Express和Mock.js的建议先去他们的官网看看Express官网 、 Mock.js官网Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一...
2019-02-15 17:57:22
1213
原创 vue.js数据渲染完成后，获取页面高度问题
获取整个页面的高度用的$(document).height();遇到的问题在没有数据的时候页面的高度是690px;调用数据请求后，在ajax的success里面打印高度还是690px （我认为是数据加载完了，但是页面没有渲染好，所以高度获取的还是之前的高度）;我就在vue这几个(created，mounted，updated)生命周期都打印了下，都还是690px;解决问题需要用到$......
2019-02-11 15:13:51
13753
1
原创 微信小程序自定义组件-环形进度条
微信小程序自定义组件官方教程环形进度条的组件已经放在github上环形进度条效果图创建步骤1、在根目录创建名为components的文件夹，用来放需要引用的自定义组件。2、创建名为canvas-ring的文件夹，用来放环形进度条自定义组件。3、鼠标指着canvas-ring的文件夹 鼠标右键 “新建 Component” 取名canvas-ring。结构图：环形进度条组...
2018-12-01 18:36:25
3613
5
原创 js中const,var,let定义变量的区别
js中const,var,let定义变量的区别1.const定义变量不可以修改，而且必须初始化 const b = 2;//正确 // const b;//错误，必须初始化 console.log('函数外const定义b：' + b);//有输出值 // b = 5; // console.log('函数外修改const定义b：' + b);//无法输出...
2018-11-30 17:14:50
357
原创 微信小程序-用户授权获取信息
从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败(但不意味着 wx.getUserInfo 不能用了)。小程序官网上提供两种方式来获取用户信息。1、使用 open-data 展示用户基本信息open-data是小程序提供的不需要用户授权获取用户信息的组件，但是不能通过js来拿值，所以只能作为开发人员快速开...
2018-11-20 09:58:52
1106
原创 微信小程序页面之间三种传值方式
第一种：url传值A页面部分js代码Page({ toDetailPage: function(e){ var zhi = &quot;biubiubiu~~&quot;; wx.navigateTo({ url: '/pages/detail/detail?zhi =' + zhi , }) }})B页面部分js代码Page({ /** * onLoad生命...
2018-10-31 21:19:17
8842
3
原创 ES6基础语法知识
为了更方便的学习es6,需要引用babel <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>1.解构赋值function breakfast() { return ['蛋糕','奶茶','苹果'];}let [des,drink,fr...
2018-06-01 16:40:15
599
原创 Handlebars模版引擎用法二
在上一篇文章中简单的介绍了怎么使用handlebars模板，这篇文章将介绍handlebars更多的语法，相信了解后，你会被它所吸引。 之前的例子：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8&qu
2018-05-29 15:25:16
714
原创 Handlebars.js模版引擎用法一
一、为什么要使用Handlebars模版引擎1、Handlebars是全球使用率最高的模板引擎,所以当之无愧是全球最受欢迎的模板引擎.Handlebars在许多前端框架中都被引入,比如在MUI和AmazeUI等框架,都推荐使用Handlebars。 2、可维护性（后期改起来方便）；可扩展性（想要增加功能，增加需求方便）；开发效率提高（程序逻辑组织更好，调试方便）；看起来方便。 3、...
2018-05-29 15:22:46
527
转载 socket.io实现聊天功能——第一章 、群聊
一、准备工作–搭建项目1.确保node环境已经安好，我已将npm替换成了cnpm 淘宝镜像。 2.新建一个名为 ” chat “ 的文件夹。 3.在 ” chat “ 的文件夹里面 创建package.json的文件，我们用代码创建cnpm init,默认回车就行了。 4.再分别安装express 和 socke.io的模块。 cnpm install experss --s...
2018-05-28 11:57:45
2807
原创 用JS压缩上传的图片
现在网上的高清原图尺寸也有好几M甚至更大，而且现在手机像素高了拍出来的照片也特别大，所以有时候需要对用户上传图片时进行压缩处理。 图片压缩的原理：将图片重新画入到canvas画布里面，再将canvas转成图片的形式。 图片压缩js代码：function compressedImg(path, callback) { var img = new Image(); ...
2018-05-25 17:20:04
585
原创 如何用node.js发送邮件
一、准备工作1、新建一个目录，这儿取名叫email2、在email目录里创建一个package.jsoncnpm init 2、在email目录里安装nodemailer模块cnpm install nodemailer --save 3、在email目录里面新建一个js文件，这儿取名叫main二、代码部分var nodemailer ...
2018-05-25 15:18:38
651
原创 json、jq实现三级联动选择框方法一
html代码： <select id="level1Class" class="column-select" name="level1Class"> <option value="0">请选择栏目</option> </select> <select id=&
2018-05-25 15:11:21
1210
转载 关于IE10+不支持条件注释的解决办法
1、使用IE=EmulateIE9属性指示浏览器采用IE9渲染技术<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"> 在html网页的head里加入上面的meta标签，这样IE10/11就能识别条件性注释了，我们也就可以编写针对性的CSS代码了。 但这样做有个弊端，浏览器最高就只能在IE9的渲染模式，而不是...
2018-05-25 15:06:23
2171
原创 JS实现本地预览上传图片并获取宽高
原文：http://thunder.gz01.bdysite.com/index.php/2018/05/23我们在本地上传文件、图片是用file类型的表单，大多时候我们想让上传的图片先预览在我们本地，下面来看看代码吧。HTML部分：&amp;lt;input type=&quot;file&quot; accept=&quot;image/jpg,image/jpeg,image/png&quot; n
2018-05-23 11:50:39
1653
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人