- 博客(57)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 使用sessionstorage实现弹框只在第一次打开网站显示,之后在跳转过来就不打开
方法一:用sessionStorage来做if(!window.sessionStorage.getItem('storge')){ alert('欢迎来到我的首页'); window.sessionStorage.setItem('storge','true')}方法二:用localStorage来做if(!window.localStorage.getIte...
2019-03-06 11:34:53
1218
原创 Ajax响应前和完成事件 / beforeSend complete / 判断ajax是否执行完毕
描述：进行数据交互时如果交互时间长，响应慢的话，用户点击提交按钮误认为自己没有操作成功，就会重复点击按钮，造成重复数据。解决的办法是在用ajax请求时，在交互结束之前出现一个转动的loading小图标或者“内容加载中..”的弹框，用来告知用户正在请求数据，在交互结束后这个弹框就会消失。解决办法：$.ajax的方法beforeSend和 complete。beforeSend，用于在向服务器...
2019-03-06 10:13:08
1267
原创 保证图片在div中自适应显示，不变形
问题描述：从后台读取一张图片，然后把这张图片显示到固定的div中，比如300*300px的div，div的宽高是固定的，图片的宽高比例是不固定的是随机读取的，需要实现是不管图片的宽高比例是什么，图片都要完整的显示在div内且保持原有的比例不变形。像下面这样（红色的是div）：或者解决方法：同时设置图片的最大宽高为100%max-width:100%;max-height:100%;...
2019-02-19 16:07:36
1828
转载 html5语义化标签
html5新增的语义化标签有六个，分别是：header 页眉, nav 导航, section 区块, article 文章, aside 侧边栏 , footer 页脚<header> 页眉，可能包含标题元素，也可以包含其他元素，像logo、分节头部、搜索表单等 <nav> 定义主体模块或者导航链接的集合 <section>表示文档...
2019-01-30 14:14:23
487
转载 图片懒加载 / jquery.lazyload.js的下载、使用
原理：不加载显示区域外的图片，当浏览器滚动使图片进入显示区域时才会进行加载使用：在src中的是显示的小图，data-original中的是显示的真实的图片<img src="img/80x70px-01.png" data-original="img/lb2.jpg">$('img').lazyload();学习中文文档：jQuery Lazy Load 图片延...
2019-01-29 16:22:01
675
原创 sessionstorage的使用、存储、读取、删除
概念： sessionStorage 是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据（key/value），在关闭窗口或标签页之后将会删除这些数据。是window下的对象。 特点：只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。 存储方式。seesionStorage的存...
2019-01-28 16:47:32
46047
3
原创 cropper.js的使用 / 裁剪插件 / 获得移动旋转裁剪的数据
在项目中遇到图片剪裁功能的实现，如果是简单的图片的上传编辑剪裁然后显示（比如上传头像），上传的图片比较少或者比较小，用photoclip.js非常方便，剪裁直接在前端就可以实现无需用到后台，而且剪裁之后的图片清晰度也足够显示了，但是如果是对图片的剪裁之后的像素要求比较高的（比如剪裁之后的图片可打印，dpi在300之上），或者是主要功能就是图片编辑处理（图片的打印）希望图片可以重复编辑的，需要处理的...
2019-01-28 11:22:34
2738
原创 div超出部分出现滚动条并修改滚动条的默认样式
使用overflow的属性 auto 和scroll 可以在内容超出的时候出现滚动条。overflow 设置包括水平和竖直方向内容溢出时的操作 overflow-x 设置水平方向内容溢出时的操作 overflow-y 设置竖直方向内容溢出时的操作 这里以overflow-y为例overflow-y的值有一下几种：其中前四种主流浏览器...
2018-12-29 13:31:34
6439
原创 了解Window.devicePixelRatio（设备像素比）
记录一下Window.devicePixelRatio这个特性。介绍：Window.devicePixelRatio 返回当前显示设备的物理像素分辨率与CSS像素分辨率的比值。该值也可以被解释为像素大小的比例：即一个CSS像素的大小相对于一个物理像素的大小的比值。window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixel...
2018-12-26 11:07:28
6287
原创 提高html2canvas截图精度 / 提高dpi
项目中要实现div的截图功能，使用了html2canvas截的图比较模糊，我之前也记录过这个问题，html2canvas 实现网页截图，但是现在要对截图的精度进行优化，截出来的图片要实现打印照片的功能，也就是说html2canvas截图至少要达到300dpi，这样打印出来的图片才不会失真 ！这个问题真是难到我了，我在网上搜了很多解决html2canvas截图不清楚的文章看，发现大部分网友都赞同先放...
2018-12-25 17:49:24
15478
3
转载 判断图片是否加载完成/图片拼接到页面上后获得图片的宽度和高度出错/如何获得渲染后的图片的宽度和高度
问题：通过拼字符串将图片放到页面上，然后获得图片的宽度和高度，打印出来的图片的高度一直为0。后来发现是由于图片渲染到页面需要一些时间，打印图片的宽度和高度的时候，img标签渲染上去了，但是图片还没有加载完成，导致出现问题。解决方法：在图片加载完成后再获得图片的宽度和高度$(window).load(function() { // 图片加载完成后再操作 ...});下...
2018-12-12 17:43:51
452
转载 localStorage的认识与使用
转载自 https://blog.csdn.net/taylorzun/article/details/81112392转载自 https://www.cnblogs.com/xmoomoo/p/5757464.html转载自 https://www.cnblogs.com/st-leslie/p/5617130.html转载自 https://blog.csdn.net/qq_25...
2018-12-06 10:37:56
153
原创 调用微信扫一扫接口/利用微信JS-SDK调用微信扫一扫功能
功能需求：微信公众号里网页需要调用扫一扫功能实现工具：微信JS-SDK接口接口官方文档：微信JS-SDK说明文档微信JS-SDK介绍：微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信...
2018-12-05 19:52:40
6388
3
转载 了解ajax2.0的使用
了解ajax2.0的使用简介老版本ajax:ajax2新增的特性：ajax2的理解ajax2的使用语法简介由于老版本的ajax存在以下问题，从而导致了ajax2的出现老版本ajax:1.只支持文本数据的传送，无法用来读取和上传二进制文件。2.传送和接收数据时，没有进度信息，只能提示有没有完成。3.受到&quot;同域限制&quot;（Same Origin Policy），只能向同一域名的服务器请求数据。...
2018-12-03 15:02:35
310
转载 $.ajax上传文件或图片的进度条
到网上搜了许多关于上传显示进度条的文章，用jquery的ajax上传文件的，一般用以下属性来获得进度条的百分比processData: false, // 告诉jQuery不要去处理发送的数据contentType: false, // 告诉jQuery不要去设置Content-Type请求头xhr:function(){ ...
2018-12-03 14:23:42
454
原创 progress进度条滚动动画
html5的标签progress表示进度条，可以用在文件上传的进度显示，文件下载的进度显示，也可以作为一种loading的加载状态条使用。<progress>有两个属性 max 和 value。max 表示进度条的进度最大值，必须是大于0，默认值是1。value 表示当前完成的进度，值的范围为0~max之间。如果没有设置max属性，那么value属性值的范围要在0~1...
2018-11-29 11:55:21
1985
原创 通过jquery对元素进行样式操作发现不起作用 / onclick（）事件
1.使用jQuery对元素进行样式操作发现不起作用，例如：if(partype == "parent"){ $(".par_name").css("display","flex");}但是 $(".par_name").css("display","flex");在页面上没有起作用，然后将 $(".par_name").css(&quo
2018-11-09 14:06:58
1183
转载 js数组的创建，添加元素，删除元素，合并元素、数组排序
一、数组的创建 var arr = new Array(); 创建一个数组 var arr = [ ]; var arr = new Array(a,b,c); 创建一个数组并赋值 二、数组元素的添加push() 结尾添加，返回数组新长度 unshift() 头部添加，返回数组新长度 splice() 从数组指定位置添加/删除元素，返回被删除的元素三、数组的元素的获取与...
2018-11-06 19:48:32
3321
原创 JavaScript加密算法----CryptoJS的使用
CryptoJS (crypto.js) 为 JavaScript 提供了各种各样的加密算法，目前已支持的算法包括：md5,aes,hmac等CryptoJS的官网：CryptoJS官网、文档、下载CryptoJS的获取：https://github.com/brix/crypto-js/releasesCryptoJS引用：如果只是用到个别的加密方式，可以单独引用对应的加密JS文件；...
2018-11-06 19:28:08
2159
原创 window自带的滚动条
$(window).scroll(function(){ console.log("scrolltop-------"+$(window).scrollTop()) //根据$(window).scrollTop()的值进行一些操作 //这里写执行代码})
2018-11-05 14:50:23
406
1
原创 理解api
全文： Application Programming Interface 中文名： 应用程序编程接口英文缩写： API 百度百科给出的解释是：一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。软件是运行在系统平台的支持上的，软件的功能其实就是向系统伸请，并由系统完成这些功能的过程。那么软件要做的事情...
2018-10-10 16:59:18
634
原创 html2canvas 实现网页截图 / 下载html2canvas.js插件包
html2canvas可以通过纯JS对浏览器网页进行截屏，但截图的精确度还有待提高官网： http://html2canvas.hertzen.com/gitHub: https://github.com/niklasvh/html2canvas引用 ： <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/ht...
2018-10-09 08:46:37
8222
1
转载 移动端长按事件
转载自 鼠标长按事件和移动端长按事件转载自 移动端长按事件<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title></title> <script type="text/javascript" src=&qu
2018-09-21 22:22:46
967
原创 photoclip / 移动端图片上传剪裁插件 /一款手势驱动的裁图插件
官方网站 https://www.npmjs.com/package/photoclip介绍在移动设备上双指捏合为缩放，双指转动为旋转 在PC设备上鼠标滚轮为缩放，每次双击则顺时针旋转90度兼容IE10及以上版本，Chrome、Firefox、Safari、Android、微信等主流先进浏览器依赖插件iscroll-zoom.jshammer.jslrz.all.bundl...
2018-09-18 09:20:56
6295
2
转载 js拼接字符串后swiper样式无效，不能滑动的解决方案
swiper插件HTML中可以正常使用，但是在js中拼接字符串生成swiper的HTML就失效了！解决办法 ： swiper的配置一定要放在拼接字符串之后，紧随其后，如果放在其他的位置，swiper是不识别HTML的。//························//步骤let buzhouDataall = '';//console.log(data.data.step)...
2018-09-17 15:55:19
990
原创 swiper / 移动端触摸滑动插件 / 手机轮播插件
做移动端一定会遇到触摸滑动的需求，既需要实现左右的或者上下的自动滚动，又要实现手指滑动的功能。使用swiper 插件就可以完全的满足这个功能，swiper 是开源、免费、强大的触摸滑动插件，使用也很容易上手！swiper 官方中文网 https://www.swiper.com.cn/swiper api文档 https://www.swiper.com.cn/api/index.ht...
2018-09-07 09:01:45
4933
原创 去除苹果手机select 默认样式
主要用的是-webkit-appearance: none;/*兼容苹果手机*/这是一个小demo<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text
2018-08-28 17:50:42
7591
原创 返回上一个页面并且刷新页面
返回上一个页面并且刷新上一个页面：self.location=document.referrer;或者是：window.location.href=document.referrer;document.referrer就是指上一个页面
2018-08-28 17:26:34
2566
原创 对编码的url进行解码/解决取到的地址栏中的中文乱码问/中文乱码转码
在遇到地址栏中带有中文的参数的时候，我们在取到这个中文时有时会出现一堆乱码，这不是我们希望的，我们希望取到的是这个不乱码的中文，也就是经过了解码的中文汉字.。这里要说一下解码是有两种方式：decodeURI ( ) 和 decodeURIComponent ( ).与之相对应有两种编码的方式：encodeURI ( ) 和 encodeURIComponent ( )encodeURI...
2018-08-26 20:19:37
2123
原创 jquery获得$(this)下面的指定的子元素
有时候会遇到循环出来的div，实现用户点击其中一个，据此进行其他操作，我们可以用$(this)来获取用户点击的div，但是如果没有其他的标志来区分这些循环出来的div的话（比如lang值的不同），我们如何获得点击的div的子元素呢？方法有两种，都是jQuery中获得子元素的方法------- .find () 和 .children ()find查找所有的子元素，会一直查找，跨层级查找...
2018-08-25 10:04:42
60061
原创 My97DatePicker日历插件/控制日期范围的选择/控制日历的周日不可选
项目中经常会遇到选择预约的日期的情况，点击会跳出来一个日历的插件选择预约的日期，单纯的用input type = date ,只能有日历但是日历本身是不可操纵的，也就是说想要限制只有周一到周五可以选择，周六周日不可选怎么办呢？这就要用到一个很好用的日历插件了，My97DatePicker。这是它的官方网站 My97日期控件 这是它的官方下载地址 下载My97官方包含了它的使用方法...
2018-08-24 15:37:07
1763
原创 js获得特殊字符前或者后的字符串
使用split进行分割，返回分割好的数组 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body&
2018-08-10 09:25:46
2542
1
原创 实现文字两端对齐
页面开发遇到需要实现文字两端对齐的时候很多，主要使用的是text-align:justify;text-align 属性规定元素中的文本的水平对齐方式但是事实上，在实现两端对齐时，仅设置text-align:justify 实现不了的，还要加上一个span标签，设置padding-left:100% ，虽然我也不知道为什么。这是一个小demo<!DOCTYPE...
2018-08-02 18:25:05
2682
转载 html使用本地字体/自定义字体 字体转换成@font-face所需的web字体格式
转载自 使用@font-face转载自 字体转换网站的使用方法转载自 字体转换网站官网
2018-08-02 10:36:37
2147
转载 css3阴影box-shadow 曲边阴影 翘边阴影 折叠阴影
了解box-shadow 转载自 css3 box-shadow案例转载自 曲边阴影 翘边阴影学习css3 skew 转载自 transform skew() 属性<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>阴影测试</title&
2018-07-24 14:57:20
1062
转载 bootstrap 轮播图的实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Carousel</title> <link rel="stylesheet" hr
2018-07-23 10:35:16
309
原创 多次触发点击click事件
出现的问题是：第一次点击click，执行一次行为；第二次点击click，执行两次行为；第三次点击click，执行三次行为；依次类推。。希望实现的是：每点击一次click，执行一次行为解决方法：先解绑click,再绑定clickvar n=0;$("#rolls").unbind("click").click(function(){ n++; $("#"+i...
2018-07-20 10:12:21
1857
原创 点击触发多次change事件
顺序是，第一次点击上传按钮，会触发一次change事件，第二次点击上传按钮，会触发两次change事件，第三次点击上传按钮，会触发三次change事件，以此类推。。但是希望实现的是每点击一次，只触发一次change事件，解决方法如下：在点击的时候，将change()事件解绑$("#in").click();$("#in").off("change");$("#in").change(...
2018-07-20 09:42:30
4993
1
html2canvas插件包
2018-12-18
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人