- 博客(39)
- 收藏
- 关注
RSS订阅翻译 七牛云 更新图片（先删除老图片，后上传更新后图片），解决缓存问题
要解决的问题使用七牛云做图片存储，但是当图片更新后再上传，访问的时候却还是以前上传的图片。解决方案方案一：单独刷新某个文件的缓存将指定文件的链接地址填入文本框，提交后去操作记录里查看状态，如展示‘成功’，则已经成功刷新缓存了，再次访问时可以看到新的图片了方案二：定义指定资源内容的缓存过期时间（统一设置同一目录下所有文件的缓存时间）要在七牛云后台设置缓存时间，这样图片上传后就能及时更新...
2019-07-17 10:38:26
4483
原创 支付宝小程序动画效果适配（微信小程序同）
前景：在做位移等动画效果时，所要求填写的距离参数没有单位，据实测是手机的分辨率，物理像素乘以dpr。导致在不同手机上移动距离不相同，适配很不好解决：使用小程序的获取系统信息方法my.getSystemInfo获取windowWidth（窗口宽度）和pixelRatio （设备像素比）计算出当前rpx倍数（这里使用的750指的是设计图的尺寸，可以根据设计图的大小进行更改），使用的时候将需要的rp...
2019-05-09 16:29:44
1872
原创 mac实现多终端访问
mac系统中自带有apache服务器，可以将它启动起来，通过手机访问mac上的文件实现真机调试。具体步骤：终端启动apache命令：sudo apachectl -k start终端重启apache命令：sudo apachectl stop终端重启apache命令：sudo apachectl -k restartApache服务器的文件地址：/Library/WebSe...
2018-11-22 21:47:49
740
原创 小程序连接蓝牙设备并发送指令
开放平台-官方文档地址：https://docs.alipay.com/mini/api/bluetooth-api#a-namegfgkonamyopenbluetoothadapter介绍依次用到了支付宝小程序提供的这几个接口：（已知服务id和特征id的情况）初始化蓝牙模块：my.openBluetoothAdapter。可在页面加载的时候调用关闭蓝牙模块：my.closeBluet...
2018-11-05 20:07:18
12805
7
原创 cropper - 基于jquery的图片裁剪插件详解
cropper插件的使用参考官方示例：https://fengyuanchen.github.io/cropper/ github上详细说明文档（官方文档，全英文）：https://github.com/fengyuanchen/cropper/blob/v2.3.4/README.md#options 我认为写的比较好的中文讲解（附示例demo，本文主要参考对象）：http://www....
2018-08-24 20:46:27
5289
原创 input file 上传图片并实现实时预览
前言用普通的html的 <input type="file"/> 标签是不能实现实时预览功能的，获取表单的值可以得到图片所在路径：C:\fakepath\06 已签单商户信息-筛选.png，如果将它直接赋值给img标签的href属性，会报错：Not allowed to load local resource（不允许加载本地资源）。功能实现可以通过file标签和js的 Fi...
2018-08-20 16:03:28
6193
1
原创 dropload 下拉刷新、上拉加载更多 插件实例
原文API地址：https://github.com/ximan/dropload下面通过实例记录下这个插件实现 下拉刷新、上拉加载更多 效果的方法有几个地方需要说明一下：在这个实例中使用了flexible适配方法，如果不引入flexible.js文件 css样式中使用rem为单位的元素会比正常大很多实例中使用了layer.js弹层组件（使用说明：http://layer.layu...
2018-07-03 18:52:23
6295
翻译 微信小程序将字符串生成二维码图片
原文地址：https://github.com/tomfriwel/weapp-qrcode 参考：https://segmentfault.com/a/1190000012675069最近接到这样一个需求，需要在小程序里将十几位随机字符串转换为二维码的形式展示。公众号中（另一终端）调用JSSDK扫一扫功能，去扫描小程序生成的二维码。得到字符串，然后进行接下来的逻辑处理。下面记录的是小程...
2018-06-21 19:22:35
33807
16
原创 HTML5 Blob 实现文件下载功能
原理其实很简单，就是将文本或者JS字符串信息（即后台返回来的在服务器上没有具体路径的动态文件，如导出数据功能）借助Blob转换成二进制，然后，作为元素的href属性，配合download属性，实现下载功能，缺点是如果文件太大会下载失败。 参考资料： https://www.cnblogs.com/goloving/p/7651636.html https://segmentfault.com...
2018-05-16 16:19:32
35097
原创 支付宝小程序 - 开发总结
最近在开发支付宝小程序，现将其中的一些经验和坑记录下来，防止以后忘记。 支付宝小程序 开放平台 地址：https://docs.alipay.com/mini/framework/app一、用户授权 & 获取用户信息注意：在获取用户信息 调试 时（如显示用户头像时），一定要使用真机预览。因为有时候在 蚂蚁开发者工具 上没有问题，用户信息都能获取到，而在真机上就是undefin...
2018-02-09 18:19:11
15749
3
原创 免费的前端开源项目cdn加速服务
一、推荐使用链接：http://www.bootcdn.cn/all/ 这个是比较好的，里面有jquery、bootstrap等的文件，可以通过连网引用；而且https 和 http 的协议都支持。二、只支持https协议链接：https://cdnjs.com/ 这个是后来自己发现的，只支持https的协议，下面是可能用到的几个：https://cdnjs.cloud
2017-12-28 15:26:08
3253
原创 Windows下 Git Bash下git的使用
对于刚要学习git的人，推荐去看《GitHub入门与实践》这本书，这是一本入门级别的书，里面介绍了git和github的使用方法，其中对于git命令的讲解通俗易懂。 如果要学习git更高级的用法，可以去：http://git-scm.com/book/zh/v1基础部分一、用git创建（在E盘的git目录下创建）一个叫myWebSite的目录（用于存储个人网站），并把它放到git版本
2017-12-27 18:52:21
17518
原创 使用formData上传文件
使用HTML5的formData对象 用ajax异步的方式提交form表单（还可以实现异步提交文件），可参考博客：https://www.cnblogs.com/zhuxiaojie/p/4783939.htmlhttps://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects这里要注意几点：<fo
2017-12-25 17:17:47
10134
原创 记录地址
微信JS-SDK：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115http://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3#.E4.B8.8A.E4.BC.A0.E5.9B.BE.E7.
2017-12-25 15:55:10
619
原创 iosSelect插件 H5中实现iOS的select下拉联动效果
简要说明官网：http://zhoushengfe.com/iosselect/website/index.html 下载：在官网点击 github 菜单项就可以下载此插件。下载好后可以看到两个文件夹，将src下的两个文件放到工程里的对应位置引入之后就可以按照说明进行使用了，这个插件更适用于移动端。 还有一个demo文件夹，里面是一些下拉联动效果的实例，可以参考它们使用 来实现想要的功能。因为我
2017-12-21 15:09:59
12440
6
原创 layer组件的使用
layer组件有pc端和移动端两个版本，不同版本针对不同终端呈现出不同的效果。 官方演示与讲解（针对pc）以及下载地址：http://layer.layui.com/ layer 移动版官方地址：http://layer.layui.com/mobile/ 本文主要介绍layer在移动端的使用方式。下载完成后只需用到mobile文件夹下的两个文件（可将mobile文件夹改名字copy出来），不
2017-12-21 12:48:35
3571
1
原创 腾讯地图的使用，添加多个标记和点击事件
腾讯地图API官网：http://lbs.qq.com/javascript_v2/index.html获取当前位置经纬度使用腾讯地图之前，先要获取指定位置的经纬度。 可以利用具体地理位置（如：北京市朝阳区朝阳北路101号 朝阳大悦城）来获取经纬度，具体获取方法这里不进行说明。 如果是在微信中使用腾讯地图，可以调用JSSDK来获取当前地理位置的经纬度。方法如下： //微信JS-SDK 获取
2017-12-20 14:48:53
24875
19
原创 微信JS-SDK上传照片到本地服务器 解析与实例
先附两张效果图 实现此实例的思路：需要调用微信的JSSDK，所以首先要进行微信验证（验证需要的appid、生成签名的随机串、签名等信息需要后台提供）这里要的功能是可以多选，上传多张照片。而上传照片接口是需要一张一张上传到微信服务器的，所以这里用递归做了一个处理。最后得到的serverIds图片地址列表是本地图片上传后在微信服务器上的地址列表。如果想要保存到本地服
2017-12-20 11:20:42
3540
1
原创 理解与使用Javascript回调函数
回调函数的好处回调函数是一个通过函数指针调用的函数。回调允许函数调用者在运行时调整原始函数的行为。因为可以把调用者与被调用者分开，所以调用者不关心谁是被调用者。它只需知道存在一个具有特定原型和限制条件的被调用函数。回调函数使得程序设计更加灵活。实现了程序的模块化设计可以解耦什么是回调函数我们对回调函数的使用无非是对函数指针的应用，函数指针的概念本身很简单，但是把函数指针应用于回调函数就体
2017-12-19 18:41:32
1047
原创 微信JS-SDK调用微信接口方法说明
概述微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。这里主要记录调用 微信扫一扫、拍照或从手机相册中选图、上传图片的接口，其他接口调用方法类似，只是传递参数不同。步
2017-12-08 12:29:04
8583
3
原创 webstorm中使用git管理服务器上的代码——入门级
一、首先要确保电脑已经成功安装好git了。（记住git的安装位置）二、这里需要给webstorm配置一下：依次点击：file –> Settings –> Version Control –>Git只需要在红框部分选择git的正确安装路径（找到git.exe），点击OK，配置完成。 如果不确定git路径是否正确，可以点击红框后面的Test按钮，如果出现下方提示，表示正确。三、将服务器上的项目检出到
2017-12-05 20:22:49
5359
转载 视区相关单位vw, vh..简介以及可实际应用场景
原文地址： http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/
2017-11-17 11:50:10
394
原创 css之px自动转rem - sublime text插件
作为一名前端开发，尤其是在做移动端适配时，rem是我们经常用到的单位，它的好处大家可以自行搜索，网上已经有很多了。但是我们再将设计稿上的px转换成rem时，得手动的去计算，这是一个很耗时、费力的过程，有没有什么办法可以“解放”我们呢？一、CSSREM这是flashlizi为sublime text编写的一个插件，用起来真的很方便！下载所依赖的文件，比如：git clone https://gith
2017-11-16 18:17:26
1372
1
转载 移动端页面适配的rem换算
为什么要使用rem之前有些适配做法，是通过js动态计算viewport的缩放值（initial-scale）。 例如以屏幕320像素为基准，设置1，那屏幕375像素就是375/320=1.18以此类推。 但直接这样强制页面缩放过于粗暴，会导致页面图片文字失真模糊。Px是相对固定单位，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放，em和rem虽然都是相对单位，但em是相对于它的父
2017-09-29 00:05:50
15229
1
原创 echarts插件——关于echarts在默认隐藏的div中不显示的问题
相信很多实用echarts插件的朋友都会遇到这样的问题，echarts图表在其他的div中可以正常显示，但在一个初始时默认隐藏的div中却显示为空白。 这是因为ECharts 没有获取到div的高宽而导致初始化失败，这时候可以：1.明确指定div的style.width和style.height 2：在div显示后手动调用 echartsInstance.resize 调整尺寸。对于第一种方式，宽
2017-05-18 11:16:59
24335
1
原创 动态样式语言——less运行环境的搭建及使用
由于CSS的维护和扩展工作艰巨。“动态样式语言”（如 less）在CSS的基础之上，添加了一些标准的“语言”所必须的内容：类型、变量、运算、函数、循环选择、继承等。 但是浏览器默认只支持静态样式语言，所以所有的动态样式首先必须“编译”为静态样式才可以实现渲染页面的功能！ 所以 .less 文件必须用工具软件(lessc)，转化为静态样式(CSS)，才能被浏览器所使用。下面是两种转化方法：在客户端
2017-03-30 12:42:21
2219
原创 bootstrap中jquery插件——affix附加导航、以及滚动监听功能的实现
在一般大型的网页，会有顶部和侧面两个导航。bootstrap提供的附加导航（侧面导航）可以实现监听页面滚动功能，下面看一下是什么样的：如上图所示，右侧导航原本是相对定位的，当它随页面滚动到顶部的时候，会变成固定定位回到原来的位置（即data-offset-top扩展属性指定的位置）。且它是导航有滚动监听功能，当页面滚动到指定位置它会改变样式，也可以点击跳转到指定位置。实现代码如下：<!--注意扩展属
2017-03-27 00:14:31
2409
原创 bootstrap中jquery插件——Carousel轮播广告
轮播广告在网站中的应用实在是太常见了，下面说一说怎样使用bootstrap中的Carousel插件来实现轮播广告效果，下图为最终效果： 具体实现方法请看下面的代码：<div class="carousel slide" data-ride="carousel" id="carousel" data-interval="3000"> //data-interval设置轮播间隔为3秒钟
2017-03-26 21:33:55
926
原创 bootstrap组件——导航条
bootstrap提供了导航条组件，效果是这样的（也可以是黑底白字的样式）： 这是在pc端下的样子，在移动端中间的导航会折叠起来，最右边多一个控制折叠的按钮，像下面这样： 具体实现代码如下：<div class="navbar navbar-default"> //.navbar-inverse为黑底白字的样式，如有需要可以自主更改。 <div class="contain
2017-03-26 19:59:22
1220
原创 bootstrap中jquery插件——collapse折叠效果-手风琴效果
先来掌握collapse插件的基本用法，再慢慢深入实例。 collapse最基本的效果是像下图所示的，点击按钮可以显示/隐藏下面的元素： 实现代码如下：<a class="btn btn-success" href="#collapseTest" data-toggle="collapse">Link with href</a> //a标签触发折叠效果<button class="b
2017-03-24 21:37:35
3092
原创 bootstrap中jquery插件——警告框、工具提示框、弹出框、模态框
bootstrap的JavaScript插件中提供了几种形式的提示框。其中就有警告框、工具提示框、弹出框和模态框。下面就来一个一个的看看它们是怎样使用的吧！警告框 它就是这个样子的，点击右侧的小叉子可以将它隐藏。如果不想要淡淡消失的效果可以将 .fade.in 类去掉，和bootstrap其他组件改变颜色的方式一样（只需将类 .alert-info改为 .alert-danger / .alert
2017-03-24 10:46:43
4039
原创 bootstrap中jquery插件——下拉菜单
这篇是用来记录怎样为应用了bootstrap下拉菜单组件的元素引用下拉菜单插件的，其实无论使用bootstrap中哪一个插件都有两种方式： 一种是直接使用data-*扩展属性，这是 Bootstrap 中的一等 API，也应该是首选方式。 另一种是使用编程方式的 API，即用写js的方式来调用插件函数实现效果，一般情况不建议使用这种方式。下拉菜单插件如果使用JavaScript API的方式
2017-03-22 16:36:41
1487
原创 bootstrap中jquery插件——带下拉菜单的标签页
这篇是用来记录怎样为应用了bootstrap样式、组件的元素引用标签页插件，其实无论使用bootstrap中哪一个插件都有两种方式： 一种是直接使用data-*扩展属性，这是 Bootstrap 中的一等 API，也应该是首选方式。 另一种是使用编程方式的 API，即用写js的方式来调用插件函数实现效果，一般情况不建议使用这种方式。应用了组件还没有应用标签页插件时的写法和效果： <ul
2017-03-22 15:29:40
1958
原创 js读写cookie方式以及中文乱码问题
读写cookie是前端工程师在做项目时会经常使用的技术。cookie是浏览器提供的机制、是javascript的另一种机制，可以达到真正全局变量的要求。 它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。设置cookie每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给document
2017-01-19 11:00:50
17375
3
原创 safari浏览器实现模拟click点击事件
在项目中经常会用到onclick点击事件触发效果，如给button按钮添加一个点击事件：<button id="btn">点我</button><script> var btn = document.getElementById("btn"); btn.onclick = function(){ alert("终于点我了！"); }</script>然而有
2017-01-19 09:22:20
7059
转载 【Bootstrap】修改导航条颜色的方法
http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3原理是修改bootstrap.css 或者 bootstrap.min.css 中关于.navbar-default的颜色值，如果修改的是bootstrap.css中的.navbar-default，要引用bootstrap.cs
2016-11-30 16:04:35
12896
1
原创 JS防止表单提交之后用户点击浏览器后退按钮再次提交
如标题，防止这种做法的方法有很多，但一般都是需要结合服务器端技术来实现。这里我换一种思路纯用js方式来避免这种情况的发生。 其实目标很明确，就是为了防止用户返回跳转之前提交表单的页面。那么我们完全可以让表单提交后跳转到一个新的页面，在跳转后立刻关闭之前的页面，这样就无法返回了。代码如下：HTML页面的表单，实现新页面跳转：<form id="form" name="form" method="po
2016-11-29 15:57:44
8066
原创 HTML5 / JS实现百度地图基本常用功能
很多网站都会使用到地图功能，提供地图接口的第三方也有不少，我这里来聊一下百度地图提供的API及百度地图基本功能的实现
2016-11-21 20:09:41
4122
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人