
前端小技巧
文章平均质量分 70
早上起来要吃饭
这个作者很懒,什么都没留下…
展开
-
web前端教程之页面元素水平居中
小伙伴们每次在写网页时会经常遇到需要将元素垂直或水平居中的时候,往往面临着方法的选择,而各种方法有的简单,有的困难,还有的有一些坑,在选择方法时我们应该怎么做才能不走弯路呢? 话不多说,现在就来分享我的一些方法,在分享之前我先查查秘籍 咳咳,下面是正式内容,以我们最常见的网页为例 上图网页中,红框部分内的左右元素都是水平居中显示的,其中既有大小不一的文本又有图片,面对这种情况只要我们解决其中一个,另外三个就很简单了,那么这一个我们应该怎么处理呢水平居...转载 2021-04-13 11:11:04 · 3080 阅读 · 0 评论 -
十行代码实现网页标题滚动效果
本篇文章给同学们介绍一种让网页标题滚动的教程,注意是网页标题而不是网页内部文字哦,赶紧收藏学习吧。 怎么样才能实现网页标题滚动效果呢?时间就是金钱,废话不多说,直接上代码:然后解释一下每一行的意思吧: 首先创建了一个变量 keyWords,用来存放网页标题滚动的文字(字符串) 接着创建一个命名函数 titleChange 执行以下操作: 1. 用split() 方法(不改变原始字符串)将滚动的文字拆分为单个字符的数组keyList; ...转载 2021-04-13 11:08:02 · 572 阅读 · 0 评论 -
什么是响应式网页?
进入移动互联网时代,各种不同的移动智能设备层出不穷,比如说智能手机、平板电脑、可穿戴式设备等。据2017年8月第40次《中国互联网络发展状况统计报告》的统计结果,截至2017年6月,我国网民规模达到7.51亿,其中手机网民达7.24亿,占比达96.3%,较2016年底增长了1.2个百分点,与此同时,使用台式电脑、笔记本电脑等终端上网的比例却有所下滑。这意味着网民的上网设备进一步向移动端集中,移动互联网主导地位进一步强化。但各种不同的移动智能终端设备的屏幕大小和分辨率都是不尽相同的,而且即使是同一个设备,当用转载 2021-04-13 11:05:07 · 512 阅读 · 0 评论 -
Python爬虫看腻了?JS爬虫来拯救你!
一提到爬虫,大多数同学都想到的是Python,今天小千就给大家上一下不同的菜,利用js制作一个爬虫,Python用腻了来试试js吧。 一、引言 最近娱乐圈比较的火的算是郑爽事件了,作为一名程序猿如何能或者最新的娱乐热点新闻呢? 今天咱们就用js做一个网络爬虫,来爬取一个网站的新闻数据。 二、什么是爬虫? 网络爬虫,又称为网页蜘蛛,网络机器人,意思是我们通过程序去搜集网络上某些网站的数据。典型的通过爬虫获取数据的网站,比如百度、谷歌等搜索引擎。还有一些新...转载 2021-04-09 11:36:08 · 698 阅读 · 1 评论 -
前端技巧|web前端遍历对象的方法
上一期我们讲了前端遍历数组的方式,但我们有时候也会遇到需要遍历对象的情况,那么遍历对象应该如何操作呢?小千今天就来告诉你。 一.for....in遍历对象 一般用于遍历对象 keys表示obj对象的每一个键值对的键 输出结果: 二、for...in遍历数组(不推荐) 输出结果: for…in循环读取属性名,通过属性名再获得属性值 for…in循环主要是为遍历对象而设计的,虽然可以遍历数组,但是不...转载 2021-04-08 10:49:10 · 1236 阅读 · 0 评论 -
web前端怎么获取cookie?
在前端开发中有些情况下需要获取用户的cookies,这样当用户下次登录网站的时候就不需要重复的去调整功能,那么你知道如何去实现吗? 先放一段完整的JS代码,后面都有功能备注,大家可以自己先看一下。 下面再介绍一下cookies的设置和获取方式,帮助新手前端开发者了解和使用 1.设置cookie的方法为:cookie.set(key,val,time) key可以理解为cookie的变量名 val可以理解为这个cookie所带有的值...转载 2021-04-08 10:46:20 · 8216 阅读 · 0 评论 -
前端问题之body没设置高度背景色为什么会全屏显示?
还记得我们开发全屏页面或者是移动端页面时经常会设置一句话是不是只知道用?却不知道怎么回事?原因是,当没有内容撑开高度时,html和body的默认高度是0,如果内容想要按照比例或是撑满全屏时,就没办法正常使用百分比。而如果只设置body { height: 100%; },这时body以html的高度为基准,但html默认高度也是0,所以需要设置html与body高度同与浏览器等高但是,当我们没有设置任何高度的情况下,给body设置背景色,颜色竟然是可以布满浏览器的,然而可以看到控转载 2021-04-06 12:55:37 · 612 阅读 · 0 评论 -
纯前端CSS实现动态太极阴阳鱼效果
今天小千来给大家分享一期纯CSS实现太极动态效果的教程,最终的效果如下图所示,完全没用到JavaScript哦,看下去。把2d静态的太极图改成了3d,阴极和阳极分到了两个平面里实现旋转效果,这个好实现,重点是实现它的透明效果,平面太极图显示出两极是用另加的块元素挡住底面的颜色,但如果上图的两极用遮挡来实现效果的话并不能实现透明,将遮挡的块设为透明又会显示出底面原本的样子,所以这个思路不对。那就只能将底面本身变为透明,但怎么实现既透明又能出现这种样子呢?渐变,而且为了能出现圆的样子选择了径向渐变。转载 2021-04-06 12:51:18 · 576 阅读 · 0 评论 -
web前端数组处理之扁平化数组
在进行前端开发的时候避免不了会遇到很多数组的情况,其中不乏会存在数组套数组或者需要合并数组的情况,今天小千就来给大家介绍一下如何将数组扁平化处理。 数组扁平化概念:用于将嵌套多层的数组“拉平”,变成一维的数组 方法一:通过concat将二维数组转化为一维数组 原理:通过将扩展运算符,将数组内部展开,并通过concat连接两个字符串的方式返回一个新的数组。 方法二:使用数组方法join和字符串方法split进行数组扁平化 原理:通过jo...转载 2021-04-06 12:45:26 · 402 阅读 · 0 评论 -
什么是响应式网页?
进入移动互联网时代,各种不同的移动智能设备层出不穷,比如说智能手机、平板电脑、可穿戴式设备等。据2017年8月第40次《中国互联网络发展状况统计报告》的统计结果,截至2017年6月,我国网民规模达到7.51亿,其中手机网民达7.24亿,占比达96.3%,较2016年底增长了1.2个百分点,与此同时,使用台式电脑、笔记本电脑等终端上网的比例却有所下滑。这意味着网民的上网设备进一步向移动端集中,移动互联网主导地位进一步强化。但各种不同的移动智能终端设备的屏幕大小和分辨率都是不尽相同的,而且即使是同一个设备,当用转载 2021-04-02 13:57:01 · 542 阅读 · 0 评论 -
web前端技巧|一文讲解回流和重绘
今天我们为大家介绍一下web前端中涉及到的回流和重绘的概念,先来看一下官方给出的定义: 回流(reflow):对于DOM结构中的各个元素都有自己的盒子模型,这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等)来计算并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow ; 重绘(repaint):当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了,这个过程称之为repain...转载 2021-04-01 17:29:47 · 280 阅读 · 0 评论 -
前端技巧|JavaScript面向对象编程理解
对编程有了解的同学都知道,面向对象是一个非常难以理解的概念,下面给大家分享一下对象object的理解,本篇文章主要分享面对对象的封装。当然现实生活中面向对象也挺难的,哈哈哈~ 一,关于实例对象的原始模式 首先我们知道每个物体都是一个对象,举例来说,“狗”作为一个对象,他有“种类”和“颜色”两个属性。 然后,我们需要创建两个实例化对象 这也是最基础的对象封装,也就是把“种类”和“颜色”两个属性放在一个对象里面。但是问题来了,这种写法有两个问题:一...转载 2021-03-31 17:17:25 · 212 阅读 · 0 评论 -
前端小技巧一,|如何避免ajax重复请求?
在前端开发的过程中,如果没有注意限制和封锁经常会出现很多重复的ajax请求,导致服务器压力很大,今天小千就来给大家提供几个解决方案,看到就是赚到。 1. UI层面的拦截 当用户动了动发财的小手点击完按钮后,就立即禁用按钮, 并开启等待动画,如果收到服务器的成功响应返回后,再隐藏动画,一定要设置超时,时间不能太长,如果过长,用户会骂街的。 2. JS层面的封锁 (1) 暴力点击 如果用户连续暴力点击按钮,我们可以通过函数防抖来做,其...转载 2021-03-30 17:48:19 · 426 阅读 · 0 评论