0

用JQuery仿造QQ头像裁剪功能

最近工作真心忙碌,几乎没时间写博客。今天趁有时间来仿一个QQ头像裁剪功能插件,效果如下:原理:主要是通过css的clip来裁剪图片可视区域,拖动剪裁窗口这里使用了JQ-UI的draggable插件(但是缩放没有,贪方便可以使用Resizable插件,但都用插件的话就没有研究的意义了)。缩放功能原理其实很简单,不外乎获取剪裁框的offset()或position(),以及各容器宽高、鼠标位置,然后做个大杂侩计算。只能说咱做前端的必须要认真耐心地去做计算,虽然过程颇为麻烦,但绝对不是“做不出来”。有的朋友在做某些功能前,可能会因为需要涉及较麻烦的计算就放弃,这是不靠谱的做法。P.S.:像效果图中会...

阅读全文>>

0

HTML页面仿WORD样式

有时候需要html输出成word形式,因此需要转换对应的样式,转换方式整理如下: 1、标题样式 目录 -- 宋体 小二 加粗 一级标题 -- 微软雅黑 四号 加粗 <div style="font-family:微软雅黑;font-size:19px;font-weight: bold;">1 XXX</div> 二级标题 -- 微软雅黑 小四 加粗 <div style="font-family:微软雅黑;font-size:16px;font-weight: bold;">1.1 XXX</div&g...

阅读全文>>

0

ES6浏览器兼容性问题解析

2015年6月, ES2015(即 ECMAScript 6、ES6) 正式发布。ES2015 是该语言的一个显著更新,也是自 2009年 ES5 标准确定后的第一个重大更新。 ES6 提供了许多新特性,但并不是所有的浏览器都能够完美支持。好在目前各大浏览器自身也加快速度兼容 ES6 的新特性,其中对 ES6 新特性最友好的是 Chrome 和 Firefox 浏览器。 一、桌面端浏览器对ES2015的支持情况 ...

阅读全文>>

0

纯前端利用 js-xlsx 实现 Excel 文件导入导出功能示例

1.导入功能实现 SheetJS下载地址: https://github.com/SheetJS/js-xlsx 下载js-xlsx到dist复制出xlsx.full.min.js引入到页面中 然后通过FileReader对象读取文件利用js-xlsx转成json数据 代码实现(==>示例<==) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src...

阅读全文>>

0

yuicompressor 文件名、目录名或卷标语法不正确

初次接触YUI Compressor,看起来还不错,应该是一个比较好的js压缩工具,也是css压缩工具,于是去github上下载了下来,下载地址也附上: https://github.com/yui/yuicompressor/releases 下载的是最新的版本 YUICompressor 2.4.8 Released。也可以直接用这个地址进行下载: https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar 下载之后将...

阅读全文>>

0

如何用jqueryui的dialog制作一个alert弹窗

使用JqueryUI时,页面里写了一个$.alert方法,报以下错误: Uncaught TypeError: $.alert is not a function 本来以为jqueryui应该有这个方法,但由此来看是没有的。 对于jqueryui的dialog对话框,想实现类似alert的功能,可以定制标题、内容,于是写了一个方法: function dwuAlert(content, title) { $(body).append('<div id="dwuAlert" class="dreamwu-alert"></div>'); ...

阅读全文>>

0

什么是JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。它是基于 JavaScript Programming Language , Standard ECMA-262 3rd Edition - December 1999 的一个子集。 JSON采用完全独立于程序语言的文本格式,但是也使用了类C语言的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。这些特性使JSON成为理想的数据交换语言。 JSON基于两种结构: JSON[1] 结构...

阅读全文>>

0

json在线转换工具

由于平时开发接口时,总是会用到json,因此将比较常用的json在线工具简单地制作了一下,以方便使用。 在线转换json的工具地址为: http://www.dreamwu.com/tools/json 功能有json在线解析、json格式化、json格式验证、json转xml、xml转json,也可以将json下载到本地。 如果有刚刚接触JSON的同学,还不清楚什么是JSON的话,可以移步至下面的JSON基础知识,来了解一下什么是JSON: 什么是JSON

阅读全文>>

0

js中的波浪线符号作用(按位非(~)符号)

Javascript 按位取反运算符 (~) ,对一个表达式执行位非(求非)运算。如 ~1 = -2; ~2 = -3;~-1=0 这个符号很少见,前端js写了那么久,竟然还是第一次遇到。既然遇到了,就不能直接略过。 ~1=-2是如何实现的呢,下面我们来看看计算过程: 一、输入为正数(1和2) (1)二进制原码:0000 0001,0000 0010 (2)按位取反:1111 1110,1111 1101 (3)转成原码二进制,由于第一位是1,因此为负数,负数转成原码,第1位符号位不变,其余取反+1:1000 0010,1...

阅读全文>>

1

常见的js操作日期-周别的函数方法

<SCRIPT LANGUAGE="JavaScript" type="text/javascript"> //获取本周是一年中的第几周 function getWeekOfYear(a, b, c) { var d1 = new Date(a, b-1, c); var d2 = new Date(a, 0, 1); var d = Math.round((d1 - d2) / 86400000); return Math.ceil((d + ((d2.getDay() + 1) - 1)) / 7); }; //本周第一天 ...

阅读全文>>