前段时间有个需求就是实现一个动态的环形进度条，作为某业务的入口，这块呢经过一番查阅和思考后最终选择了canvas.
传统方式下，除非使用图片，不然没办法做出这种圆环的动态效果。但进度数据的范围相对而言比较广（整数值状态下为 0%~100% ，约 100 个独立状态），每个状态用图片来做显然是不现实的。可以考虑使用CSS3、Canvas来解决。
下面就来分析下使用以上技术是如何解决环形进度条需求的。
L.Zoe
Quick note
css实现自适应正方形
在处理移动端页面时，我们有时会需要将 banner 图做成与屏幕等宽的正方形以获得最佳的体验效果，那么应该怎么使用纯 CSS 制作出能够自适应大小的正方形呢？
方案一： CSS3 vw 单位
CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vmin, vmax。其中 vw 是相对于视口宽度百分比的单位，1vw = 1% viewport width， vh 是相对于视口高度百分比的单位，1vh = 1% viewport height；vmin 是相对当前视口宽高中 较小 的一个的百分比单位，同理 vmax 是相对当前视口宽高中 较大 的一个的百分比单位。该单位浏览器兼容性如下：
TypeScript获取input的value值
直接获取报错：
1 | let el = document.getElementById("idName"); |
error:TS2339: Property ‘value’ does not exist on type ‘HTMLElement’.
实现左边定宽右边自适应效果
关于在css实现左边定宽右边自适应效果在pc端的布局相对比较常见，小编就这个问题就来一起学习一下可以怎么实现？
html结构
1 | <!-- 前提： 左边定宽，假设为100px --> |
前端代码规范之JavaScript
tag:
缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是yilia根目录）执行以下命令：
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置：
jsonContent:
meta: false
pages: false
posts:
title: true
date: true
path: true
text: false
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: false
tags: true
Lozoe，<br>毕业于大连皇家民族学院，目前就职于驼厂<br><br>热爱大海与冷笑话，<br/>目前是一枚前端<br/><br/>爱生活，爱健身，爱编码<br>年轻无为，卖马为生。