自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(27)
  • 收藏
  • 关注

原创 地址栏输入一段url会发生什么事情(精简版、面试必问)

地址栏输入一段url会发生什么事情?1、题目分析:这套题目比较开放,可以围绕以下几个点来回答:DNS域名解析过程js时间线浏览器解析javaScript三部曲2、精简版答案:首先,通过域名解析系统解析浏览器地址(本地文件缓存,浏览器缓存,路由缓存,ISP DNS缓存,递归搜索…)找到对应的ip地址,发送请求;其次,服务器收到请求会给浏览器响应一段数据,浏览器收到数据后,开始解析文档(js时间线);然后,当文档解析完成后执行js代码,这个过程就是js执行三部曲(语法检测,预编译,解释执行

2021-09-14 16:56:11 162

原创 快速应对面试中的防抖和节流函数!

触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间

2021-08-07 15:17:06 221

原创 Js实现深克隆和浅克隆的方法!

深克隆和浅克隆的定义浅克隆定义:直接将存储在栈中的值赋值给对应变量,如果是基本数据类型,则直接赋值对应的值,如果是引用类型,则赋值的是地址。浅克隆代码:function lowClone(Clone){ let obj={}; for(let key in Clone){ obj[key]=Clone[key] } return obj; }let a = {

2021-08-07 11:01:45 1206

原创 javaScirpt模拟后台编写的简单的动态验证码!

1.javaScirpt如何编写简单的动态验证码?首先呢,由于我有这个想法的时候是在写一个简单的demo的时候萌生的一个小小的想法,能不能不借助后台在前台实现验证验证码里面的内容能否与输入框的内容匹配呢!其次,由于我用的是canvas画布绘制的验证码框子,我查阅了相关的资料发现,获取canvas画布里面的内容是一件不太方便的事情,还是不如在后台用canvas或者svg等第三方库在后台做数据验证来的方便,然后返回给前台将其渲染出来来的快!最后,没有办法,自己就硬着头皮写了下去,仅仅是实现了简单的效果而

2021-08-04 21:04:30 186

原创 由typeof 检测出null是Object类型引发的一些列疑问?

1.javaScirpt的数据类型有哪些?基本数据类型:(5种)UndefinedNullBooleanStringNumber引用数据类型:(1种)Object(注意:array,function,object都属于Object)Es6新增的数据类型:(1种)symbol2.常用的检测数据类型的方法有哪些呢?typeoftypeof可以判断的类型: number、boolean、symbol、string、object、undefined、function优

2021-08-04 19:48:05 629

原创 Set、Map集合及其源码

Set集合定义:是一种数据的存储结构,不同的场景运用不同的集合存储数据。存放的数据必须为可迭代对象。作用:用于存放不重复的数据。原型方法:方法和属性 含义 add(value) 添加某个值,返回Set结构本身 delete(value) 删除某个值,返回一个布尔值,表示删除是否成功 has(value) 返回一个布尔值,表示该值是否为Set的成员 clear() 清除所有成员,没有返回值 keys() 返回键名的遍历器 va

2021-06-22 20:41:31 140

原创 what‘s the ajax?

Ajax定义AJAX不是一门新的语言,是综合HTTP异步通信、js、xml、以及JSON等多种网络技术的一种编程模式。Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML),是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML(标准通用标记语言的子集)。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新(无刷新技术)。传统的网..

2021-06-08 12:35:03 143

原创 正则表达式简单归纳!

为了更好的理解正则表达式,我们需要思考几个问题。我们要匹配确切的内容。我们要匹配类型的内容,包括同类(数字,字母)和次数。我们要匹配的相关内容,同时在位置(这个概念很重要)上要有要求。比如它的前面不能是什么,后面不能是什么。针对这三类问题:正则表达式提供相应的语法。第一类问题:比较简单,我们直接写我们想要的值就可以了,也是用的最多的。比如: /l/, /ge/ /hello/第二类问题:这个情况就比较多,例如,匹配数组,匹配大写,匹配多个字符。针对这个提供一系列的语法:比如:/d, /w, [a

2021-05-25 16:31:09 142

原创 浅谈原型和原型链!

原型定义:原型是function对象的一个属性,它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象,可以继承该原型的属性和方法,原型也是对象。利用原型特点和概念,可以提取公共属性对象如何查看对象的构造函数:constructor对象如何查看原型:隐式属性__proto__函数对象(联系)所有引用类型(函数,数组,对象)都拥有**proto属性(隐式原型);所有函数拥有prototype属性(显式原型)(仅限函数)原型对象:拥有prototype**属性的对象,在定义函数时

2021-05-23 20:17:37 118

原创 canvas绘制中国国旗!

绘制中国国旗1、题目今天刚学了H5中的画布canvas元素,课堂上的案例挺有意思,就心血来潮想利用canvas绘制中国国旗;2、思路第一步,创建画布元素,在画布内作好辅助线和网格线来确定圆的位置;第二步,作好网格线后,我们先定好大圆的坐标和小圆的坐标;第三步,绘制出一个大圆和四个小圆;第四步,在大圆内绘制出五角星,和在第一个小圆内画出五角星,旋转画布为固定的弧度值绘制出其他三个小五角星,并且将大五角星和四个小五角星的元素填充至黄色(外边轮廓默认为黑色);第五步,五星红旗绘制完毕,取消辅

2021-05-23 17:28:44 2559 4

原创 canvas绘制七彩随机小球!

canvas绘制七彩随机小球1、题目拿到一个案例,需要在画布上实现不同大小颜色位置的七彩小球,并且要运动起来!2、思路(1)、第一步需要在页面上创建画布元素,创建一个数组用来存放随机小球的个数;(2)、第二步封装一个随机函数,定义圆的位置坐标cx,cy 圆的半径xr ,圆的背景颜色bg,圆每次移动的步长sx,sy,用随机数表示它们,并且把它们放入一个对象中,方便定时器的调用;例如:当数组中存放的小球数量达标了,我们就清楚定时器;(3)、第三部封装一个函数用来绘制刚刚创建的小球,并且渲染到画

2021-05-23 14:47:27 637

原创 单对象编程实现2048小游戏!

2048小Demo1、题目在百度搜索引擎搜索2048,我们可以在线玩2048 Game - Play 2048 GameOnline,同学都说很好玩,我就花了点时间简单的写了下,样式很简易!2、思路(1)、首先我们要对这个游戏有一个简单的了解,2048是按下上下左右将相同且相邻数字相同的数字相加,然后在随机位置随机生成一个新的数字,将每一列或者每一行的数字移动到最边缘,碰到相邻的相同数字就相加,没有碰到相同的数字就移动,每次移动后在页面中重新生成一个新的数字,当页面的数字都充满格子游戏就结束了

2021-05-22 16:03:38 732 1

原创 利用canvas写七彩时钟!

利用canvas写七彩时钟!1、题目(1)、拿到一个时钟案例要求在页面上画出一个时钟,获取当前电脑的系统时间?(样式不限利用h5实现)2、思路(1)、首先我们要充分了解到canvas画布元素里面的图形以及线段的画法,圆的画法,时针、分针、秒针的画法;(2)、其次,是要在页面布局渲染出一个时钟的图形,画出刻度的位置,以及时针分针秒针的位置的静态效果,方便后面定时器来实现动态效果;(3)、做好这些工作后,最难的地方是如何将时针分针和秒针与刻度一一对应,那么我们就要用到圆的弧度制,让定时器每隔一

2021-05-18 20:44:54 251

原创 JS底层书写简单手风琴效果!

手风琴效果1、题目在jQuery库里面拿到一个案例,要求实现手风琴效果,鼠标点击当前模块可以展开,再次点击可以收缩,然后点击当前模块其他模块收缩…模拟手风琴效果2、写法与思路(布局)(1)、首先先分析页面布局,该效果是由若干个ul和li组成的,那么我们就要在页面创建若干个ul和li元素,并且简单的写一下这些元素的样式,并且将所有的ul设置溢出隐藏,将li先隐藏一下;(2)、其次,还要考虑到点击某个ul时候当前ul底下的li的样式变为display:block;并且再次点击当前ul时候能够收缩

2021-05-05 21:24:07 406

原创 JS底层书写的简单Tab切换!

Tab切换1.题目参照某宝网一个商品详情页,写出tab切换的功能,样式不限,实现功能即可(对dom元素操作)2.写法与思路(1)、对给到的要求我们首先去某宝网看一下效果图,可以清晰的发现,大的布局是用三个盒子形成的,整体一个大的盒子里面拥有头部和尾部,头部里面导航栏用ul和li来写的,尾部是用写有简单样式的盒子写的;(2)、当点击头部导航栏目的某一个li标签的时候,其他li的样式不改变,当前的li的背影颜色变为设置的颜色,就是改变每一个li的背景颜色(排他思想);(3)、尾部盒子样式写好后

2021-05-05 17:24:41 179

原创 预编译面试题!

预编译面试题!1、预编译知识点(引用)首先,做这类题目需要掌握四个知识点:(1)、执行期上下文:当函数在执行前一刻,会创建一个执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时的环境(1.初始化函数的参数arguments,AO,2.创建作用域链3.确定this的值),函数每次执行时对应的执行上下文一定是独一无二,所以多次调用一个函数会导致创建多个执行期上下文,当函数执行完毕,它所产生的的执行上下文被销毁。(2)、函数预编译(AO):从函数执行的前一刻开始:2.1、创建一个函数的

2021-04-22 20:48:04 299

原创 班级点名器!

点名器:1、题目利用定时器的原理写出一个简单的班级点名器,样式自拟,实现功能即可!思路与写法:(1)、拿到一个案例,我们首先要写出html的页面结构来,将班级上所以名字写到 li 的文本节点里,便于用 js 来操作元素样式;(2)、写好页面后,我们需要用到鼠标点击事件,控制点名器的开始与结束;(3)、如何实现点名器每次只出现一个人呢,那我们就需要用到循环定时器;(4)、将鼠标点击事件和定时器结合起来就可以啦,需要注意的是及时清理定时器,否则会出现bug;(5)、利用排他思想,给随机位置的当前

2021-04-21 13:59:20 1168

原创 如何用JS实现轮播图!

轮播图1.思路与写法1.1 首先我们拿到一个关于轮播图的实例我们要分析里面的功能,将其模块化处理;1.2 首先需要实现的是自动轮播的效果:1.2.1需要用到运动函数框架,startMove(),还需要用到定时器,这里我们用的是多次调用的延时定时器达到效果;1.2.2对dom元素的操作,获取它的样式;1.3其次实现上下按钮实现上一页和下一页的切换,对其绑定鼠标点击事件,同时需要获取该元素的节点;1.4最后实现底部的小圆圈的固定切换,需要对其绑定鼠标点击事件,这里用到获取该元素的节点,利用排他思想

2021-04-20 14:22:27 1697 1

原创 如何用JS实现城市三级联动!

如何用js实现城市三级联动1.思路及写法(1)、首先在网上下载我们所需要用到的json包,里面包含中国的省份以及对应的地级市和县级单位;(2)、第一步首先遍历一下json包里面的对象,分析如何将省份和地级市和县级单位对应起来,可以发现每一个里面都有唯一的code!(3)、遍历一遍省份,创建34个对象,将每个省份分别插入到相应的第一个下拉框中;(4)、同上省份中的一样,创建省份下对应的市级单位创建对象插入到第二个下拉框中,可以利用code唯一的原理判断与之相对应的地级市;(5)、同上市区中的一样,

2021-04-19 22:57:52 1108 2

原创 冒泡排序法,遍历n维数组!

关于数组中的几个经典例题冒泡排序法:1.现有一个数组,子串都为数字,要求从小到大的方式排列数组并且打印出来!var arr=[1,25,14,99,8,39];参考代码块1:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <

2021-04-11 17:00:53 346 2

原创 在实例中掌握数组的各类方法!

数组概念:可以存放多个数据,并且有序排列查找数组中的数据: 数组名[下标] 数组名[下标] = 新值 1.如果下标存在 则修改 2.如果下标不存在 则新增检测数组的长度 数组名.length判断是不是一个数组 Array.isArray(数组名)数组新增的方法push() 往数组的末尾添加一个或者多个元素 每个要添加的元素之间用逗号隔开,并返回新的长度!unshift() 向数组的最前面添加

2021-04-11 14:53:42 90 2

原创 小司机入坑的第一堂js课程哈哈哈哈!

JavaScript第一堂课:webB/S C/S1.浏览器分为两个部分 外壳 内核 IE Trident FIRFOX Gecko SAFARI webkit CHROME blink OPERA blink编程语言机器语言 0 1 0 1 0 1汇编语言高级语言 C C++ C# JS JAVALiveScri

2021-03-28 22:31:22 92

原创 如何深入理解弹性布局,小司机娓娓道来!

弹性布局(Flex)## 弹性盒子(父级)

2021-03-28 22:09:03 158

原创 轻松学习三种层叠样式表!

层叠样式表三种引入方式归纳:引入方式:**第一种:** 行内式 CSS引入 使用: 在标签内 加上style属性在引号内 样式名:样式值;(每个样式之间用分号相隔) **第二种:** 内部式CSS引入 使用: 在head标签里面 加上一个style标签 标签名{样式;} **第三种:** 外部式CSS引入 使用:创建一个CSS文件 在html页面中的head标签里

2021-03-21 11:08:11 620

原创 一键学会三种定位布局,相对定位、绝对定位、固定定位!

定位布局定位属性: position 作用: 指定元素的定位类型取值: static 默认不定位 相对定位 绝对定位 固定定位相对定位关键字 position:relative特点: 相对不脱离文档流,并且是占有之前的位置,随着自身原来位置的左顶点进行位置偏移的。偏移量: top left right bottom 堆叠顺序: 在元素出现堆叠效果时改变他们

2021-03-18 20:21:45 885

原创 和大家分享一个学习盒子模型的小妙招,快来康康吧!

简单的盒子模型元素组成及分类:div 盒子的元素组成和写法:margin 外边距padding 内边距border 边框内容

2021-03-15 20:19:20 142

原创 小司机教你学html,来不及解释了快上车!

**html的简单基本标签**几个简单的常用标签:<h1 align="left">哎呦,今天天气不错!</h1> <p align="center">故事的小黄花,从出生那年飘着</p><font color="green" size="7" face="宋体">童年的荡秋千,随记忆一直晃到现在</font> <hr/> <br/><br/><br/>

2021-03-11 15:42:09 100

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除