05 2020 档案
摘要：弹性盒子基础 弹性盒子(Flexible Box)是css3中盒子模型的弹性布局，在传统的布局方式上增加了很多灵活性。 定义一个弹性盒子 在父盒子上定义display属性： #box{ display: -webkit-flex; //webkit内核浏览器的兼容设置，下同 display: fle
阅读全文
摘要：SCSS的由来 SCSS就是加强版的CSS，要讲SCSS那就一定要从SASS讲起 SASS Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。2007年发行
阅读全文
摘要：查看原文可以有更好的排版效果哦 前言 居中是平时工作中的最常见的一种需求，各种图片居中或者各种弹窗，水平居中还好，特别是垂直居中，很多初学者表示太难写了，现在列举一些常用的方法。 实战 这里只讲述css相关的方法，js暂时不提，毕竟这是样式上的事情，就不劳烦js出手了。 1. top 50% ;ma
阅读全文
摘要：在css3中transition和animation都可以实现动画效果，但是我们什么时候用transition，什么时候用animation。 当有事件触发动画的时候我们就用transition。比如hover事件mouseove、mouseout事件等等 当没有事件触发直接播放的时候我们就用ani
阅读全文
摘要：前端开发需要了解的工具集合：webpack, eslint, prettier, ... 前端开发需要了解的一些工具，这些工具能够帮助你在项目开发中事半功倍。 1. nrm: npm registry 管理器 registry: npm 远程仓库的地址。 由于众所周知的原因，npm 官方仓库在国内特
阅读全文
摘要：css 的弱化与 js 的强化 web 的三要素 html, css, js 在前端组件化的过程中，比如 react、vue 等组件化框架的运用，使 html 的弱化与 js 的强化 成为了一种趋势，而在这个过程中，其实还有另一种趋势也在慢慢形成：css 的弱化与 js 的强化。 之前有写过一篇 C
阅读全文
摘要：每天一个CSS-社会人 实现效果 想法 之前看到一篇博客，使用python绘制出了小猪佩奇，所以自己想试一试，采用纯html + CSS绘制出低配版的小猪佩奇。 实现思路 使用上一篇，圆与边框实现。最后是一个组合图形，初学者都可以完成，可尝试。 缺点 1、低配版的小猪太圆润，后面会对整体图形进行修改
阅读全文
摘要：半透明边框 background-clip: 规定背景的绘制区域 .div { width: 200px; height: 200px; background: blue; border: 10px solid rgba(255, 170, 170, 0.3); background-clip: p
阅读全文
摘要：CSS和模型 CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，包括 外边距（marign），边框（border），填充（padding），内容物（content） 盒子模型的类型：W3C 标准和模型和 IE 盒模型（怪异盒模型） W3C 标准盒模型：属性 width 和 height 只包
阅读全文
摘要：CSS的两种经典布局 左右布局 一栏定宽，一栏自适应 <!-- html --> <div class="left">定宽</div> <div class="right">自适应</div> <!-- css --> .left{ width: 200px; height: 600px; floa
阅读全文
摘要：介绍 项目已经开源：https://github.com/nanhupatar... 欢迎PR 推荐 关注我们的公众号 display: none; 与 visibility: hidden; 的区别 相同： 它们都能让元素不可见 区别： display:none;会让元素完全从渲染树中消失，渲染的
阅读全文
摘要：最近因为工作需要，自学了Sass。现在将学习笔记整理在这里，供大家参考。 1. Sass的安装 Sass的编辑器安装方法有很多，大致能分为两种：应用程序（application）和命令行界面（command line）。我使用的是命令行。因为之前已经在Mac上安装过Homebrew的package，
阅读全文
摘要：Flex布局教程地址https://www.youtube.com/watch...https://paper.dropbox.com/doc...https://www.w3cplus.com/css3/... 控制换行属性 flex-wrap: wrap | nowrap | wrap-reve
阅读全文
摘要：写在前面 今天是入门前端的day2, 小伙伴们应该已经看了一些HTML的基础和CSS的基础了，是不是遇到了很多关于CSS的问题呢。因为HTML很少有太复杂的问题，所以直接写一篇关于CSS的常见问题及解答啦~ display: none;和visibility:hidden;的区别 简单来说： dis
阅读全文
摘要：问题描述：一个内嵌IOSAPP的H5页面，长页面，大概1.6个屏幕高度，由于有列表滑动起来很不流畅，所以用了-webit-overflow-scrolling:touch;这个只针对ios端的物理滚动属性来调整，但是滚动流畅实现了，部分区域因为加了这个属性出现滑动白屏情况。原有的html结构也还在就
阅读全文
摘要：本来想自己写一篇关于vue入门的文章。但是看到链接的文章后，觉得写得太详细了，实在有保存下来的必要。后面可能在这篇文章基础上，有所内容的增加。 CSS预处理器 定义了一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，
阅读全文
摘要：前端如何高效的与后端协作开发 1. 前后端分离 前端与后端的分离，能使前端的开发脱离后端的开发模式，拥有更大的自由度，以此便可做前端工程化、组件化、单页面应用等。 可以参考：前后端分离、web与static服务器分离 2. 尽量避免后端模板渲染 web 应用的渲染方式分为服务器端渲染和客户端渲染，当
阅读全文
摘要：引出问题 首先我们来这么一个问题, 这里是完整的 jsfiddle demo or codepen demo 给一个元素绑定两个边框样式， 右侧和底部都为1px的红色边框 styleA: { borderBottom: '1px solid red', borderRight: '1px solid
阅读全文
摘要：如果二者是父子关系，可以写成这种： .face:hover .eye-bottom { margin-top: 30px; } 如果是兄弟关系： .face:hover+.ear-wrap { transform: rotate(-30deg); } 如果是兄弟的儿子： .face:hover+.e
阅读全文
摘要：<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta content="IE=8" http-equiv="X-UA-Compatible"/> <title> CSS垂直居中</title> <style ty
阅读全文
摘要：CSS在处理排版之强大，没有做不到，只有想不到。下面我们将一同实现一个柱状图。 先打好一个具体的框架。我们利用无序列表做整体，里面的东西我们根本选择内联无素span，strong，em来填充。 <ul class="chart"> <li><em>使命召唤</em><span>: </span><s
阅读全文
摘要：HTML代码如下 <div class="content"> <a href="javaScript:;">大树</a> <a href="javaScript:;">小草</a> <a href="javaScript:;">花朵</a> <a href="javaScript:;">太阳</a>
阅读全文
摘要：position 属性指定了html元素的定位类型。 position 属性有 4 种值：1. static（default）表示没有定位，元素出现在正常的文档流中。为静态定位的元素设置 top|bottom|left|right 不起作用。 2. fixed元素的位置相对于浏览器窗口是固定位置。即
阅读全文
摘要：在web前端开发过程中，UI设计师经常会设计一些带渐变文字的设计图，在以前我们只能用png的图片来代替文字，今天可以实现使用纯CSS实现渐变文字了。下面就介绍3中实现方式供大家参考！ 基础样式： .gradient-text{text-align: left;text-indent:30px;lin
阅读全文
摘要：引言 页面滚动条造成宽度减小的场景很常见了，由于div块级元素的流动性，其宽度默认为100%的body宽度，但是当容器的高度超过视口宽度时候，页面就会出现滚动条，这个滚动条的宽度就会挤压body的可用宽度，也就是会挤压我们的容器的宽度，造成页面晃动的现象，很不友好，下面就来探讨下如何解决这个滚动条的
阅读全文
摘要：代码如下: const slider = (function() { var Slider = {}; // the constructed function,timeManager,as such that's a manager about managing the setInterval fu
阅读全文
摘要：1.两列左侧固定宽度，右侧自适应 <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> </div> </div> 1.float+margin .left { floa
阅读全文
摘要：面试前 正式入职一年半左右，实习半年，勉强两年经验吧，然后很惊喜收到了百度的面试邀约，约得两点钟面试，然后本人一点钟就到了，通电话之后，面试官很热情，说正在吃饭吃完饭就去找我，让我去坐着等一会，然后一会来了就直接面试了，点个赞。 一面 一面主要是问了一些基础问题，很尴尬，有好多都不确定，这里就把问题
阅读全文
摘要：table td:first-child { width:160px; height:20px; border:solid 1px Black; padding:5px; text-align:center; } table td:last-child { width:600px; height:2
阅读全文
摘要：dedecms默认是所有的功能几乎只要用到验证码的地方我们都需要验证的，如果要关闭一些验证功能我们可以参考下面的教程，这里介绍了关闭后台，留言板，会员系统等验证码功能关闭了。提示：支持DedeCMS V5.6 以上的所有版本取消后台登录验证码打开/data/safe/inc_safe_config.
阅读全文
摘要：小蚂蚁说：在金融级互联网产品持续交付方面，蚂蚁金服积累了丰富的经验和最佳工程实践。在2018年ATEC技术探索大会上，蚂蚁金服解决方案架构师吕中邦（凤启）从行业背景出发，分析了金融级互联网产品持续交付的核心挑战，从“更快更早地交付价值”和“守住技术风险底线保障交付质量”两个维度分享了蚂蚁应对这些挑战
阅读全文
摘要：1：问题： 假如在做一个管理系统，面向老师学生的，学生提交申请，老师负责审核（或者还需要添加其他角色，功能权限都不同）。 现在的问题是，每种角色登录看到的界面应该都是不一样的，那这个页面的区分如何实现呢？ 2：要不要给老师和学生各自设计一套页面？这样工作量是不是太大了，并且如果还要加入其它角色的话，
阅读全文
摘要：这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【什么是RESTFUL？REST的请求方法有哪些，有什么区别？】 1.背景介绍restFul是符合rest架构风格的
阅读全文
摘要：这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【post提交的数据有哪几种编码格式？能否通过URL参数获取用户账户密码】 1.背景介绍 HTTP/1.1 协议规定
阅读全文
摘要：这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【什么是jsp？jsp的内置对象有哪些？】 1、背景介绍 百度百科是这么介绍jsp的：“jsp是一种动态网页技术标准
阅读全文
摘要：这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【Session和Cookie的区别】 1.背景介绍 什么是Cookie Cookie 是在HTTP协议下，服务器或
阅读全文
摘要：[TOC] 一、课程介绍 二、HTML基础强化 html常见元素和理解 html常见元素分类 head区元素：（不会在页面上留下元素） * meta * title * style * link * script * base body区： * div/selection/article/aside
阅读全文
摘要：CSS 翻转图片主要用到的技术除了3D翻转和定位 ，还用到了一个属性 backface-visibility：visable|hidden;该属性主要是用来设定元素背面是否可见。 效果图如下： 具体的步骤如下： 1、写出页面主体， <div> <img src="Images/b.jpg" alt=
阅读全文
摘要：首发我的博客 http://blog.meathill.com/tech/js/export-table-data-into-a-excel-file.html 最近接到这么个需求，要把<table>显示的数据导出成Excel表。类似的需求并不稀罕，过去我通常用PHP输出.csv文件，不过这次似乎不
阅读全文
摘要：参考HTML5Rocks的这篇文章实现的一个简单的例子。 思路如下： 1. 把冰箱门打开 2. 把大象放进冰箱里 3. 把冰箱门关上 好了不开玩笑了，其实思路是： 1. 通过getUserMedia调用设备的摄像头（电脑、手机都可以，取决于浏览器对这个API的支持情况），并将资源放入video标签。
阅读全文
摘要：编者注：我们发现了有趣的系列文章《30天学习30种新技术》，正在翻译，一天一篇更新，年终礼包。下面是第19天的内容。 到目前为止，我们这一系列文章涉及了Bower、AngularJS、GruntJS、PhoneGap和MeteorJS 这些JavaScript技术。今天我打算学习一个名为Ember的
阅读全文
摘要：如今，HTML5 可谓如众星捧月一般，受到许多业内巨头的青睐。很多Web开发者也尝试着用 HTML 5 来制作各种各样的富 Web 应用。HTML 5 规范引进了很多新特性，其中之一就是 Canvas 元素。HTML 5 Canvas 提供了通过 JavaScript 绘制图形的方法，非常强大。今天
阅读全文
摘要：HTML5 拥有众多引人注目的新特性，如 Canvas、本地存储、多媒体编程接口、WebSocket 等等。其中，WebSocket 的出现使得浏览器提供对 Socket 的支持成为可能，从而在浏览器和服务器之间提供了一个基于 TCP 连接的双向通道。使用 WebSocket，web开发人员可以很方
阅读全文
摘要：UI是Web的灵魂！Semantic UI是一款语义化设计的前端框架，为攻城师而制作的可复用的开源前端框架。 特性 弃用有歧义的表述 Semantic是围绕自然交流语言而架构的，这使得开发更加直观（易于理解）。 Semantic让你可以使用任何HTML标签来表现UI控件。 Semantic <mai
阅读全文
摘要：Flappy Bird这款简单的小游戏累计下载量已经超过5000万次，每天收入至少5万美元。然而，2月10日其开发者Dong Nguyen却将Flappy Bird从苹果App Store和Google Play应用商店下架。 他给出的理由十分莫名：火爆打扰了我平静的生活，无法忍受。 下架了怎么办？
阅读全文
摘要：用过jquery的朋友都知道，jquery提供的方法中（3个）可以很方便的为指定的节点添加、删除类选择器，即addClass、removeClass、toggleClass。具体的用法我这里就不谈了，不了解的请移步[jquery官方网站][1] 下面我们一起看看html5中classList对象的基
阅读全文
摘要：HTML5标签速查，助你快速了解HTML 5。 HTML 5新加入的标签以黑体标识，HTML 5不支持的以斜体标识。 标签 描述 <!--...--> 评论 <!DOCTYPE> 文档类型 a 超链接 abbr 缩写 acronym HTML 5中废弃，请使用abbr address 定义文档作者的
阅读全文
摘要：placeholder placeholder是input中的属性，就是默认输入的text，当用户输入时，text会被清空。 用法 <input type ="text" placeholder="hello,testor" />
阅读全文
摘要：<dl></dl> 定义列表（英文全称：DefinitionList） <dt> 放在每个定义术语词前（定义术语、英文全称：DefinitionTerm） 名称 <dd> 放在每个定义之前（定义说明、英文全称：DefinitionDescription）说明 table 中的th table hea
阅读全文
摘要：什么是网络拓扑 网络拓扑，指构成网络的成员间特定的排列方式。分为物理的，即真实的、或者逻辑的，即虚拟的两种。如果两个网络的连接结构相同，我们就説它们的网络拓扑相同，尽管它们各自内部的物理接线、节点间距离可能会有不同。 - 维基百科 网络拓扑图的绘制 很多人用visio绘制网络拓扑图，非常精美，但只能
阅读全文
摘要：js运行效率在提升 编程语言的效率是前提，js自然比不上native的C语言效率，所以Canvas效率无疑比不上原生的2D图形绘制，但是js效率的提升是有目共睹的，以js与as为例，基本操作（运算操作，集合操作，Map操作）已经超越ActionScript，尤其是Google Chrome浏览器与a
阅读全文
摘要：正巧看到在送书，于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告：更多内容可以看我的博客 之前在segmentfault上刷问题看到一个关于manifest的问题，很好奇就研究了一下application cache。Application Cache是HTML5的新特性，允许
阅读全文
摘要：html5 在 history 对象上添加几个新的方法、事件、属性，用以增强开发者对于浏览器历史记录的控制。大体上说，新的API可以帮助我们在无刷新的情况下改变浏览器的url，新增或者替换之前的历史记录。建议先看看这个示例, 具体的文档推荐参考MDN。 这里谈谈使用新的 History API时，需
阅读全文
摘要：Kiwi.js是由GameLab开发的一款全新的开源HTML5 JavaScript游戏引擎。在经过一年多的开发和测试之后，终于在日前正式发布了Kiwi.js 1.0版本。 其创始人Dan Milward表示，“我们的目标是将Kiwi.js打造成为HTML5游戏引擎中的WordPress，所以，它包
阅读全文
摘要：公开 property 当你公开一个 Polymer 元素的 property 名字时，就等于把这个 property 设置为公开API了。公开 property 会有如下的特性： 支持声明数据双向绑定 通过声明，property 将会按照名称一样的 html attribute 初始化数据 pro
阅读全文
摘要：继续来说编辑器的需求， 前面介绍了拖拽创建节点、以及连线的方法，并加入到了其后的 Qunee 类库，实际应用中需要更多功能，Qunee 的拓扑图编辑器也在逐渐完善，一方面增加多种编辑交互，一方面提供数据导入导出，同时也在摸索编辑器的整体界面设计和前端开发框架 拖拽创建节点 延续之前提供的功能，增加更
阅读全文
摘要：一款开源的支持多人同时在线实时游戏的服务端引擎，使用简单的约定协议就能够使客户端与服务端进行交互，使用KBEngine插件能够快速与(Unity3D、OGRE、Cocos2d、HTML5,等等)技术结合形成一个完整的客户端。 服务端底层框架使用c++编写，游戏逻辑层使用Python(支持热更新)，开
阅读全文
摘要：Qunee for HTML5 V1.6正式发布，修复了一些 BUG，增加了滚动条支持，改进了编辑器，增加了JSON 导入导出、告警冒泡、连线流动，UI 定制等扩展示例，欢迎 访问 导航面板 增加了滚动条导航模式，加上之前的导航按钮模式，以及去除导航面板的情况，出现了三种导航模式，并在Graph中提
阅读全文
摘要：本来想翻译的但是有人翻译了，还是转过来吧。原文《HTML5 Link Prefetching》，译文《使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度》 简介 不管是浏览器的开发者还是普通web应用的开发者，他们都在做一个共同的努力：让Web浏览有更快的速度感觉。
阅读全文
摘要：4.1.2 通过实例来亲身体验Activity的生命周期 上一小节介绍了Activity生命周期中的各个过程，本小节将以一个简单的实例来使读者亲身体验到Activity生命周期中的各个事件。 在Eclipse中新建一个Android工程，命名为example4_1，修改其MainActivity类中
阅读全文
摘要：让 web app 像 native app 那样运行 云集是一个轻应用（即 web app）的运行环境，可以让 web app 像 native app 那样运行。 just like this 这才是 HTML5 的正确打开方式。 我们目前同时做了 iOS 和 Android 两个平台的客户端。
阅读全文
摘要：源于Browsing Context 的概念，不仅有_blank，还有_parent, _top, _self等。 先留个坑。见示例。
阅读全文
摘要：什么是SVG？ 引用w3c的一段话就是： SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 PS：`SVG` 在IE9以及`Fire
阅读全文
摘要：CSS3选择器兼容IE6~8: Selectivizr 使用方法： <!--[if (gte IE 6)&(lte IE 8)]> <script src="http://s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></scrip
阅读全文
摘要：代码： <input type="file" name="uploadfile" class="J-upload"> <script> //上传后 var upLoaded = function(evt) { var fileString = evt.target.result; console.l
阅读全文
摘要：转 TAT.Jdo：【Web Audio API】 — 那些年的 web audio 这主题主要是早期对 web audio api的一些尝试，这里整理一下以便以后翻阅，如有错误，诚请指正。 在这之前，先回顾一下那些年我们一起走过的web audio： <bgsound> 在我印象当中，bgsoun
阅读全文
摘要：1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影。 备注：transparent的属性值在android下无效。 2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影
阅读全文
摘要：相关概念：绘制频率、屏幕刷新频率、硬件加速、60fps 绘制频率： 页面上每一帧变化都是系统绘制出来的(GPU或者CPU)【参考浏览器渲染原理】。但这种绘制又和PC游戏的绘制不同，它的最高绘制频率受限于显示器的刷新频率(而非显卡)，所以大多数情况下最高的绘制频率只能是每秒60帧(frame per
阅读全文
摘要：在 Mobile 端需要注意. 安卓 默认浏览器 当中如果 div1 div2 如果 div1 有 translate3d 而 div2 没有 那么 div2 的 z-index 会无效. 解决办法: 给 div2 也加上 translate3d(0,0,0) 测试版本: 安卓 4.2.2 stac
阅读全文
摘要：javascirpt (function($){ $.fn.extend({ aiiUpload:function(obj) { if(typeof obj !="object") { alert('参数错误'); return; } var imageWidth,imageHeight; var
阅读全文
摘要：js： if (window.File && window.FileReader && window.FileList && window.Blob){ //Blob是计算机界通用术语之一，全称写作：BLOB (binary large object)，表示二进制大对象。 //全部支持 functi
阅读全文
摘要：viewport是专为手机浏览器设计的一个meta标签； 有些屏幕很小有智能手机，但分辩率却可以做得很大，比如小米４的默认分辨率为：1920*1080，比许多电脑桌面的都还大，传统桌面网站直接放到手机上阅读时，界面就会显得非常小，阅读体验就很差，就样就需要一种将原始视图在手机上放大的机制，使用vie
阅读全文
摘要：背景 前端开发中，特别是移动端，Javascript代码压缩已经成为上线必备条件。 如今主流的Js代码压缩工具主要有： 1）Uglify http://lisperator.net/uglifyjs/ 2）YUI Compressor http://developer.yahoo.com/yui/c
阅读全文
摘要：ECharts图形组件在1.0发布的时候我就已经有所关注，今天在做项目的时候遇到了图标的需求，在HT for Web上也有图形组件的功能，但是在尝试了下具体实现后，发现HT for Web的图形组件是以矢量的格式来呈现的，在展现上可以有很多的自定义和数据绑定等特性，但是其在交互的设计上就显得比较弱势
阅读全文
摘要：试了试用Ionic框架打造了两个应用，然后在Google Play上架了。 程序语言答人 教你设计物联网 更有意思的是这是在一周的业余时间内完成的三个应用中的两个，接着让我们看看这个框架如何实现高效地开发。 Ionic 框架 Ionic是一个新的、可以使用HTML5构建混合移动应用的用户界面框架，它
阅读全文
摘要：起因 最近浏览36kr 的网页的时候偶然发现一个有趣的情况：当浏览器Tab 处于非当前页的时候，36kr 的标题栏会自动换成可爱的大白字符形象。Jeff 在第一次看到的时候就知道这种效果是通过HTML5 的Page Visibility API 实现的（不是吹牛）。 直到现在我还没去查看36kr 的
阅读全文
摘要：搜索引擎是个好东西，GIS也是个好东西。当前还有Django和Ionic。最后效果图 构架设计 对我们的需求进行简要的思考后，设计出了下面的一些简单的架构。 GIS架构说明 —— 服务端 简单说明: 用户在前台或者后台创建数据。 在model保存数据的时候，会调用Google的API解析GPS 在h
阅读全文
摘要：HT for Web的HTML5树组件有延迟加载的功能，这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用，需要获取数据的时候再向服务器发起请求，这样可减轻服务器压力，同时也减少了浏览器的等待时间，让页面的加载更加流畅，增强用户体验。 进入正题，今天用来做演示的Demo是，客户端请求服务
阅读全文
摘要：1，根节点(html,body)overflow属性会遮盖fixed定位元素 2，fixed元素点击时会弹出底部的菜单，应该是浏览器特性(safari) 3，fixed元素使用后，在body里面使用padding-bottom以占位，如果放入其他元素中，最好也占位，避免IOS滑动特性遮盖元素 4，i
阅读全文
摘要：原文 The Spy in the Sandbox – Practical Cache Attacks in Javascript 相关论文可在 https://github.com/wyvernnot/cache_attack_in_javascript 下载 作者和单位 Yossef Oren
阅读全文
摘要：最近写博客需要插入一些截图，想着用DataURL会方便点，于是需要一个把图片转成DataURL的工具。搜索一番后发现这个功能用HTML就能实现，通过paste事件。 先尝试在Chrome上实现，Chrome版本 43.0 html<!DOCTYPE html> <html> <head></head
阅读全文
摘要：globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。 源图像 = 您打算放置到画布上的绘图。 目标图像 = 您已经放置在画布上的绘图。 可以设置的属性值 效果 1、source-over 2、source-atop 3、source-i
阅读全文
摘要：很多可视化编辑器都或多或少有一些拖拽功能，比如从一个List列表中拖拽一个节点到拓扑组件上进行建模，并且在拖拽的过程中鼠标位置下会附带一个被拖拽节点的缩略图，那么今天我们就来实现这样的拖拽效果。 首先我们需要创建一个ListView列表，在列表中加入图片信息，让ListView列表不那么单调，先来看
阅读全文
摘要：最近公司要做一个html5上传的jquery插件，要在下先实现功能，要求显示上传进度，文件信息，断点续传等等。我一看，艾玛！Σ(ﾟдﾟlll)，没做过啊。没办法，(# ﾟДﾟ)，只能去查资料了。作为一名还未毕业的大学僧，本人表示亚历山大。不过还好是做出来了，不敢说代码写得很好，大家将就着看吧。感谢以
阅读全文
摘要：2015-10-16更新。 简介 移动屏幕适配是一个比较令人头疼的问题，这是我写的一个通过动态设置viewport的移动屏幕适配的工具函数，包括定宽和rem两种适配方法，目前在我自己的项目中用起来还不错，后续也会优化调整，github地址这里。 说明 页面事先添加meta标签 <meta name=
阅读全文
摘要：七月份的下半个月，有幸做了奔驰 Smart 2015年新官网，包括手机端和PC端的宣传页，地址： PC端 手机端 这里，为了证明这个是一个事实，我还特意的留存了两张截图： 这里只想说明这么几个问题： 这东西确实是我做了，而且是那种创意95天，开发两天，三天测试，100天的时候就要上线的； 奥美负责创
阅读全文
摘要：在HTML5中，DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间，通过改时间可以获取设备的运动状态、加速度等数据（另还有deviceOrientation事件提供了设备角度、朝向等信息）。而通过DeviceMotion对设备运动状态的判断，则可以帮
阅读全文
摘要：流动效果在3D领域有着广泛的应用场景，如上图中医学领域可通过3D的流动直观的观察人体血液的流动，燃气领域可用于监控管道内流动的液体或气体的流向、流速和温度等指标。 http://www.hightopo.com/guide/guide/core/lighting/examples/example_f
阅读全文
摘要：准备工作 想要将canvas元素当前显示的内容生成为图像文件，我们首先要获取canvas中的数据,在HTML5 <canvas>元素的标准中提供了toDataURL()的方法可以将canvas中的内容生成为指定格式的DataURL,使用方法如下: // 假设有一个id为cvs的canvas元素 va
阅读全文
摘要：之前接到的一个项目，需求是这样： 平台：移动端HTML5，全部前端完成 实现功能：答题闯关，答对一道题进入下一道，题目随机从题库中选取。 规则：累计答对9道题则闯关成功，但是累计答错4道题则闯关失败，游戏终止。 解析该如何取题： 假如题库中有50道题，再取题的时候是不用没答完一道题，随机取下一道题的
阅读全文
摘要：遇到的一些坑 问题：手机端 click 事件会有大约 300ms 的延迟 原因：手机端事件 touchstart --\> touchmove --> touchend or touchcancel --> click，因为在touch事件触发之后，浏览器要判断用户是否会做出双击屏幕的操作，所以会等
阅读全文
摘要：移动互联网的快速发展，尤其是4G时代已经来临，加上微软在Windows 10中搭载了新的浏览器Edge取代了IE的地位，所以现在很多网站都开始抛弃IE朝着HTML5发展，PC端在不同浏览器之间的兼容性问题越来越少，在移动终端上用的甚是广泛，HTML5已成为浏览器标记语言的霸主，这是大势所趋。随着Ad
阅读全文
摘要：flex 是个非常好用的属性，如果说有什么可以完全代替 float 和 position ，那么肯定是非它莫属了（虽然现在还有很多不支持 flex 的浏览器）。然而国内很多浏览器对 flex 的支持都不是很好，这里针对微信内置浏览器写了一套兼容写法。下面入正题。 首先还是从两个版本的语法开始讲吧，这
阅读全文
摘要：在HTML中，在文件上传的过程中，很多情况都是没有任何的提示，这在体验上很不好，用户都不知道到时有没有在上传、上传成功了没有，所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件上传进度条，矢量在《矢量Chart图表嵌入HTML5网络拓扑图的应用》一文中已经讲述了关于setCo
阅读全文
摘要：很多时候我意识到前端已近变成写h5宣传页面 我不知道是可悲 还是生活的必然 小问题 使用css animation和js animation api制作动画是目前比较流行的做法 但是最后很多人的代码就变成这样 <div class="element-box" element-anim="" styl
阅读全文
摘要：惯例，先贴传送门：https://github.com/think2011/localResizeIMG 首先说到，为嘛要压缩图片，这需求一般出现在需要上传照片（尤其是移动端）的情况下，现在手机拍出来的照片随随便便就是好几兆，无论3/4G还WIFI要上传都很吃力，而且实际上也用不着这么大呀，一般压缩
阅读全文
摘要：以往的一个form表单，结构比较死板，所有的form元素都必须处在<form>和</form>之间才有效，这会造成一些麻烦，比如说：像bootstrap这种使用<div>来控制布局的框架，<form>放在哪都很尴尬；另外，目前的web 2.0，UI比较丰富，为了布局或其它的原因，表单元素之间可能充斥
阅读全文
摘要：这里向大家推荐两个网站：caniuse.com以及html5test.com，大家在使用新技术前，可以在这两个网站上看看浏览器的支持情况，看看自己能不能接受，同时也考虑一下能不能优雅降级。 caniuse.com 域名可以用can i use（我能使用……吗？）来记忆。这个网站提供了两种方式给用户提
阅读全文
摘要：今天看了离线缓存(manifest)方面的资料，兴冲冲地就想给自己的网站用上。待我把代码都写好部署上服务器，并测试过OK的时候，在SegmentFault刷了一把manifest方面的问答，才发现这个大坑：manifest除了缓存manifest.appcache文件所指定的资源外，还必定会缓存当前
阅读全文
摘要：腾讯 Bugly 特约作者：贺辉超 1. H5 缓存机制介绍 H5，即 HTML5，是新一代的 HTML 标准，加入很多新的特性。离线存储（也可称为缓存机制）是其中一个非常重要的特性。H5 引入的离线存储，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。 H5 应用程序缓存为应用带
阅读全文
摘要：预览 官方网站示例、 项目 github 地址 使用 引入 placeholder.js 到你的前段代码中: <script src="placeholder.js"></script> 1. 调用 placeholder.js 的方法进行替换，举个例子如下: <img src="image_ori
阅读全文
摘要：本文分两章节，分别讲解如何使用js2image这个库生成可以运行的圣诞树代码 和 js2image的原理。 github地址：https://github.com/xinyu198736/js2image ps:求star 在线转换地址：http://f2e.souche.com/cheniu/js
阅读全文
摘要：前言 优秀的前端工程师戴着脚铐跳舞，究竟能把 HTML5 的体验推进到什么程度？ 这些 Web apps 是我们运营云集浏览器的网上应用店一年来，我选出的十佳 Web apps。其中参考了同事们的意见，但也带有强烈的主观倾向，反映了我个人对于一个「Web application」设计、实现与价值的一
阅读全文
摘要：视野和世界 2D绘图中很多人会有一个误区,就是我绘图的区域是一个矩形区域。无论新建一个画布还是创建了一个容器,心里都想象里面有一个矩形区域。其实,在SVG当中,矩形区域只是视野,是我们看到的部分。实际上你能绘制的区域是一个无穷大的世界。 世界是客观地,只要定义了世界的内容,那么内容就是确定的。视野是
阅读全文
摘要：之前发过一篇文章《移动端应该如何动态设置字体大小？》，主要说了移动web端布局的一些解决方法，本文再一次把这个问题提出来，并分别对安卓和IOS设备的屏幕了解做出自己的分享，在进入正文之前最好先了解：物理像素、逻辑像素、DPR和Rem。 那么进入正文，不废话，直接把自己了解到的和一些看法说出来。 首先
阅读全文
摘要：介绍 大家都知道，Javascript是单线程的，所以如果页面中的Javascript有大量计算的话，很容易阻塞页面的动画或者交互响应。HTML5中的Web Worker就使Javascript的多线程编程成为可能。 使用 Web Worker是一段运行在后台的Javascript代码，不会影响页面
阅读全文
摘要：最近关于移动网站开发或APP轻应用的内容越来越多了，，有一些好的方法可以快速开发，但不系统，这里推荐一本书吧。学完后，到是真可以20分钟制作，其实不难，就是要系统学。 PhoneGap的目的是用来快速开发移动跨平台 APP，它基于 HTML 5，支持市面上流行的移动设备，《构建跨平台APP：HTML
阅读全文
摘要：历史状态管理是现代Web应用开发中的一个难点。在现代Web应用中，用户的每次操作不一定会打开一个全新的页面，因此“后退”和“前进”按钮也就失去了作用，导致用户很难在不同状态间切换。 要解决这个问题，首选使用 hashchange事件（第13章曾讨论过）。HTML5通过更新 history对象为管理历
阅读全文
摘要：canvas 画图经常发现他是模糊的。解决这个问题主要从两个方面下手。 改变canvas渲染的像素情况：画1像素的线条看起来模糊不清，好像更宽的样子。 解决方案 var ctx = canvas.getContext('2d'); ctx.translate(0.5, 0.5); 原理：大家都知道屏
阅读全文
摘要：简介 zTree 是一个依靠 jQuery 实现的多功能 “树插件”。 网址：http://www.ztree.me/v3/main.php#_zTreeInfo 上面的网址里有ztree的详细介绍、Demo 演示、API 文档、入门指南 以及下载。 这里不再赘述。 使用说明 1、下载ztree文件
阅读全文
摘要：一个像素里复杂纷扰的世界 文 | 啃先生 Mar.3rd.2016 首发于微信公众号（啃先生） 上一篇发了《【移动适配】移动Web怎么做屏幕适配》，现在继续。 壹 | Fisrt 在CSS的世界里Px是原子操作，我们无法定义边框的宽度是0.5px，最小都是1px。所以有以下结论： 然而，对于精益求精
阅读全文
摘要：复杂纷扰的世界背后，总会有万变不离其宗的简单规则 文 | 啃先生 Mar.08.2016 壹 | First 前面写了两篇移动适配相关的文章： 《移动Web怎么做屏幕适配（一）》重点介绍了怎样利于rem来处理尺寸（width、height、margin、padding等等）相关的适配。 《一个像素的
阅读全文
摘要：函数调用总结 通常构成函数主题的JS代码在定义之时是不会被执行的，只有在调用函数是才会被执行有4种方式可以调用JS函数 函数调用 //定义函数 factorial function factorial(){ if(x <= 1) return 1; return x * factorial(x-1)
阅读全文
摘要：百度开放云 BOS Uploader bce-bos-uploader 是基于 bce-sdk-js 开发的一个 ui 组件，易用性更好。DEMO地址是：http://leeight.github.io/bce-bos-uploader/ 支持的浏览器 http://caniuse.com/#fea
阅读全文
摘要：一、柱形图 1.选择集 d3.select()d3.selectAll() 2.数据绑定 <div>Apple</div> <div>Banana</div> <div>Cat</div> <div>Dog</div> var num = 35; var body = d3.select("body
阅读全文
摘要：函数节流的原理 函数节流，就是对会频繁触发的函数事件做一些限制，让这些函数可以在每隔一定的时间或者每次满足一定的条件下再触发。一般我们会给他起一个名字throttle。也就是节流的意思。一般这样的函数有 resize事件、ontouchmove事件等。 举个简单的例子 <!DOCTYPE html>
阅读全文
摘要：css3 svg爱心点赞酷炫动画特效https://www.mk2048.com/demo/demo_target_desc.php?id=ha1jkaahaacss3基于svg制作爱心按钮点赞，爱心散开旋转动画特效css3原子结构图动画特效点击》css3原子结构图动画特效css3基于transfo
阅读全文
摘要：概述 新课题研究：响应式邮件框架MJML（MJML官网：https://mjml.io/）姐妹篇： EDM响应式邮件框架：Formerly Ink 介绍 MJML是一种标记语言，设计用于轻松实现一个响应式邮件。它的语义语法使得它容易和简单，而其丰富的标准组件库可以减少你开发时间，并减轻您的邮件代码库
阅读全文
摘要：原文：http://www.bkjia.com/Javascri... 样式选择器权重优先级： important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 important的权重为1,0,0,0 ID的权重为0,1,0,0 类的权重为0,
阅读全文
摘要：APICloud自成立之初，一直秉承着开源一切的初心，为了给予广大开发者们更多的资源及内容。不知不觉，2年时间已过，APICloud的github上已经集合了APICloud模块、前端框架及文档、云API SDK、开发工具和应用模板5大类共50项开源项目，而广大开发者基于APICloud平台的开源项
阅读全文
摘要：tooltips 纯css工具提示 bubbles-tooltips 查看效果 演示 安装 npm install tooltips --save 使用 在 gulp 中使用 gulp var gulp = require('gulp'); var gutil = require('gulp-uti
阅读全文
摘要：Content Security Policy减少劫持 什么是CSP？ CSP是由单词 Content Security Policy 的首单词组成，是HTML5带给我们的一套全新主动防御的体系，旨在减少(注意这里是减少而不是消灭)跨站脚本攻击。CSP是一种由开发者定义的安全性政策性申明，通过CSP
阅读全文
摘要：一、普通手机页的设置1.<meta name="viewport" content=""/>说明：屏幕的缩放 content的几个属性： width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值，大部分的安卓手机不支持
阅读全文
摘要：由于众所周知的原因，国内使用google font库有很大的问题。 解决方案1：使用国内镜像如360网站卫士常用前端公共库CDN服务 优点：使用方便 缺点：目标用户包含国外的开发者，不清楚国外用户的加载速度 解决方案2：提供另外一种解决方案，可以自主决定资源下载源，自主配置cdn等服务。 在goog
阅读全文
摘要：官网地址：http://jrainlau.github.io/elf/项目地址：https://github.com/jrainlau/elf 介绍 取名为“精灵”的elf，是一个干净，轻巧的响应式CSS框架。她基于flexbox，旨在快速搭建能够适配不同尺寸设备的响应式布局。 使用 安装 npm
阅读全文
摘要：使用H5 canvas绘制的可交互扇形 requestAnimationFrame() 现有动画实现方式的不足 setTimeout和setInterval都不十分精确。为它们传入的第二个参数，实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务，那动
阅读全文
摘要：前言 图片裁剪上传，不仅是一个很贴合用户体验的功能，还能够统一特定图片尺寸，优化网站排版，一箭双雕。 需求就是那么简单，在浏览器里裁剪图片并上传到服务器。 我第一个想到的方法就是，将图片和裁剪参数（x，y，scale，rotate）一并上传给服务器，服务器来做图片处理，so easy。但是，这并不符
阅读全文
摘要：英文原文(需FQ)：https://code.facebook.com/posts/1189117404435352/ 早些时候，我们介绍过iOS版的React Native. React Native带来的是用web方式的React - 自声明式的UI组件和快速的开发迭代来完成手机平台的功能，然后
阅读全文
摘要：简约响应式的手机微网站模板https://www.mk2048.com/demo/demo_target_desc.php?id=hai110j12j响应式移动端通用模板,有两个主页。许多其他页面,购物,组合,博客等,现代设计布局很容易使用。这个模板很容易编辑,带来干净的设计,现代设计,以及许多其他
阅读全文
摘要：序言 为了让用户有更加良好的体验，在操作成功或者失败后，来个提示并跳转页面，我就在Yii2上实现了这一个效果。在写这个跳转提示页的时候，找资料我发现网上关于这方面的中文资料真的很少，大家也都共享下吧！ 需求分析 1、用户在操作成功或者失败后，来个提示并跳转页面。2、使用这种方式$this->succ
阅读全文
摘要：为了监控移动端视频播放的情况，研究了一下 html5 <video> 标签的属性与事件触发，及其在各系统和各个浏览器的兼容情况 属性与事件 理解清楚属性和事件，才能更好的使用 video ，达到预期的效果，更好的检测视频播放的状况来做出分析和调整，这里仅列举了解到且大致理解的，更多相关后续补充 属性
阅读全文
摘要：【0x00】刚开了专栏，没事过来投投稿混眼熟啦~//才不是为了抱枕呢刚刚结束了黑客马拉松，回来也是缓了好久才缓过来。这么高强度的脑洞劳动···阿不，是脑力劳动的说。真的第一次。说起来，跟代码相识，还是源于一个带我入坑的大神@skywalker_z ,真·人生赢家。的确，他带着我走进了这么一条不归路。
阅读全文
摘要：Web存储之LocalStorage初探 HTML5的发布和定稿为前端界带来巨大的变化，新增的API和特性给业务带来了更多可能性，让用户体验拥有了更可能的丰富。 · HTML Geolocation 可以定位到用户的地理位置· HTML Drag and Drop 拖拽API，可以实现更简单有效的交
阅读全文
摘要：-webkit-box 的用法 通常，在移动端要实现水平方向平分宽度的布局，会使用 -webkit-box 来布局。它的使用方法是： <div class='parent'> <div class='child'></div> <div class='child'></div> <div class
阅读全文
摘要：Mac 安装WordPress 一、环境要求 PHP 5.2.4或更新版本 MySQL 5.0或更新版本 WebServer(可以选择Apache、nginx等支持PHP的，这里我选择Apache) 二、软件安装 1、安装PHP Mac OSX 自带PHP，无需安装。 不建议通过brew、源码安装等
阅读全文
摘要：先来看一段代码： var dom = document.querySelector('body'); for(var i in dom){ console.log(i,dom[i]) } 可以看到很多，来整理一下，总共有三大类（我自己分的，没有科学依据） 除了一些私有属性、方法（比如a的私有属性hr
阅读全文
摘要：先来介绍下 media，确切的说应该是 CSS media queries（CSS 媒体查询），媒体查询包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3 加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。 那么该怎么定义 media 呢
阅读全文
摘要：本文转载自：众成翻译译者：文蔺链接：http://www.zcfy.cc/article/660原文：http://www.html5rocks.com/en/tutorials/offline/storage/ 介绍 本文是关于客户端存储（client-side storage）的。这是一个通用术
阅读全文
摘要：如果你想建立一个自己的网站，你可以从网上搜到许多的教程：比如 wordpress gitpages 等等。 如果你想了解这个框架是怎么工作的，你可以了解以下下面的三个基本概念： 服务器， 数据库， 前端工程（即以前页面制作的升级版） 服务器 首先，我先简单的介绍一下服务器。服务器，顾名思义，是提供服
阅读全文
摘要：前段时间遇到一个小需求：要求在分享出来的h5页面中，有一个立即打开的按钮，如果本地安装了我们的app，那么点击就直接唤起本地app，如果没有安装，则跳转到下载。 因为从来没有做过这个需求，因此这注定是一个苦逼的调研过程。 我们最开始就面临2个问题：一是如何唤起本地app，二是如何判断浏览器是否安装了
阅读全文
摘要：DOCTYPE的作用以及常见的DOCTYPE类型 <!DOCTYPE>声明位于文档中的最前面的位置,处于 <html> 标签之前,用来告知浏览器页面目前的文件是用哪种版本的HTML(或XML)撰写。 常见类型 HTML 5<!DOCTYPE html> HTML 4.01三种文档类型:Strict、
阅读全文
摘要：最近在山寨一款网页微信的产品，对于div用contenteditable属性做的编辑框有不少心得，希望可以帮到入坑的同学。 废话不多说了，我们先来理解一下HTML的光标对象是如何工作的，后面我会贴完整的DEMO代码，不用急，先去理解，才能做出更加好的输入体验。 在HTML里面，光标是一个对象，光标对
阅读全文
摘要：本文是【WeX5的正确打开方式】系列的第6篇文章，简单介绍一下WeX5中数据组件的特性和结构形式。 数据组件的由来 上一篇 WeX5绑定机制我们实现了一个简单的记账本应用，当时所有数据都用 JSON 对象写在 js 代码里面，然后通过绑定机制将数据和UI界面 绑定起来。我们是这样写的： 1 var
阅读全文
摘要：本系列文章对应游戏代码已开源 Sinuous game 上一节介绍了canvas的基础用法，了解了游戏开发所要用到的API。这篇文章开始，我将介绍怎么运用这些API来完成各种各样的游戏效果。这个过程更重要的是参透一些游戏开发的思路和想法，而不是仅仅知道怎么写代码来完成这个游戏。 先用一张图来了解一下
阅读全文
摘要：DEMO访问地址： https://bupt-hjm.github.io/BoomGo/博客地址： http://bupt-hjm.github.io/2016/07/10/boom/插件及使用方法地址： https://github.com/BUPT-HJM/BoomGo动画： 1.参考JQuer
阅读全文
摘要：今天和大家分享的是 3D 系列之 3D 预定义模型。 HT for Web 提供了多种基础类型供用户建模使用，不同于传统的 3D 建模方式，HT 的建模核心都是基于 API 的接口方式，通过 HT 预定义的图元类型和参数接口，进行设置达到三维模型的构建。接下来我们就来谈谈预定义的 3D 模型及参数设
阅读全文
摘要：本系列文章对应游戏代码已开源 Sinuous game。 每个游戏都会包含场景和角色。要实现一个游戏角色，就要清楚角色在场景中的位置，以及它的运动规律，并能通过数学表达式表现出来。 场景坐标 canvas 2d的场景坐标系采用平面笛卡尔坐标系统，左上角为原点(0,0)，向右为x轴正方向，向下为y轴正
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>书页效果</title> </head> <style> .book { position: relative; width: 200px; height: 2
阅读全文
摘要：随着微信支付的普及，越来越的APP要求支持微信支付。相信大多数开发者也碰到了这样的需求。百度了一下，大家用到最多的是微信支付中个人对商户的支付业务，而很少有人用到微信中商户对个人付款的业务。我最近就碰到了这样的需求，因为从来没有做过，所以只能查资料，可是百度到的资料很少，并且是过时的东西。又问了圈子
阅读全文
摘要：在 Phoenix 项目中遇到关于 Branch 这个 HTML5 构建工具的问题, 在这里为了剥离问题的复杂度, 独立创建一个 Branch 前端项目来探索如何使用 Brunch 这个全新的前端构建工具. Brunch 是一个HTML5的构建工具, 对于前端开发, 它能够帮助你设置和维护高效的工作
阅读全文
摘要：我们上一篇《基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（一）》主要讲解了如何搭建一个实时数据通讯服务器，客户端与服务端是如何通讯的，相信通过上一篇的讲解，再配合上数据库的数据储存，我们就可以实现一个简易版的 Web 聊天工具了，有空的朋友可以自己尝试下实现，那么我们今天
阅读全文
摘要：移动端预览压缩上传图片 推荐一个使用成熟的解决方案：https://github.com/think2011/... 文章已同步我的github笔记https://github.com/ymblog/blog，欢迎大家加star~~ 原理介绍 移动端图片上传，通过FileReader生成base64
阅读全文
摘要：当我们的用户进行系统登录时，用户名和密码的验证都是后端验证的。而且，用户登录状态也是要后端设置的，查询数据库后，用户名和密码正确，则在session中存储一个uuid，每个页面需要根据登录状态判断展示相应的内容时，则判断是否有uuid这个session，且uuid不为空。比如头部的登录按钮，在未登录
阅读全文
摘要：前言 公司的产品同学看到朋友圈疯传的这张图后。一拍脑袋，决定做个H5版本的来推广一波。 需求如下： 文字变成可以点击的，而且还要能够变色（闪瞎有木有） 中间的姓名换成用户的微信头像 点击button后，将canvas的操作结果保存成图片，来现微信长按保存到本地的功能。 难点总结： 页面元素canva
阅读全文
摘要：前言 日前，taobao造物节H5放肆地火了一把。相信接下来将3d嵌入网站的这种营销方式会被越来越多的人留意到。工作之余体验了若干个3d H5页面，感觉这类的H5互动体验性明显要比普通的要强，把二维的物体转化成三维，能给人一种置身其中的感觉。所以，一个好的idea加上低成本的技术实现——将3d融入H
阅读全文
摘要：“你的问题主要是读书不多而想得太多” 我就是这种不读书、没干货，遇到问题缺少实践的人~十分羡慕那些会写博客的人，就我来说，写一遍文章简直要比女人生孩子还要难受，半天憋不出一个字~哎，无奈肚子里没有墨水。罢了，直接入主题。 最近为了体验移动端开发做个了在线播放器，其实就是加了个媒体查询~，这是demo
阅读全文
摘要：信息窗口 简介 InfoWindow 在地图上方给定位置的弹出窗口中显示内容（通常为文本或图像）。信息窗口具有一个内容区域和一个锥形柄。柄顶部与地图上的某指定位置相连。 通常，您会将信息窗口附加到标记，但您也可以将信息窗口附加到特定纬度/经度，如下面的“添加信息窗口”部分所述。 添加信息窗口 Inf
阅读全文
摘要：写在前面 红旗不倒，誓把JavaScript进行到底！今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理（React + Node），花了一些时间，希望对你有所帮助。 前端实现 遵循React 组件化的思想，我把图片上传做成了一个独立的组件（没有其他依赖），直接import即可。 i
阅读全文
摘要：本文来自于腾讯bugly开发者社区，非经作者同意，请勿转载，原文地址：http://dev.qq.com/topic/57a42... Dev Club 是一个交流移动开发技术，结交朋友，扩展人脉的社群，成员都是经过审核的移动开发工程师。每周都会举行嘉宾分享，话题讨论等活动。 本期，我们邀请了腾讯S
阅读全文
摘要：前端安全一直是一个蛮严苛的问题，特别如果设计到money更是如此。了解前端安全，在平时的coding中主动考虑，防范于未然，是一个有追求的程序猿应该做的。 未登录 我们从弱弱的基本开始，第一步当然是登录鉴权了，如果一个需要用户身份鉴权的应用系统没有登录过滤那简直是没法想像的，方案基本都是用户输入用户
阅读全文
摘要：前言 Node妹子的问世，着实让我们前端攻城狮兴奋了一把，尤其本屌听说Javascript可以写服务端后，兴奋的像是看到了二次元萝莉的胖子...(●'◡'●)。呃哼...YY先到这里，原谅本屌是个二次元萝莉控。 正文 想谈好对象，并不是要new一个就行了，必须要先认识人家后慢慢的才可以上手，然后慢慢
阅读全文
摘要：写在前面 bootstrap 的模板非常多，Envato 上有着各种各样的免费及付费模板。Metronic 是我最喜欢的模板之一（看一眼就喜欢上的那种），当前售价 $28 ，觉得赞的，不妨支持一下作者。觉得贵的，想必不用我说，你也会找到途径。:b 目录结构 拿到 Metronic 后，可以看一下他的
阅读全文
摘要：背景 在输入方式上，人们总是在追寻一种更高效，门槛更低的方式，来降低用户使用产品的学习成本。语音输入也是一种尝试较多的方式，有些直接使用语音（如微信语音聊天），有些需要将语音转化为文字（语音识别）。接下来的内容是一次在pc浏览器上进行语音识别输入的一种尝试。 ### 实现 调研阶段，chrome是支
阅读全文
摘要：最近在开发一个长图文预览项目，主要用在手机端浏览（主要在微信端）。这项目其实就是一个手机网页，把数据中的文本和图片等元素渲染出来即可。这样的项目很常见，包括微信内公众号的文章etc.这个项目很简单，但非常头疼的一个问题是对图片的懒加载处理。（下面讨论的加载策略暂且都是针对图片） 前置条件：假定项目数
阅读全文
摘要：需求描述 进行复杂项目开发时，服务端(数据接口实现端)会把接口拆分的比较细粒度，以方便在更多地方复用。而拆分后的接口在前端进行组合请求时，通常会出现一个区块要请求5、6个接口甚至更多接口请求才能拿到想要的数据，过多的数据请求会导致区块渲染较慢，移动端表现尤为明显。为了改善这种情况，也有在服务端再开发
阅读全文
摘要：在实际开发中往往会遇到检查表单数据的合法性，如果数据不合法，就不让其提交。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 提交表单验证</title> <link rel="stylesheet"
阅读全文
摘要：元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如<div>和<span>就不同，而<strong>和<p>也不一样。在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一
阅读全文
摘要：背景 前一阵子，闲下来便开始着手做一个一直想做的东西--resume。经过几天业余时间的折腾，终于做出了一番模样。Github项目地址：https://github.com/eternityspring/eternityspring.github.io 需求来源 通常在各个招聘网站，我们填写完一些信
阅读全文
摘要：本文系原创，欢迎转载，转载请注明作者信息项目地址：SphinxJS在线体验地址：https://jrainlau.github.io/sp... 说起前端缓存，大部分人想到的无非是几个常规的方案，比如cookie，localStorage，sessionStorage，或者加上indexedDB和w
阅读全文
摘要：体验地址：https://jrainlau.github.io/sp...项目地址：https://github.com/jrainlau/s... SphinxJS 一个能够把字符串编码成png图片，或者从png图片中解码出字符串的超轻量级开源库，总代码数甚至不超过100行！ 使用方法 通过npm
阅读全文
摘要：从html5打开本地的app--如果本地没有app就跳转到下载页面，大家都会认为这是一项很简单的操作。网上的教程也很多，但是可行性都不高。因为手机系统和浏览器型号各不相同，所以兼容性会是让各个前端工程师头疼的问题。我们不妨看一下京东是如何解决的。京东的原代码已经混淆过了，我只能一点点反混淆并注释。
阅读全文
摘要：实例 一：已知日期格式为 "YYYY/MM/DD"，计算相对于今天的天数差。 function fromNow(date){ var mTimes = new Date(date); var fromTimes = Date.now() - mTimes.valueOf(); return Math
阅读全文
摘要：在第一节的“渠道质量四步侦查，让异常流量无处遁形”课程中我们从激活率、留存率、转化周期，横向对比，对渠道质量进行四部侦查，从而选择出了更优质的渠道进行广告投放。但你是否有困惑：我明明已经辨别出优质渠道，投放后却依旧不能达到预期效果？那么在推广期间如何进行精细化运用，让用户购买的流量发挥最大价值？下面
阅读全文
摘要：html5 video视频播放器插件https://www.mk2048.com/demo/demo_target_desc.php?id=haab1akj0jhtml5基于video属性制作精美大气的视频播放器代码，该视频播放器内置有三种皮肤，并且允许你修改控制按钮的颜色，遮罩层透明度和视频封面等
阅读全文
摘要：wechat-weapp-resource 微信应用号（小程序）资源汇总。 每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 目录 开源项目（1010更新） 微信官方资料（0924更新） 工具文档（0924更新） 资料（0924更新） 教程（1010更新）
阅读全文
摘要：《每周一点canvas动画》——差分函数的妙用 每周一点canvas动画代码文件 好像上次更新还是十一前，这唰唰唰的就过去大半个月了，现在才更新实在不好意思。这次我们不涉及canvas 3D的内容，主要分享一个比较炫的动画效果，可以算是上一篇文章《每周一点canvas动画》——3D点线与水波动画的加
阅读全文
摘要：# 开启gzip gzip on; # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩 gzip_min_length 1k; # gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明 gzip_comp_level 2; # 进行压缩的文件类型。javas
阅读全文
摘要：「小程序」这个划时代的产品发布快一周了，互联网技术人都在摩拳擦掌，跃跃欲试。可是小程序目前还在内测，首批只发放了 200 个内测资格（泪流满面）。本以为没有 AppID 这个月就与小程序无缘了，庆幸的是微信这两天发布了正式版开发者工具，无需内测邀请也可以尝鲜了。 因此也就有了我与「小程序」的初体验，
阅读全文
摘要：前言 做移动端h5开发很久了，从开始入行到现在。很多知识和工具都是在用前辈留下的遗产，都没有深入的研究过原因，了解为什么要这么去做。 也许自己也是过了交给自己做什么就做什么的阶段了。在国庆节有一个大块的时间，把最近看到的知识总结一下，也算是对这方面的知识划上一个句号。想想着实把国庆节过成了劳动节，没
阅读全文
摘要：来一个简单粗暴的gif演示图 先来html 内容 <video id="video" width="320" height="240" autoplay></video> <button id="snap">拍张照片呗</button> <canvas id="canvas" width="320"
阅读全文
摘要：1.POST数据出现4开头错误,这些都是客户端错误 415：Unsupported Media Type 对于当前请求的方法和所请求的资源，请求中提交的实体并不是服务器中所支持的格式，因此请求被拒绝。 解决： $$.ajax({ contentType: 'application/json;char
阅读全文
摘要：前言 HTML5的权限越来越大了，浏览器可以直接调用摄像头、麦克风了，好激动啊。我们要用纯洁的HTML代码造出自己的天地。 视频采集 本篇介绍的栗子 都是在chrome 47 版本以上的，低版本的可能会出现白屏和错误。 1.安全环境 随着Chrome版本的升高，安全性问题也越来越被重视，较新版本的C
阅读全文
摘要：开始 上半年小米Max发布的时候，做了一个在朋友圈传播的模仿微信的群聊界面H5页面：一群公司的大咖在群里聊小米Max，用户可以向大咖们提问，以此了解产品。 页面的主体是群聊对话，同时在对话中包含了很多交互：图片、视频、动画、翻译等。如果用户是用微信打开的链接，还会获取用户名和头像，作为页面里的“我”
阅读全文
摘要：关于切图的相关建议 一. H5 标签组局部滑动的问题 在每次大促的时候在h5页面我们都会使用局部滑动的方式来展现各个目的地下. 所以做好h5局部的滑动至关重要(嘿嘿). 给你个链接看看吧(不经常用不太熟练,请见谅)http://runjs.cn/detail/tyoduhut 二. 在css文件中不
阅读全文
摘要：1. 前端 1.1 工具 1.1.1 构建工具 webpack 1.1.2 编译工具 babel browserify ... 1.1.3 包管理工具 npm 1.2 前端类库和框架 1.2.1 类库 jquery zepto react redux 1.2.2 mvc框架 angular1.0 a
阅读全文
摘要：官方一共提供了13个示例，这些示例运行的方式大同小异，一般会提供JAVA、Browser JavaScript、Node.js三种版本，这里仅演示java版本的示例。这些示例要求系统内已经正确安装了KMS6.0服务器，并在运行前启用服务。获取示例代码需要用到Git ，可以通过以下命令安装 sudo
阅读全文
摘要：爱旅游app官网模板点击》爱旅游app官网模板手机爱旅游首页模板，在线旅游商城app手机模板。二手车汽车详情介绍页面手机模板https://www.mk2048.com/demo/demo_target_desc.php?id=kcajkhc1j买卖二手车app汽车详情页面模板，手机二手车预订页面模
阅读全文
摘要：Group Call 本示例展示了一个视频聊天室的功能，不同的聊天室之间互相隔离。 官网文档 Group Call 首先从github上获取代码（如果已经获取可以跳过，获取的代码已经包括后面的示例代码了） git clone https://github.com/Kurento/kurento-tu
阅读全文
摘要：Show DataChannel 本示例允许用户在文本框中输入任意文字，输入的文字将以字幕的形式显示在传回的视频中。 官网文档 [Show DataChannel[1] 首先从github上获取代码（如果已经获取可以跳过，获取的代码已经包括后面的示例代码了） git clone https://gi
阅读全文
摘要：虽然微信小程序还处于内测阶段，但得益于各种开发者、行业人士的广泛讨论，对微信小程序有深入了解的开发者已经初具规模。微信小程序的出现体现了微信的创新思维，也继承了微信严密的内容管理风格，稍有不慎，就可能触碰到微信的底线。 对于开发者来说，如何才能在开发中避免违反微信的规则，顺利上线小程序？这份解读将可
阅读全文
摘要：来，干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库：iconoo，所以，开门见山，star吧少年少妇们！（这样的我是不是应该要加个github互粉的团伙了？） 主题说完了，下面进入正题。 在web开发中，我们经常要用到一些小图标（加减勾叉等）。通常做法就两种： 直接使用图片； 使用cs
阅读全文
摘要：这是一个很简单的方案。嗯，是真的。 为什么要这么做？ 在移动Web蓬勃发展的今天，有太多太多的应用需要让用户在移动Web上传图片文件了，正因如此，我们有些困难必须去攻克： 低网速下上传进度缓慢，用户体验差 高并发下，后台处理较大的上传文件压力大 或许有更多... 在攻克上面的一些困难时，我们也可以给
阅读全文
摘要：由于第一次写jq插件，中间有借鉴别人的代码。 (function(){ var ms = { fillHtml: function(obj, option) { obj.empty(); var totalPage = option.pageCount, pageHtml = "", dotHtml
阅读全文
摘要：pushbutton 移动端弹出列表选择框 移动端从下往上推动画效果端弹出列表选择框，适应所有主流移动端机型，支持Node引入，require引入;如有用得不爽可以随时提意见，谢谢。 demo地址: https://gtdalp.github.io/widg... github地址:https://
阅读全文
摘要：我的个人简历线上版 背景 在国外已经生活了将近四年，突然间萌生了想辞掉现在工作回国重新找工作的想法。既然是找工作，那么简历自然是少不了的事情。作为一个前端工程师，如果没有一份线上简历，这将是一件很low逼的事情，于是有了现在这份线上简历。 产品 不懂产品的开发不是一个好的开发。在做这份简历之前我站在
阅读全文
摘要：前言 最近公司的项目转向使用Hbuilder开发移动端项目，其中想要通过在顶部标题栏加入弹出菜单的方式，来定位长列表的位置，如图所示。 问题 Mui的功能貌似还不是很完善，在使用这个弹出菜单的时候，发现了一些很尴尬的问题： 目录的跳转我是通过锚点实现的，但是在跳转之前，这个菜单一切正常，一旦触发跳转
阅读全文
摘要：简单介绍iframe标签，所有的浏览器都支持<iframe>标签，iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。通常我们常用的iframe标签的属性有：width（iframe 的宽度）、height（iframe 的高度）、frameborder（显示框架周围的边框）、src（
阅读全文
摘要：微信小程序公测后，开发者非常热情，都有很高的期待，都想抓住这一波红利。但是热情背后需要冷静，我们需要搞清楚两个问题： 微信想要我们做什么？微信小程序可以做什么？ 微信想要我们做什么？ 首先来弄清楚微信的意图。之前张小龙曾公开过对微信应用号的一些看法，再联系到他总结的微信产品观，大概可以总结出如下重点
阅读全文
摘要：为了保护小程序应用安全，微信官方的需求文档要求，每个微信小程序必须事先设置一个通讯域名，并通过HTTPS请求进行网络通信，不满足条件的域名和协议无法请求。因此开发者应先准备好配置好HTTPS证书的域名，还没有配置HTTPS要赶紧升级。 SSL证书的选择 域名要实现HTTPS加密请求，需要安装SSL证
阅读全文
