- 博客(60)
- 收藏
- 关注
RSS订阅原创 JS实现防抖（Debounce）和节流（Throttle）
防抖（Debounce）和节流（Throttle）是用于限制函数调用频率的两种常用技术，可以帮助你控制事件处理函数的执行次数。下面分别是防抖和节流函数的实现示例。
2023-10-08 16:39:45
287
原创 现有i张十元纸币，k张五元纸币，j张两元纸币，购物后要支付n元(i,j,k,n 为整数)。要求编写一个函数Changes(i,j,k, n)
现有i张十元，k张五元，j张两元，要支付n元(i,j,k,n 为整数)。写一个函数：要求手上拥有的纸币是否足够并能刚好拼凑齐n元，而不需要找零。
2023-09-27 16:46:13
195
原创 NUXT.JS使用GEETEST极验验证
前言公司新项目为PC版的，本人一直使用VUE，思考了很久最终决定使用nuxt.js完成该项目，因为是PC端可能涉及SEO，nuxt.js就是解决vue单页面SEO的，虽然之前没接触过，但是看了看文档就是对vue的再次封装。项目的注册页要求获取短信验证码前要有个机器验证，所以我采取了geetest准备首先要注册geetest,取到一个key，类似百度地图那种的，然后后端要写一个接口返回校验的参数，类似微信分享前的验签。前端需要做的就是把gt.js下载下来，然后引用。我是在nuxt.config.js引入
2021-02-08 10:48:25
722
原创 微信支付点金计划实现支付完成跳转页面
标题标题<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="referrer" content="origin"> <meta name="viewport" content
2020-09-25 13:05:28
16754
49
原创 qrcodejs华为手机无法识别二维码解决方法
前言现在移动端都很普遍用到生成二维码，一般都是由前端生成，当然也有后台生成返图片给你。比如生成海报，邀请二维码都有用到。我在项目中遇到的问题就是华为手机长按识别二维码会无法识别，原因大家应该也有搜百度，是应为qrcodejs生成二码后会把canvas display：none但是在华为手机不生效，微信不支持canvas长按识别，我解决的方法就是手动把canvas转图片，隐藏掉自带的那块。直接上代码。项目用的是VUE，封装的Qrcode的组件qrCode.vue<template>
2020-09-21 18:31:55
4763
原创 线性优惠券样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .coupon_wrap { .
2020-08-31 16:32:31
234
转载 Iconfont 多色图标使用svg颜色无法修改问题
原因是因为iconfont.js里面的fill 被写死了，所以修改不了。1.把icon文件下载下来，打开iconfont.js，使用编译器正则替换掉所有包含fill="xxx",以notePad++为例 ctrl+f选择替换，查找目标填写fill="#......"，替换为空页面内使用<svgclass="icon_svg"aria-hidden="true"><usexlink:href="#icon-gou"/>...
2020-08-26 16:02:20
1956
转载 数组内对象去重
1.代码reduce去重let data = [ { id: 1, name: '张三', age: 15, }, { id: 2, name: 'John', age: 18, }, { id: 3, name: '李四', age: 18, }, { id: 1, name: '张三', age: 15, }, { id: 4, name: 'Ja...
2019-09-04 17:18:15
173
转载 vue项目报错webpackJsonp is not defined
在vue单页面应用中，我们大概都会使用CommonsChunkPlugin这个插件。 传送门CommonsChunkPlugin但是在项目经过本地测试没有任何问题，打包上线后却会报错webpackJsonp is not defined。这是因为公共文件必须在自己引用的js文件之前引用。可以手动改文件引用，但是推荐以下解决办法：找到build→webpack.prod.conf...
2019-08-15 10:21:33
1604
2
原创 JS优化，减少重复请求
1.前言无聊点点公司的网页， 发现公司网站的一搜索请求是实时请求的，点开控制栏发现每输一个字符都会请求一次，虽然请求大小不大，但是这样不友好，为了减少请求次数，我给项目加了两个方法，分别是节流和防抖函数。节流函数一般用于，类似按钮请求这些，防止你一秒点击多次按钮产生重复请求防抖函数一般用于，类似实时监听input的请求，防止请求过多2.代码<!DOCTYPE ht...
2019-08-02 15:46:13
1250
转载 JS实现富文本粘贴图片
1.实现原理利用html中contenteditable属性+JS判断2.代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in...
2019-07-29 18:27:35
2121
转载 JS实现input自动切换焦点
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <form> <input type="t...
2019-07-29 16:25:02
2455
原创 微信小程序点击item使之滚动到屏幕中间
1.需求想做类似猫眼电影选场次会自动滚动到屏幕中间的效果如图是最终效果2.分析实现这种效果的方法有三种：1.直接使用原生CSS+js;2.使用swiper,一屏显示多个item,点击item会自动滚动到中间3.使用微信的scroll-view配合JS实现权衡了一下最终选择了第三个方案，比较是微信自带的方法，使用起来会比较流畅，swiper的话会比较臃肿，原生的...
2019-07-26 12:25:40
3562
1
原创 微信小程序利用canvas画出根据文字自适应的边框
1.需求生成海需要画出一个中空带边框的的tag，如下图。众所周知，微信小程序里的canvas画图都是需要自己一点点画出来，不想html有htmlToCanvas，直接写HTML就可以转成canvas.2.实现参考链接首先要实现圆角边框，再把字体填充进去，我在网上找到一个方法，直接拿过来改了一下，代码如下：//画圆角边框 roundRect(ctx, x, y, w,...
2019-07-16 16:44:18
6059
原创 数组处理，矩阵转置
想取出数组中第I个值重新组合成数组<script> var deepArr=[ [1,2,3,4], [1,2,3,4], [1,2,3,4], ]; // var deepArr=[ // [1,1,1], // [2,2,2], // [3,3,3],...
2019-07-10 16:09:59
300
转载 拷贝对象方法
1.浅拷贝var obj = {a:1,b:2} var newObj = Object.assign({}, obj); obj.c = 3;2.对象展开var obj = {a:1,b:2} var newObj ={...obj}obj.c = 3;console.log(obj,newObj);
2019-07-05 14:57:03
174
原创 css选择器，匹配以某个字符开头或结尾
1.div[class$="-btn"]:active{ opacity:.8}<div class="user-btn"></div>可匹配到div,class为“-btn”结尾的元素2.div:[id^="item-"]{ color:red}<div id="item-op"></div>可...
2019-06-21 10:31:32
13375
1
转载 移动端跳转到百度地图并输入地址
项目里有个地址导航的，网上找了个简单的方法，点击导航直接跳到百度地图并输入目标地址，但是当前位置需要自己输入<a class="send" href="http://api.map.baidu.com/geocoder?address=深圳市体育馆&output=html&src=webapp.baidu.openAPIdemo" target="_blank">...
2019-06-20 15:58:01
1502
原创 微信小程序canvas.drawImage方法无法加载网络图片解决方法
项目需求对后台返回数据动态生成海报，可保存到手机相册。网上大多的方法都是调用getImageInfo方法转本地图片wx.getImageInfo({ src: 'http://www.域名.com/w.jpg', success: function (res) { context.drawImage(res.path...
2019-06-18 18:13:12
8248
原创 微信小程序按钮渐变色配合disable无效问题
按钮样式.btn-area button { background: linear-gradient(270deg, rgba(252, 16, 67, 1) 0%, rgba(237, 1, 123, 1) 100%); color: #fff; line-height: 84rpx; font-size: 32rpx;}按钮disable样式butto...
2019-05-23 09:43:02
1729
转载 微信小程序返回上一页带参数
//选择场次并返回 itemClick: function (e) { var name = e.currentTarget.dataset.name; var id = e.currentTarget.dataset.id; var pages = getCurrentPages(); var currPage = pages[pages.length - ...
2019-05-22 11:14:12
336
原创 小程序动态修改导航栏样式navigationBarBackgroundColor
官方文档https://developers.weixin.qq.com/miniprogram/dev/api/wx.setNavigationBarColor.htmlwx.setNavigationBarColor({frontColor: '#ffffff',backgroundColor: '#ff0000',})颜色一定要是16进制,不能使用rgb,rgba,...
2019-05-13 15:01:06
4870
原创 移动端video转canvas总结
前言公司一个客户要求我们参照http://game.flyh5.cn/resources/game/lq_game/2018_9_xmt_c/main.html?v=1557026481做一个病毒式H5供宣传，打开一看就是那些场景应用的H5，主要流程就是一开始有几张照片，点不同照片播放不同视频，播放完视频上传图片生成海报。我看了看他们的源码是使用白鹭egret+eui做的，动画效果还是不...
2019-05-10 11:07:27
3724
转载 移动端html2canvas总结
前言公司项目需要动态生成一个公益证书，需要对html转成图片供用户保存转发，一开始就想到用canvas，后来百度找到有html2canvas这个插件，就用起来了。问题一开始我的html背景图是用background-image,导致图片不清晰，找了好久才知道要用image标签才清晰，改用image后发现手机端不清晰，改来改去，找来找去，终于搞到高清的合成图了，直接上代码：代码...
2019-05-09 19:00:00
2855
转载 vue项目使用flexible+px2rem自适应移动端
1.安装npm install lib-flexible --savenpm install postcss-px2rem --save2.视口配置<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum=scale=...
2019-04-29 16:44:15
590
原创 微信小程序select下拉组件封装
前言刚接触微信小程序，之前有使用vue的底子，今天就分享一个自己封装的下拉组件（参考别人的组件按自己需求修改的），个人是不是很喜欢造轮子，如果有现成的都喜欢复制粘贴改改哈哈，都是之前公司养的坏毛病。需求项目需要一个下拉框进行数据筛选，微信小程序有提供自己的一个picker，但是跟我们设计需求不一样，微信小程序好像不支持select标签，如果支持，样式也改不到理想状态，所以最终还是...
2019-04-19 11:09:34
2308
原创 微信小程序初探总结
描述刚换了工作，之前的工作都是用vue,新公司现阶段用的小程序比较多， 之前就听说小程序的语法和VUE差不多，看了几天文档，实际操作了一下，记录一下vue和小程序的异同和坑。总结小程序的模块化做得还是不错的，自身已经封装了一套相对成熟的文件结构。以下就总结使用小程序遇到的问题：1.小程序开发工具报错，js第一行最好不要写注释，不让有可能报错，可能是开发工具的BUG2.点击事件传...
2019-04-17 18:38:48
234
转载 移动端自适应方案
使用插件 amfe-flexible 自动将单位 px转remhttps://www.npmjs.com/package/amfe-flexible
2019-03-21 11:10:45
185
转载 filter过滤数组空值
let arr = ['','a','b',null]arr.filter((item)=>{ return item&&item.trim();})
2019-03-21 10:58:48
4581
原创 Vue实现价格实时计算
Vue实现价格实时计算需求分析使用属性后台返回数据格式思路参考需求分析商品有附加选购，需对多个附加选项价格进行实时勾选计算使用属性vue的computed 属性，computed 相较watch属性性能更优，watch属性多用于监听路由，况且computed 属性有名字给你叫‘计算’属性，当然是用来计算的。后台返回数据格式多选列表数据checkBoxList:[ { produc...
2019-03-18 18:50:10
4497
转载 Vue实时搜索并减少请求量实现
1. 项目需求前不久公司项目有个需求是要实现搜索框实时搜索，本来是监听手机键盘回车（@keyup , event.keyCode==13），但是客户算是比较年纪大的，喜欢用按钮点击搜索，但是项目是APP，我们设计师不妥协加按钮，最终协商要求做一个实时检索的功能。2. 实现思路以前刚接触Vue的时候知道 VUE 有个监听input 的方法@input，但是这个方法是如果用这个方法进行监听请求的...
2019-03-04 12:56:19
1145
原创 vue js 清除 data数据
deactivated(){Object.assign(this.$data,this.$options.data())}
2019-01-30 16:24:20
6372
2
转载 Canvas 背景骨架图
https://github.com/VincentGarreau/particles.js#demo--generator
2017-09-14 09:25:18
447
原创 页面内滚动条样式修改
有时候页面内需要内容框超出部分显示滚动条，但是嫌滚动条的默认样式太丑，我们可以通过修改CSS样式来美化达到像苹果手机一样的滚动条；下面就来介绍一下首先html页面如下, 123213 123213 123213 123213 123213基本的显示y轴滚动条ul{height:100px;overflow-y:auto;}滚动条样式修改u
2017-08-18 11:18:49
1225
转载 CSS实现三角箭头
.arrow:before{ width: 0; height: 0; line-height: 0; font-size: 0; position: absolute; left: 50%; top: -10px; margin-left: -2px; border-width: 5px; border-style:
2017-08-15 17:48:20
762
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人