JS/JQuery
关注
分享
扫一扫
文章平均质量分 67
自酌一杯酒
欢迎大家访问我的个人博客：https://www.clluo.com
展开
-
Node实现文件（图片、音/视频等）上传
node文件上传完整代码。使用 multer 中间件 来储存上传的文件，支持自定义保存到哪个文件目录下原创 2022-12-02 15:17:08 · 2304 阅读 · 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 · 2337 阅读 · 1 评论 -
原生js + canvas 实现刻度尺效果
手势事件touchstart 手指按下 、touchmove 手指移动 、 touchend 手指抬起效果图：完整代码：ruler.jsvar ruler = { /** * 初始化刻度尺插件 * @el 容器 String * @height 刻度尺高度 Number * @maxScale 最大刻度 Number * ...原创 2019-12-10 17:43:38 · 6570 阅读 · 5 评论 -
js项目中常用的一些工具函数
记录一下在项目中常用的工具函数，随时更新var utils = { /** * 获取路径参数方法 返回参数值 * @name 参数名字 * */ getQueryString: function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&am...原创 2019-11-18 16:28:48 · 378 阅读 · 0 评论 -
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 · 646 阅读 · 0 评论 -
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 · 1231 阅读 · 0 评论 -
vue.js数据渲染完成后，获取页面高度问题
获取整个页面的高度用的$(document).height();遇到的问题在没有数据的时候页面的高度是690px;调用数据请求后，在ajax的success里面打印高度还是690px （我认为是数据加载完了，但是页面没有渲染好，所以高度获取的还是之前的高度）;我就在vue这几个(created，mounted，updated)生命周期都打印了下，都还是690px;解决问题需要用到$......原创 2019-02-11 15:13:51 · 13771 阅读 · 1 评论 -
JS实现JSON数组合并和去重
数组合并用的是concat方法，它可以用于字符串之间的连接和数组之间的连接；JSON数组去重利用对象的属性名不可重的特性来做判断，然后得到新的数组，就是去重后的数组；原创 2019-02-20 12:00:32 · 9294 阅读 · 0 评论 -
JS事件流、事件冒泡、阻止冒泡、事件捕获（一看就懂）
讲 事件冒泡 、阻止冒泡 和 事件捕获 之前先说说什么是事件流，这样会更容易明白一、事件和事件流1、什么是事件事件是可以被 JavaScript 侦测到的行为。鼠标点击、鼠标移动、鼠标滚动、按下键盘，浏览器窗口大小的改变，网页加载完成，关闭网页等等都会发生事件。2、什么是事件流事件流，描述的是页面中接受事件的顺序。一个完整的JS事件流是从window开始，最后回到window的...原创 2019-03-05 17:14:56 · 755 阅读 · 0 评论 -
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 · 326 阅读 · 0 评论 -
微信小程序中实现吸顶效果(流畅、不卡顿)
最开始的时候，在小程序中实现吸顶效果，开发工具看起来还挺好的，但是在真机上就会有问题了。 原因是我不停的去 setData 会导致操作反馈延迟严重，无法及时将操作处理结果及时传递到视图层。后面就对代码进行了调整，避免不停的去setData效果图吸顶前吸顶后代码部分wxml<view style="width: 90%; height: 300rpx; backgrou...原创 2019-08-21 18:05:37 · 10786 阅读 · 16 评论 -
微信小程序自定义组件-环形进度条
微信小程序自定义组件官方教程环形进度条的组件已经放在github上环形进度条效果图创建步骤1、在根目录创建名为components的文件夹，用来放需要引用的自定义组件。2、创建名为canvas-ring的文件夹，用来放环形进度条自定义组件。3、鼠标指着canvas-ring的文件夹 鼠标右键 “新建 Component” 取名canvas-ring。结构图：环形进度条组...原创 2018-12-01 18:36:25 · 3622 阅读 · 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 · 360 阅读 · 0 评论 -
微信小程序-用户授权获取信息
从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败(但不意味着 wx.getUserInfo 不能用了)。小程序官网上提供两种方式来获取用户信息。1、使用 open-data 展示用户基本信息open-data是小程序提供的不需要用户授权获取用户信息的组件，但是不能通过js来拿值，所以只能作为开发人员快速开...原创 2018-11-20 09:58:52 · 1111 阅读 · 0 评论 -
json、jq实现三级联动选择框方法一
html代码： <select id="level1Class" class="column-select" name="level1Class"> <option value="0">请选择栏目</option> </select> <select id=&原创 2018-05-25 15:11:21 · 1213 阅读 · 0 评论 -
用JS压缩上传的图片
现在网上的高清原图尺寸也有好几M甚至更大，而且现在手机像素高了拍出来的照片也特别大，所以有时候需要对用户上传图片时进行压缩处理。 图片压缩的原理：将图片重新画入到canvas画布里面，再将canvas转成图片的形式。 图片压缩js代码：function compressedImg(path, callback) { var img = new Image(); ...原创 2018-05-25 17:20:04 · 592 阅读 · 0 评论 -
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 · 1663 阅读 · 0 评论 -
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 · 2814 阅读 · 0 评论 -
Handlebars.js模版引擎用法一
一、为什么要使用Handlebars模版引擎1、Handlebars是全球使用率最高的模板引擎,所以当之无愧是全球最受欢迎的模板引擎.Handlebars在许多前端框架中都被引入,比如在MUI和AmazeUI等框架,都推荐使用Handlebars。 2、可维护性（后期改起来方便）；可扩展性（想要增加功能，增加需求方便）；开发效率提高（程序逻辑组织更好，调试方便）；看起来方便。 3、...原创 2018-05-29 15:22:46 · 532 阅读 · 0 评论 -
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 · 719 阅读 · 0 评论 -
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 · 607 阅读 · 0 评论 -
微信小程序页面之间三种传值方式
第一种：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 · 8856 阅读 · 3 评论 -
关于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 · 2180 阅读 · 0 评论