web前端

奇技淫巧——CSS 实现波浪效果

奇技淫巧——CSS 实现波浪效果

前言 一直以来,使用纯 CSS 实现波浪效果都是十分困难的。 因为实现波浪的曲线需要借助贝塞尔曲线。 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法。 当然,借助其他力量(SVG、CANVAS),是可以很轻松的完…
用 CSS 背景混合模式制作高级效果

用 CSS 背景混合模式制作高级效果

前言 如果「一图胜千言」,那多图混合创造的效果要超过千言万语。同理,CSS 的混合模式为设计带来的可能性远远超出了你的想象。 你所听到的 CSS 混合模式,就是三个被现代浏览器所广泛支持的 CSS 属性。这三个属性包含了: - ba…
CSS3中Flex布局(弹性布局)

CSS3中Flex布局(弹性布局)

Flex布局是什么? Flex是Flexible Box的缩写,就是灵活的弹性页面布局。 作用是为盒子模型提供强大的灵活性功能; 兼容性:也被所有主流浏览器所支持 任何一个容器都可以指定为Flex布局,包括块级元素和行内元素。 块级…
JavaScript深入学习this、call、apply和bind

JavaScript深入学习this、call、apply和bind

前言 this的指向问题一直是面试里的常客。也是es5的众坑之一。对于es6而讲,它极大地避免了this带来的错误。但是为了为了维护一些老代码,还是有必要了解this的。 this的指向原则: this 永远指向最后调用它的那个对象…
自定义HTML5视频播放器

自定义HTML5视频播放器

前言 HTML5中<video> 标签定义视频,比如电影片段或其他视频流。也就是说video是用来播放视频的,而且是HTML5中的新标签。所以对老浏览器是不支持的,来看看支持。 Video属性 属性 值 描述 autop…
CSS中Flex布局的可伸缩性(Flexibility)

CSS中Flex布局的可伸缩性(Flexibility)

Flexibility Flex伸缩布局决定性的特性是让伸缩项目可伸缩,也就是让伸缩项目的宽度或高度自动填充剩余的空间。这可以以flex属性完成。一个伸缩容器会等比地按照各伸缩项目的 扩展比率 分配剩余空间,也会按照 收缩比率 缩小…
JavaScript如何快速排序

JavaScript如何快速排序

基本思想 1 在数据集之中,选择一个元素作为"基准"(pivot)。 2 所有小于"基准"的元素,都移到"基准"的左边;所有大于"基准"的元素,都移到"基准"的右边。 3 对"基准"左边和右边的两个子集,不断重复第一步和第二步,直到…
JavaScript中undefined与null详解

JavaScript中undefined与null详解

对于undefined和null我一直知道他们有很多区别,也知道一点关于他们的区别,但却不具体系统,因此总结了一下,主要心得如下: 要区分它们,首先要明确这两个值所代表的意义: null 是一个 JavaScript字面量,表示空值…
微信小程序获取用户所在城市

微信小程序获取用户所在城市

在微信小程序中, 获取用户的地理位置是需要权限的, 如果只是获取用户所在的城市信息, 那只需查看用户ip所在的城市就好了, 下面我们就完成获取用户ip的小程序逻辑~ 根据用户ip获取地理位置 根据用户ip获取用户地理位置, 用爬虫实…