摘要：
Web的发展日新月异，这也使得Web开发者不得不加快脚步，学习新的技术和编程语言。尤其是对于那些大量流量入口的网站来说，跟上技术发展趋势更是尤为重要。为了使得Web开发人员能够更加专注于业务层面的开发，市场上涌现了各种各样的Web开发工具，灵活运用这些工具就能使得你的开发效率大幅提升，实现事半功倍。 阅读全文
摘要：
JavaScript 可以说是交互之王，它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集，更加丰富界面交互的可操作性。这类 API 的例子包括WebGL API、Canvas API、DOM API，还有一组不太为人所知的 css API。 由于jsX和无数js框架的出现，使通过JS 阅读全文
摘要：
现在做的项目是公司内部全部组要用的 viewer 库. Viewer 需要的功能非常的多，其中的一个就是需要提供一些常用的绘图API功能， 比如用户鼠标移动画箭头，画圈圈，高光选中文本等等。 挑战 目前遇到的挑战就是在 canvas, svg, dom + css 之间如何选择的问题，canvas 阅读全文
摘要：
早期的项目中晓衡遇到游戏终于要完成了，辛苦了一阵满以为可以稍微放松一下了，但策划、运营要求，增加一个他们认为非常“简单”且重要的功能： 新手引导 。 回想起当年，接到这个任务时的感觉是手脚冒汗、天晕地暗、日月无光，游戏代码本来就千疮面孔，逻辑错综复杂，根本不知道该怎么下手？更困难的是，游戏本身功能和 阅读全文
摘要：
提起 css 很多童鞋都很不屑，尤其是看到 RedMonk 2019 Programming Language Rankings 的时候，css 竟然排到了第七位。 我们先来看看这张排行榜： 从上面可以看出，CSS 的地位已经今非昔比了。 本节我们就来说说 CSS 渲染以及优化 相关的内容，主要围绕 阅读全文
摘要：
前言 相信tab切换对于大家来说都不算陌生，后台管理系统中多会用到。如果不知道的话，可以看一下浏览器上方的标签页切换，大概效果就是这样。 1.如何切换 使用动态组件,相信大家都能看懂（部分代码省略） //通过点击就可以实现两个组件来回切换 <button @click="changeView">切换 阅读全文
摘要：
1.css sprite是什么,有什么优缺点 将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。 减少 HTTP 请求数，极大地提高页面加载速度增加图片信息重复度，提高压缩比，减少图片大小 2 display: none; 与 visibi 阅读全文
摘要：
解码 PNG 图片就是把一张图片从二进制数据转成包含像素数据的 ImageData 。 图片的二进制数据可以从 <canvas> ， <img> ，Object URLs，Image URLs， Blob 对象上获取到。参见浏览器图像转换手册。 ImageData 是一个包括了像素数据、图片宽高数据 阅读全文
摘要：
1.Cross Site Script（XSS，跨站脚本攻击） XSS 就是攻击者在 Web 页面中插入恶意脚本，当用户浏览页面时，促使脚本执行，从而达到攻击目的。XSS 的特点就是想尽一切办法在目标网站上执行第三方脚本。 举个例子。原有的网站有个将数据库中的数据显示到页面的上功能，document 阅读全文
摘要：
什么是<!DOCTYPE html>？ 在html文档初，往往会有这么一句话<!DOCTYPE html>，那么它的意义是什么呢？它是html5标准网页声明,全称为Document Type HyperText Mark-up Language，意思为文档种类为超文本标记性语言或超文本链接标示语言， 阅读全文
摘要：
前言 原本只是想简单的聊一下代码格式化的问题，无奈本文拖沓了很久，在此期间，我又思考了很多，我越来越觉得代码格式化是一门艺术。为了衬托“艺术”二字，可能叫“代码美化”更贴切一点，但是本文的深度远没有标题那么宏大。 在我看来，代码质量不仅体现在逻辑上，也要体现在形式上。尤其前端代码，在日渐复杂的单页面 阅读全文
摘要：
实现样式： 1、鼠标移入后，鼠标样式图标变为“锤子”。 2、用户砸金蛋，锤子简单的扬起效果。 3、砸碎金蛋，显示内容。 分析实现步骤： 1、在html中插入一颗金蛋 找一张静态图片或带一点效果的动态图，直接放入img标签即可。 2、鼠标移入，改变鼠标样式图标 系统自带的鼠标样式就那几种，可以通过cs 阅读全文
摘要：
首先，为了避免与微软的 Visual Studio IDE 发生混淆，这里先说明一下，Visual Studio Code（也即 VS Code）是一款轻量级的编辑器，类似 Atom 或 Sublime Text。它的采用量节节攀升，迅速占领了开发者市场！ 2015 年，微软推出了 VS Code 阅读全文
摘要：
今天我们深度了解一下 rem 单位，这个单位目前已经得到了优秀浏览器的支持，并且有一些兼容方案来帮助你在低版本的 IE 浏览器中的使用它。 什么是 rem 可能在你使用收音机或者用其他音乐播放器之前，就已经听过“R.E.M.”这个词了。在这个乐队眼中，这个词是“浅睡眠时眼球的快速转动”的缩写，而在 阅读全文
摘要：
前几天遇到一个页面需求是这样的： 一个评论框，后面的按钮有点赞或者发送评论两种状态，其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。 需求： 没有文字，没有聚焦——点赞没有文字，聚焦——灰色发送有文字——红色发送 如果用js实现，需要监听输入框的change和focus事件，比较麻烦 阅读全文
摘要：
SVG 简介 SVG，即可缩放矢量图形(Scalable Vector Graphics)，是一种 XML 应用，可以以一种简洁、可移植的形式表示图形信息。目前，人们对 SVG 越来越感兴趣。大多数现代浏览器都能显示 SVG 图形，并且大多数矢量绘图软件都能导出 SVG 图形。SVG 主要可以概括为 阅读全文
摘要：
做前端最难受的就是产品给的需求以及测试给的bug了，看待这个标题是不是有点蒙，这是什么需求，下面来解读下！ 需求 需求：如下图，点击已保存按钮弹出已保存列表，当点击屏幕其他区域要关闭这个下拉框，是不是很简单 加点东西，但是点击这个下拉框内部的区域不能关闭下拉框）（原谅我里面没写东西你就当有东西，给个 阅读全文
摘要：
实现一个普通边框 <style> .border { width: 100px; height: 50px; border: 1px solid red; } </style> <div class="border"></div> 实现由四个三角形组成的正方形 <style> .triangle { 阅读全文
摘要：
根据设计稿的实际宽度值,与设计稿最大宽度值,动态计算根字体大小，适应不同的屏幕比例。 本文的px转rem换算公式为: 100px = 1rem 18px = 0.18rem 基础css body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textare 阅读全文
摘要：
在css基础当中，我们往往会遇到块元素和行内元素，块元素和行内元素也是很重要的基础知识。那么块级元素是什么？html中的块级元素有哪些？ 什么是块级元素？ display属性为block的元素为块级元素。通常块级元素在很多浏览器中，都是显示占据一行，并且排斥其他元素和其他元素在同一行，在浏览器中，块 阅读全文