摘要：
1、在不同设备上采用相似的设计 用户可以通过不同类型的设备访问你的网站，这些设备包括：电脑、平板、手机、音乐播放器、甚至是智能手表等。无论用户使用什么设备访问你的网页，确保他们具有类似的体验，这是用户体验设计中的一条重要标准。 2、导航的设计要简单易用、清晰明了 导航设计是网页可用性的基石。记住，如 阅读全文
摘要：
1、localStorage 一个窗口更新localStorage，另一个窗口监听window对象的”storage”事件，来实现通信。注：两个页面要同源（URL的协议、域名和端口相同） // 本窗口的设值代码 localStorage.setItem('aaa', (Math.random()*1 阅读全文
摘要：
有时候，我们需要使页面内容不可选择。首先想到的是一个css属性：user-select。user-select有两个值： none：用户不能选择文本 text：用户可以选择文本 禁用选择代码实现 html: <p>你可以选择我。</p> <p class="noselect">你不能选择我！</p> 阅读全文
摘要：
创建一个没有背景的圆，然后声明透明度为0.1的黑色边框(看起来是灰色)，修改左侧边框颜色。此时会有一个静态的看起来只有左边框有颜色的空心圆。然后声明一个该元素逆时针旋转360度的动画，并让该动画无限播放(infinite)即可。 使用的css3 特性: transform属性的 rotate，共一个 阅读全文
摘要：
Visual Studio Code Visual Studio Code中文版是微软推出的带 GUI 的代码编辑器，软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，新增php语法高亮。 Atom ATOM，是一个现代的文本编辑 阅读全文
摘要：
在使用过一段时间的SVG动画之后，我相当清楚如何利用它来制作动画片段或者网页布局。一些动画库平台，例如Greensock，和原生的css动画简直是绝配。于是我便打算深入地研究一下，看看我能否用这些来制作一款简单的游戏。就像一个精美的工艺品一样，好的游戏拥有许多细致的动画细节。有一天夜里，我的脑海中突 阅读全文
摘要：
这篇文章主要为回答这个问题：“做响应式网页，如何让一个div的高和宽保持比例放大或是缩小？”，这里不介绍媒体查询的实现。 那么css如何实现高度height随宽度width变化保持比例不变呢？即给定可变宽度的元素，它将确保其高度以响应的方式保持成比例(即，其宽度与高度的比率保持恒定)。 下面以高宽 阅读全文
摘要：
在自动化元素定位操作中经常使用智能等待来加强定位的强壮性，主要就是因为WebDriver没有提供页面加载场景的方法；在使用JavaScript知识的突然心生灵感，可以使用JavaScript来配合验证页面加载，结果发现我真是井底之蛙。 一、domcument.readyState 首先定位从Docu 阅读全文
摘要：
最近在开发小程序中，需要用到音频播放功能。但在初始化时，使用InnerAudioContext.duration获取不到音频的时长。 Page({ /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { // 创建一个audio this.innerAu 阅读全文
摘要：
最近在做项目时，有一个需求是批量打印好多个合同，使用AJAX向后台传送数据，等待后台执行后，需要把生成之后的文件地址传送过来。 后台的处理时间比较长，根据合同的多少可能等待时间比较长，会达到10s左右，这个时候如果不加任何的提示，会导致用户因为没有看到是否执行而导致重复的操作，为了增加用户的体验感， 阅读全文
摘要：
css已经越来越强大了 ，可以使用它来绘制各种简单的形状，用于代替图片显示，这次的分享主要用到画圆，扇形，三角形等知识点，由于IE9以上才支持圆角，暂时不考虑兼容问题 css实现圆形 <div class="circle"></div> <style> .circle { border-radius 阅读全文
摘要：
css3里有个很强大的功能，就是计算器，使用它可以很方便对页面中的任意元素进行计数，实现类似于有序列表的功能。与有序列表相比，突出特性在于可以对任意元素计数，同时实现个性化计数。 简而言之，计数器就是采用css给html元素自动生成编号。其本质上是由css维护的变量，其值可以通过css规则递增以跟踪 阅读全文
摘要：
一般默认的滚动条会比较丑，我们可以利用css或者js来实现实现自定义滚动条的功能； 下面就整理2种实现方式 1、css自定义滚动条 需要在WebKit平台上才支持，代码如下： ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track 阅读全文
摘要：
iframe高度自适应内容 需求：实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。 设置iframe 自适应高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的，那么我们可以 阅读全文
摘要：
文字选中效果，这个可能很少有人注意过。在默认状态先一般选中的文本颜色是白字蓝底的，不过可以通过css进行设置。 代码如下： /*文字选中效果*/ *::selection { background-color: palevioletred; color: white; } *::-moz-selec 阅读全文
摘要：
最近有这样一个需求，就是在html页面中有个按钮导出，点击它，将构造一个文档并存储到本地文件系统中。另外还有个按钮，点击它，从本地文件系统中读取一个文件并对内容进行分析。 说白了，就是一件事，就是如何读取或写入本地文件系统中的文件。 这件事情在html5以前是一件非常恐怖的，因为浏览器对本地文件系统 阅读全文
摘要：
在目前的前端开发中，我们经常需要进行响应式的网站开发。提起响应式，大家应该想到三个概念： 弹性布局， 弹性图片， 媒体查询。本文着重介绍一下弹性图片，也就是响应式图片的解决方案。 一、js或服务端 通过js或者服务端来控制图片的加载，原理就是跟踪window的resize事件，然后修改图片的路径，代 阅读全文
摘要：
在前端应用越来复杂的今天，为了监控前端应用是否正常运行，通常会在前端收集一些错误与性能等数据，最终我们会将这些数据上报到服务端。 上报的方式有很多，理论上我们只要能把数据发给服务端就行了。在浏览器中可以发送请求的方式非常多，包括不限于：xhr、fetch、script标签、img标签、link标签、 阅读全文
摘要：
前言 从 Yarn 横空出世推出 lock 文件以来，已经两年多时间了，npm 也在 5.0 版本加入了类似的功能，lock 文件越来越被开发者们接收和认可。本篇文章想从前端视角探讨一下我们为什么需要 lock 文件，以及它的一些成本与风险，当然其中一些观点对于后端也是适用的。 为什么需要 lock 阅读全文
摘要：
对于IE8及以上版本，例如： <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" /> 强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果用分号（；）分隔，对于不同的浏览器版本就有不同的兼容性，例如 <meta 阅读全文