晴空闲云
  • 14
    文章
  • 2
    专栏
  • 5232
    访问
  • 1
    粉丝
  • 1
    关注
  • 2
    获赞

晴空闲云 等级

男 | 教师
专注前端,把复杂的编程讲简单,又不失深度。@公众号:晴空闲云
  • 最新发表
  • 最多访问
  • 最多收藏
  • 最多评论
webpack配置typescript详解

随着现在typescript使用越来越多,作为打包工具界的webpack怎么编译typescript呢?下面我把自己的实践记录一下,成功编译了typescript文件,并且引入typescript模块后,也可以成功编译。我们从新建webpack项目开始,在此之前先贴一下环境,经常环境不同会造成不同的状况,这边先贴上的环境:$ node v v14.15.4$

晴空闲云
12
0
0
svg中viewbox图解分析

svg中有一个viewbox属性,中文翻译为视区,就是在svg上截取一小块,放大到整个svg显示。这个属性初学的话有点难以理解,这边做一个简单的示例,一看就明白了。1)先来一个svg,宽高各位300,设置一下边框:html运行效果:这边其实就是一个300300的矩形。2)svg里面画一个矩形:html 运行效果:3)设置svg的viewbox属性:html先

晴空闲云
15
0
0
svg中path贝塞尔曲线和圆弧图文详解

最近研究了一下svg的path标签,功能非常强大,理论上来讲path标签可以画出任意图形。自己记性不太好,记录一下path的使用语法和自己的理解。 path介绍path用d属性来描述路径,语法格式大概如下:html 其中路径描述包含如下命令: M moveto 移动到某点。 L lineto 画一条直线到某点。 H horizontal lineto

晴空闲云
45
0
0
svg用animate实现简单动画效果

svg中可以使用animate标签实现动画效果。就是在相应的形状标签内加入animate标签,其中若干属性如下: attributeName 目标属性名称 from 起始值 to 结束值 dur 持续时间 repeatCount 次数|indefinite,动画时间将发生几次,indefinite表示无限次。一个简单示例效果,颜色在3秒内从steelblue

晴空闲云
49
0
0
svg绘制六种基本形状

svg简介svg 意为可缩放矢量图形(Scalable Vector Graphics),最大的特点就是伸缩不会失真。svg是用xml进行描述的,在前端方面现在应用越来越广泛,各大浏览器支持越来越好了。这边尝试记录一下用svg画各种形状。 svg标签要使用svg,需要先引入svg标签:html其中: width表示图片的宽。 height表示图片的高。 画长

晴空闲云
50
1
0
网页引入svg图片的4种方式

web应用开发使用svg图片,总结了下,可以有如下4种方式: 1. 直接插入页面。 2. img标签引入。 3. css引入。 4. object标签引入。 1. 直接插入页面在html页面,可以直接使用svg标签。html 运行效果: 2. img标签引入除了在网页里直接写svg标签,也可以通过img引入,就像引入j

晴空闲云
29
0
0
css中box-sizing解放盒子实际宽高计算

我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。 盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那

晴空闲云
568
0
0
javascript实践教程-07-分支结构

本节目标1. 掌握js中4种分支结构。 内容摘要本篇介绍了js中的4种分支结构:if、if else、else if、switch case,用来判断在不同的条件下运行不同的代码分支。阅读时间1015分钟。 分支结构js中分支结构总共有4种: if if else else if switch case ifif 用来判断某个条件是否成立,如果成立则执行条

晴空闲云
652
0
0
javascript实践教程-06-运算符

本节目标1. 掌握js语言中各类型运算符的使用。 2. 掌握短路与和短路或的原理。3. 掌握二进制运算符的计算原理。4. 掌握计算机中各进制的转换方式。 内容摘要本篇对js中的运算符进行了详细的梳理,共梳理了8种运算符,允许我骄傲一下,自夸全网前三了。每类运算符都列举了相关的例子进行了说明,顺便带出了一些js奇怪的知识。阅读时间大于3040分钟。 运算符介绍

晴空闲云
674
1
1
javascript实践教程-05-数据类型

本节目标1. 掌握js中7种数据类型。2. 掌握5种基本数据类型number、string、boolean、null、undefined的声明。3. 掌握js中数组的声明和数组相关的方法。4. 掌握js中对象的声明和属性、方法的使用。 内容摘要本篇介绍了js中的7种数据类型,其中5种基本数据类型:number、string、boolean、null、unde

晴空闲云
616
0
0