jl2577-CSDN博客

原创 css3实现圆环加载进度条

前两天面试，让我现场用css3做一个圆环加载的进度条，没写出来，尴尬了。抽空参考了些网上的例子，做了下面这个demo。效果图：当时的要求是让进度条以扇形渐变的效果加载。我想了半天，好像只有用border-img来做渐变图了。css3提供的渐变有线性渐变，径向渐变和重复渐变，想不出来怎样实现扇形渐变。不说了，上代码： Document *{ margin: 0

2016-04-21 14:53:29 31087

原创 Zepto tap事件“穿透”、“点透”问题研究

首先，什么是zepto tap事件穿透？tap事件穿透就是，有多个层级上有绑定事件，最上层的绑定了tap事件，下层绑定了click事件，在执行完上层事件后会触发下层事件，进而出现事件穿透。如果下层是input标签，必穿透。究其原因：是因为zepto实现tap事件是冒泡到document上时才触发的，也就是tap事件是绑定在document上，而click事件有延时触发。

2016-04-01 11:40:28 7398

原创 HTML5上传图片及其相关知识点

前几日做了项目，其中有一个模块涉及到上传图片至服务器。今天抽空整理了下，发现越整理涉及的知识点越多，下面例子有参考百度的搜图。知识点：input file、base64、FileReader、canvas压缩、blob、btoa编码和atob解码、FormData。html dom节点：默认可以选择一个文件。需要上传多张。可以增加multiple="true" 属性。一般使用opa

2016-03-15 10:24:37 938

转载 javascript Date Format方法

从别处看到js的Date的Format方法的实现，先留着。方法一：// 对Date的扩展，将 Date 转化为指定格式的String// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) // 例子： // (new Date()).Format

2016-01-19 16:08:54 1062

原创 Web Storage存储

localStorage-------sessionStorageWeb Storage特点：1、Key--Value型的简单存储形式2、可以和其他普通的javascript对象相同的形式来进行读写操作3、容量大-->5M（和cookie相比）--（cookie只有4KB、且发送请求时会一起带上，影响速度）4、只能在同源的情况下才能被访问以下用localStorag

2016-01-15 09:30:22 471

原创 Canvas学习笔记

获取canvas对象上下文var convas=document.getElementById('canvas');var context=canvas.getContext('2d');canvas是基于状态的绘图环境画直线context.moveTo(x,y); 挪到笔头 context.lineTo(x,y);按着画笔移动（可以结合使用moveTo

2015-11-13 00:14:43 860

原创访问javascript对象的属性和方法

之前就没认真看过，一直就知道定义一个对象，然后用‘.’操作来访问属性和方法。今天突然看见还有另外一种方法，就认真看了下。 var obj={}; var arr=[]; arr[0]=1,arr[1]=2; obj.a=arr; obj.b=2; obj.c=3; obj.d=function x(a){console.log(2*a);}; obj.e=function y(a

2015-10-30 16:46:13 2736

原创 https证书

今天遇到一个奇怪的问题同一个https链接生成的二维码用ios微信扫正常，用android微信扫显示空白。但是用浏览器访问却是正常，有的手机提示正式异常，有的没提示。将链接换成http就OK了。此类问题，基本都是https的证书有问题所致。如果有提示证书异常的，可以点击进去看看，有些是证书的颁发商没加上，所以就无法加载。让基础架构组的同事搞下就可以了。很奇怪的一点是andro

2015-10-28 16:36:56 537

原创 CSS杂记

1、transform:translate(移动)：px水平垂直\scale（缩放）：数字，水平垂直\rotate（旋转）：角度（deg） \skew（倾斜）：角度 -----执行顺序左到右，无优先级2、基于上一个属性，有了下一个属性transform-origin：变换的基准点。已左上角为为原点，可以是left\top\px\%\center这些单位3、transition:变

2015-10-27 19:56:59 421

原创 JavaScript获取函数参数名称

在webhak.com浏览时看到一个可以通过javaScript获取函数参数名称的方法，觉得它用正则很巧妙，阅读了下，先记下，说不定日后有用。function getArgs(func){ //匹配函数括号里的参数 var args=func.toString().match(/function\s.*?$([^)]*)$/)[1]; //分解参数成数组 return a

2015-10-27 19:22:02 3033

转载 HTML+CSS实现loading

Document *{ margin: 0; padding: 0; } body{ background-color: #ccc; font-family: "sans-serif"; } #main{ width: 960px; margin: 100px auto; } .contain_load{ width: 240px; height:

2015-10-15 17:56:06 971

原创 CSS伪类和伪元素

从字义上来看都是伪的，假的，不存在的类和元素。看下，其w3c定义，如下CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。首先这2个都和选择器有关，用于”特殊“的效果。需要注意下的伪类是一个冒号：，为元素是两个：：，虽然一个冒号也认，严格点应该是2个冒号。伪类：a标签有：a：link，a：visited，a：hover，a：active。

2015-09-06 11:02:20 356

转载常用<meta>整理

概要标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 —— W3School必要属性属性值描述contentsome text定义与http-equiv或name属性相关的元信

2015-09-02 09:41:24 395

原创 li的水平排列问题

涅槃总是痛苦的，什么都得重新开始。最近在开始转前端，学习css。在li水平排列时遇到了几个问题，把解决方法记录下来。什么不多说，开始上代码。 li水平排列 html{ font-size: 20px; } @media only screen and (min-width: 320px){ html{font-size: 20px !important;

2015-08-17 16:28:05 5514

转载关于页面、可视区、屏幕等一些相关的宽高属性

关于页面、可视区、屏幕等一些相关的宽高属性function size(){ document.write( "屏幕分辨率为："+screen.width+"*"+screen.height +""+ "屏幕可用大小："+screen.availWidth+"*"+screen.availHeight +""+ "网页可见区域宽："+document.body.clientWidt

2015-08-16 13:00:47 963

原创 REM

rem是什么？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。上面说过rem是通过根元素进行适配

2015-08-10 14:50:08 900

转载移动端WEB开发，click,touch,tap事件浅析

抄了一篇文章，至少对click tap touch事件有了一定的了解。一、click 和 tap 比较两者都会在点击时触发，但是在手机WEB端，click会有 200~300 ms，所以请用tap代替click作为点击事件。singleTap和doubleTap 分别代表单次点击和双次点击。二、关于tap的点透处理在使用zepto框架的tap

2015-07-24 12:51:11 656

转载 JQuery $()

从别处抄了一段话，个人觉得对应jQuery新手还是蛮有帮助的。JQuery $()的用法：主要有三种，取表达式、取元素、取函数。1、标签选择器$('p')、类选择器$('.myClass')、id选择器$('#myId')相对简单，不多说。不过有一点——$('div>ul')和$('div ul')是有区别的， $('div>ul')是的直接后代里找；而$('div ul')是在的所有

2014-12-10 16:14:53 496

转载 Web错误代码大全

IIS状态代码的含义概要当用户试图通过HTTP或文件传输协议(FTP)访问一台正在运行Internet信息服务(IIS)的服务器上的内容时，IIS返回一个表示该请求的状态的数字代码。该状态代码记录在IIS日志中，同时也可能在Web浏览器或FTP客户端显示。状态代码可以指明具体请求是否已成功，还可以揭示请求失败的确切原因。更多信息日志文件的位置在默认状态下，IIS把它的

2014-11-14 16:07:59 884

Java写的加密解密算法及调用范例1、.JAVA算法范例package Common.JUtility; import javax.crypto.*;import javax.crypto.spec.SecretKeySpec;import com.sun.org.apache.xerces.internal.impl.dv.util.Base64; public class EncryptUti

2014-11-13 11:05:46 903

原创 Ibatis:Lock wait timeout exceeded; try restarting transaction

SqlMapClient operation; SQL []; --- The error occurred in sqlmap-mapping-terminalVehicleRelation.xml. --- The error occurred while applying a parameter map. --- Check the updateDeptName-InlineP

2014-11-12 10:55:41 2894

原创 JS自定义哈希表和顺序列表

/**哈希表*/var HashMap = function(){ this.table={}; this.count=0;//长度 /**添加对象 * @param key 键 * @param obj 对象 */ this.put=function(key,obj){ var v=this.table[key]; if(typeof(v)=="unde

2014-11-06 15:22:06 1118

转载 SQLYog快捷键大全

Ctrl+M 创建一个新的连接Ctrl+N 使用当前设置新建连接Ctrl+F4 断开当前连接对象浏览器F5 刷新对象浏览器(默认)Ctrl+B 设置焦点于对象浏览器SQL 窗口Ctrl+T 新建查询编辑器Ctrl+E 设置焦点于 SQL 窗口Ctrl+Y 重做 Ctrl+Z 撤销 Ctrl+X 剪切

2014-10-15 10:07:30 510

转载 java读取文件大全

public class ReadFromFile { /** * 以字节为单位读取文件，常用于读二进制文件，如图片、声音、影像等文件。 */ public static void readFileByBytes(String fileName) { File file = new File(fileName); InputStream in = null; try { System.out.pr

2014-10-13 21:15:13 460