web
文章平均质量分 68
Shaft_
这个作者很懒,什么都没留下…
展开
-
codemirror 快速使用指南
最近在做一个代码验证的前端,要求要对文本框内输入的所有c++代码格式化,要求关键字高亮,和其他一些自定义关键词的高亮,当然我们可以利用正则表达式去检测关键词然后相应改变其样式,但是这样做一是太低效,而是重复造轮子。搜索了一圈以后,发现codemirrow这款插件完美符合我的所有需求,可以自定义参数,下面就介绍一下codemirrow的功能和效果:一、效果图:先上效果图:我们可以看到他已经正...原创 2018-04-03 23:33:42 · 4405 阅读 · 2 评论 -
js中判断一个数据是什么类
由判断一个对象属于哪个类想到的有时候,我们会有这样的需求。判断我们手中的某个数据是属于哪一个类,哪一种数据类型。通常有以下几种方式:1.typeof()var a = “A”; typeof(a) == “string” //truevar b = 1; typeof(b) == “number” //truevar d = []; typeof(d) == “object” ...原创 2018-10-23 20:34:39 · 553 阅读 · 0 评论 -
从margin-top失效看BFC
情景在前端开发过程中,我们通常会遇到这样的问题,我们给一个紧邻父元素的div Box设置一个margin值后,发现该值对内部的div Box 没起作用,反而是作用在了父级元素上。 示例代码: <div class="outBox"> <div class="innerBox"> </原创 2018-08-01 14:15:17 · 682 阅读 · 0 评论 -
js复习笔记-ES6的类(五)
class(ES6构造函数的语法糖):总述: ES5写法: 父类: function Animal(){ this._name = "animal"; } Animal.prototype = { constructor: Animal, get name(){ ret...原创 2018-08-09 10:24:38 · 214 阅读 · 0 评论 -
自定义复选框样式
效果图:由于复选框的样式,现在还没有支持自定义,所以我们只能使用一个伪元素来模拟复选框,并将其与选中状态绑定,用该伪元素来代替复选框绑定。并自定义样式来模拟复选框。1、将lable与checkbox绑定,并绑定伪元素:<input type="checkbox" id="awesome"/><label for="awesome">Awesome<...原创 2018-07-23 00:04:50 · 774 阅读 · 0 评论 -
利用CSS进行图形变化
今天学习了CSS中各种图形不同的绘制方法,利用radial-gradien和linear-gradient可以实现多种缺角造型,利用border-radius可以实现多种不同曲率圆角的组合。我们可以通过调节矩形各个角的曲率半径实现多种类圆造型。同时在图片的裁剪方面我们可以通过clip-path属性来指定图片裁剪路径。为了实现多种造型的阴影,我们需要用到css3中的滤镜filter:drop...原创 2018-07-22 16:31:27 · 1377 阅读 · 0 评论 -
js复习笔记(一)
js语复习笔记(一)js解析代码1. js仅在不加分号无法解析的情况下才自动添加var aa=3console.log(a)将会被解析为:var a;a = 3;console.log(a);2. 不添加“;”可能导致错误var y = x + f(a+b).toString()会被解析为:var y = x + f(a+b...原创 2018-07-25 17:10:30 · 402 阅读 · 0 评论 -
CSS实现多重边框与条纹背景
今天深入了解了一下css中背景与边框的知识。其中linear-gradient(线性渐变)、box-shadow与radial-gradient(径向渐变)在边框,背景的实现上起着不可忽视的作用。下面分点总结,归纳:边框与背景的关系:在如下情景中,我们想要为一个白色背景的图像加上一层白色的边框如下图二: 图一 ...原创 2018-07-22 16:21:10 · 1389 阅读 · 1 评论 -
CSS交互式图片对比组件
通常在我们在需要对某地或者某物不同时期的情况对比时,多采用图片并列或者图片轮播的形式,但是这样的形式并不直接,且缺乏交互性。为了解决这个问题,我们可以采用交互式的图片控件来实现。其主要思想就是将两张前后图重合,用户可以自由选取图片的显示部分,效果如下:为了实现这个效果,我们将使用resize属性,使其可以在横向变形。为了防止图片拉扯变形,我们用一层div将一张图包裹,置于另一张图的上层。这...原创 2018-07-23 21:27:19 · 1147 阅读 · 1 评论 -
CSS自定义滑动列表上部提示阴影
下拉框顶部阴影提示:效果图:DOM结构: <ul class="scrollNote"> <li>not-allowed</li> <li>ew-resize</li> <li>ns-resize</li> <原创 2018-07-23 10:17:19 · 1909 阅读 · 0 评论