今天整理出在Web前端导出Excel的写法，写了一个工具类，对各个浏览器进行了兼容。 首先，导出的数据来源可能有两种： 1. 页面的HTML内容（一般是table） 2. 纯数据 PS：不同的数据源，导出的写法也是不相同的。 技术方案 IE 无论数据来源是哪里，都是用ActiveXObject对象及相关的命令，IE10、11有点不同。 非IE 纯数据的，使用一个FileSaver.js，如果有浏览器不支持Blob的，还需要引入Blob.js，来做导出。 HTML内容的，构造一个base64字符串的路径，跳转地址下…
1.垂直居中 有时我们会使用margin: 0 auto;作居中使用。但有的时候我们需要垂直居中，例如在div里面垂直居中显示一张加载中的gif图。 下面这种写法就可以完美实现： 垂直居中的子容器 { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width:80px; height:80px; }
前因 今天检查一个vue页面问题，就是在切换Tab时候（某些win10电脑），页面会卡顿一段很长的时间，短则3秒，长则十几秒，这个体验非常糟糕，于是我着手寻找其中原因。 概况 这个vue页面的元素非常多，主要分为六个Tab内容，切换Tab也只是控制Tab内容的显隐。按道理这是非常简单的行为，不应该出现卡顿的情况。 检查 代码上，我将切换Tab做的一些业务逻辑去掉，只留下控制显隐部分，并打印执行时间。 测试过后发现，即便是这么简单的操作，页面还是会卡顿，从打印的日志上看，我发现了切换的代码很快就执行完了，是后续的渲染…
HTML5拖放能够将本地的文件拖放到页面上，plupload又是很好的文件上传插件，而今天就将两者结合，做了个文件拖拽上传的功能。 简述HTML5拖放 拖放是HTML5标准的一部分，任何元素都能够拖放，也能够将本地的文件拖放到页面上。 设置元素可拖放 为了使元素可拖动，把 draggable 属性设置为 true <img draggable="true" /> 拖放事件 有7个拖放事件可以捕获，如下： dragstart：开始拖元素触发 dragenter：元素拖进可drop元素（绑定drop事件的元…
JavaScript事件机制，也有让人深思的东西。在一开始未深入了解，我头脑里有几个问题发出： 1. 自下而上（冒泡）事件怎么写，自上而下（捕获）又是怎么写？ 2. 捕获型和冒泡型同时设置，谁生效？ 3. 冒泡能够阻止，那捕获能够阻止吗？ 4. jquery的on或bind是冒泡，还是捕获？ 5. 两种事件方式的应用场景是？ 示例 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> &l…
简单介绍下NodeJS现有API。 Assert（断言）：该模块用于编写程序的单元测试用例。 Buffer（缓冲块） ：处理二进制数据。 C/C++ Addons（拓展）：Addons插件就是动态连接库。 Child Processes（子进程）：提供了类似 popen(3) 的处理三向数据流（stdin/stdout/stderr）的功能。 Cluster（集群）：用于nodejs多核处理，简化多进程并行化程序的开发，轻松构建一个用于负载均衡的集群。 Console（控制台）：类似于大部分 Web 浏览器提供的 …
1、图片圆角显示 例如（非常简单）： HTML： <img src="mao.png" /> CSS： img{ border-radius: 10px; } 如果图片只为圆角，这种方式确实没问题，但如果还要加上居中的效果，这种方式就有问题，下面会说明。 2、图片居中显示（铺满父容器且不变形） 效果图如下： PS：为了实现上图居中的效果，单靠CSS是不行的，还需要JS处理。 例如： HTML： <div class="rd-box" style="width:200px;height:200px;…
HTML5离线缓存又名Application Cache，是从浏览器的缓存中分出来的一块缓存区，要想在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。 Manifest 文件 manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。 manifest 文件可分为三个部分： CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存 NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存 FALLBACK…
上周末（2016/07/31）去了一个技术沙龙学习前端相关的东西，下面是各个主题我印象比较深的。 React + Redux 最佳实践 主题：本次分享，主要从React/Redux相关概念及其工具链，Webpack构建流程，如何Mock数据，如何测试以及一些开发小经验等方面，分享介绍如何使用React/Redux开发一个前后端分离的企业级应用系统。 有意思地方： 1. 规范化 通过开发工具进行代码校验，统一编码风格。 统一的ES6写法（这个见仁见智）。 2. JavaScript测试 进行JavaScript，介绍…
前言 以一个煮饭的例子开始，例如有三件事，A是买菜、B是买肉、C是洗米，最终的结果是为了煮一餐饭。为了最后一餐饭，可以三件事一起做，也可以轮流做，也可能C需要最后做（等A、B做完），这三件事是相关的，抽象起来有三种场景。 顺序做 先买菜，再买肉，最后洗米， 即 A->B->C。 并发做 买菜，买肉，洗米，一起做。 交集做 买菜，买肉必须先做完，才能做洗米。 场景就是这样，接下来就是如何考虑用js实现。 function A(callback){ setTimeout(function(){ callba…
COPYRIGHT © 2022 zhizhesoft. ALL RIGHTS RESERVED.