动画原理 SVG动画，就是元素的属性值关于时间的变化。 如下图来说，元素的某个属性值的起始值（from）到结束值（to）在一个时间段（duration）根据时间函数（timing-function）计算出每一帧（frame）的插值（interpolation）作为变换的行为。 PS：SVG动画是帧动画，在SVG里也就是每秒设置多少个value值。 SVG动画语法 SVG动画是基于SMIL（Synchronized Multimedia Integration Language）语言的，全称是同步多媒体集成语言。 S…
写过很多代码后，会有代码的规范有一些需求，会有想写出美观、规范、易懂的代码。 今天学习了NEC，全称Nice Easy CSS（http://nec.netease.com/）,顾名思义，就是为了写简单漂亮的CSS代码，下面是我今天所学。 PS:有可能有些我理解会有问题。 规范 我最看重这个，里面的框架、代码库、插件我觉得不是太重要。 CCS规范 CSS文件的分类： 公共型样式：也就是各个页面共用的样式 特殊型样式：当前页面的特殊样式（只此页面使用） 皮肤型样式：换肤的样式，有三个文件（如果产品需要换肤功能，那…
在浏览器客户端记录一些信息，有三种常用的Web数据持久化存储的方式，分别是Web SQL、Local Storage、Cookies。 Web SQL 作为html5本地数据库，可通过一套API来操纵客户端的数据库（关系数据库），下面是支持浏览器情况。 鉴于PC浏览器支持情况，我找了淘宝、京东、携程、起点、优酷网站，并没有用Web SQL记录客户端信息。在移动端比较适用，特别是对于Hybrid应用，更是得心应手。 接口： openDatabase transaction executeSql 1.打开连接并创建数据…
JSON.parse与eval和能将一个字符串解析成一个JSON对象，但还是有挺大区别。 测试代码 var A = "{ a: 1 , b : 'hello' }"; var B = "{ 'a': 1 , 'b' : 'hello' }"; var C = "{'a':1,'b':'hello'}"; var D = '{"a":1,"b":"hello"}'; var E = '{ "a" : 1 , "b" : "hello" }'; var F = '{ "a" : 1 ,\n "b" : "hello" …
1.清除浮动 下面是两种常用的方式，而这两招也够用了(不用千招会，只需一招精)。 1.结尾处加空div标签 clear:both <style type="text/css"> .left{float:left;} .right{float:right;} /*清除浮动代码*/ .clearfloat{clear:both} </style> <div> <div class="left">Left</div> <div class="right"&…
之前一直以为用background引入的图标无法染色（非字体图标），现在才知道有黑科技可以用，就是利用drop-shadow。 代码示例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .face1{ display: inline-block; width: 40px; height: 40px; back…
Session Storage sessionStorage用于本地存储一个会话（session）的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁（浏览器关闭）。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储，操作与localStorage一样，就不细讲了。 Cache Storage cacheStorage用来存储Response对象的，也就是说用来对HTTP响应做缓存的。而由于并没有形成标准，我也还有些困惑地方，就不举例子，下面是浏览器支持情况，所…
今天整理出在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做的一些业务逻辑去掉，只留下控制显隐部分，并打印执行时间。 测试过后发现，即便是这么简单的操作，页面还是会卡顿，从打印的日志上看，我发现了切换的代码很快就执行完了，是后续的渲染…
COPYRIGHT © 2022 zhizhesoft. ALL RIGHTS RESERVED.