自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

无糖加冰

不去抱怨,尽量担待,不怕孤单,努力沉淀。

  • 博客(147)
  • 资源 (1)
  • 收藏
  • 关注

原创 To Do List (待办事项)

To Do List (待办事项)上篇博客中我们讲到了浏览器的本地存储,因为没有列出具体的实例让大家操作,所以肯定还有一部分人是没有彻底明白的,那么今天这篇博客,就通过一个案例来让大家好好了解一下什么是本地存储以及本地存储的作用!闲话少说,直接上干货!To Do List (待办事项)案例名称:To Do List (待办事项)需求:前端页面的开发使用响应式布局,使得用户在移动端上也可以使用输入事项以后,用户按回车添加到未完成目录中未完成和已完成可以通过复选框相互转化浏览器关闭以后

2021-03-26 10:56:01 92

原创 浏览器的本地存储

浏览器的本地存储随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,浏览器会经常性的在本地存储大量的数据,因此HTML5规范提出了相关解决方案。本地存储特性数据直接存储在用户的浏览器中设置、读取比较方便,甚至页面刷新以后不丢失数据容量较大,sessionStorage约5M、localStorage约20M只能存储字符串,可以将对象JSON.stringify() 编码后进行存储window.sessionStorageses

2021-03-26 10:27:59 56

原创 移动端click延时解决方案

移动端click延时解决方案相信我们大家在做移动端的时候,肯定会发现一个问题,就是我们在触发点击事件的时候会有300ms的延时,其根本原因就是移动端屏幕当我们双击的时候会进行缩放(double tap to zoom)页面,所以今天我来带大家解决这个问题.好啦,话不多说,我们直接上解决方案.一,禁用缩放浏览器,禁用默认的双击缩放行为并且去掉300ms的点击延时.具体操作如下:<meta name="viewport" content="user-scalable=no">二,利用t

2021-03-16 10:30:20 61

原创 移动端开发之触屏事件

移动端开发之触屏事件触屏事件概述因为移动端浏览器兼容性较好,不需要考虑JS的兼容性问题,所以我们可以放心的使用原生JS书写效果,但是移动端也有自己独特的地方.比如触屏事件(touch)也称触摸事件,Android和 IOS 都有相应的触屏事件。触屏事件中touch对象代表一个触摸点.触摸点可能是一根手指,也可能是一根触摸笔.触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作.常见的触屏事件如下:触屏touch事件说明touchstart手指触摸到一个D

2021-03-08 11:28:31 44

原创 简洁、直观、强悍的Bootstrap前端开发框架

简洁、直观、强悍的Bootstrap前端开发框架简洁、直观、强悍的Bootstrap前端开发框架,让我们的web开发变得更迅速、简单.在我们学习Bootstrap前端开发框架之前,我们先来了解一个概念!什么是框架?框架顾名思义就是一套架构,框架有一套比较完整的网页功能解决方案, 而且控制权在框架本身,有预制样式库、组件和插件 。使用者必须按照框架所规定的某种规范进行开发。了解完框架以后,我们接下来开始学习Bootstrap.Bootstrap简介Bootstrap来自Twitter(推

2021-02-25 16:11:14 468 2

原创 Less 基础

Less 基础css弊端CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。CSS 需要书写大量看似没有逻辑的代码,CSS 冗余度是比较高的。不方便维护及扩展,不利于复用。CSS 没有很好的计算能力非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。Less 介绍Less(LeanerStyle Sheets 的缩写)是一门 CSS扩展语言,也称为CSS预处理器。Less做为 CSS的一种形式的扩展,它并没

2021-02-18 14:55:40 101 2

原创 移动端开发之rem布局

移动端开发之rem布局what is rem ?css3中的计量元素大小的单位,类似px、pt、em。一种相对根元素font-size的计算方式。rem使用场景:每个元素的宽高、文字大小、行距、补白等一切可以使用长度单位的地方。实例:html{font-size:37.5px;}/*根元素的基础font-size被设置为37.5px,则1rem=37.5px*/#box1{width:10rem;height:2rem;font-size:0.5rem;}/*box1的宽

2021-02-07 12:11:09 58

原创 移动端开发之媒体查询

移动端开发之媒体查询什么是媒体查询?媒体查询(Media Query)是CSS3新语法。使用 @media查询,可以针对不同的媒体类型定义不同的样式@media 可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机,平板等设备都用得到媒体查询媒体查询语法用 @media开头 注意@符号mediatype 媒体类型and|not|only:或(表示两个条件同时满足);非(表示不满足后面的条

2021-01-25 09:13:00 160

原创 移动端开发之弹性布局(Flex布局)

移动端开发之弹性布局(Flex布局)文章目录移动端开发之弹性布局(Flex布局)绪论Flex布局是什么?Flex布局的基本概念Flex容器的属性以下六个属性设置在Flex容器上flex-direction属性flex-wrap属性flex-flow属性justify-content属性align-items属性align-content属性Flex项目的属性以下6个属性设置在Flex项目上order属性flex-grow属性flex-shrink属性flex-basis属性flex属性align-self

2021-01-22 09:08:32 104

原创 移动端开发之流式布局

移动端开发之流式布局各位学习前端的小伙伴,相信大家在写前端页面的时候大家都用过百分比布局也就是我们今天所说的流式布局.那么接下来给大家总结一下流式布局的使用.一:什么是流式布局?网页布局中包括:静态布局流式布局响应式布局弹性布局……静态布局静态布局指的就是网页中的所有元素都使用px为单位.不管浏览器具体的大小是多少,始终按照设置的值布局来显示,由于浏览器大小不一,这样的布局很容易在不同设备中出现滚动条等问题.所以这种布局在移动开发不是主流的布局方式.流式布局流式布局是页面中

2021-01-18 21:28:19 86

原创 移动端开发绪论

移动端开发基础通常移动端开发主流方案一共有两种一种是单独制作移动端页面,目前在市场上是主流方案还有一种是响应式页面兼容移动端这种虽然不是主流方案,但是应用这种开发方案的也不是没有.我们访问移动端页面可以通过以下两种方式进行访问:网址域名加m(mobile)就可以直接访问页面的移动端页面使用移动设备,进行访问,则可以直接跳转到移动端页面又到了我们最头疼的浏览器的兼容性问题移动端浏览器基本以webkit内核为主,因此我们只需要考虑webkit兼容性问题即可。移动端浏览器

2021-01-17 19:36:31 149 6

原创 移动端开发之视口

移动端开发基操之视口视口是什么?视口(viewport)就是浏览器显示页面内容的屏幕区域.视口分为布局视口,视觉视口和理想视口.布局视口 (layout viewport)一般移动设备的浏览器都默认设置一个布局视口,用于解决早期的pc端页面在手机上显示的问题.iOS, Android基本都将这个视口分辨率设置为 980px,所以PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。视觉视口(visual viewport)视觉视口是用户正在看到的网

2021-01-14 20:36:57 69

原创 移动端开发之meta标签的设置

移动web前端开发之HTML meta 标签HTML中<meta>标签内的信息不会显示在页面中,定义<meta>标签的主要目的是因为它对机器是可读的。<meta>标签有很多功能,它可以定义文档中的关键字,也可以对文档进行描述,还可以配合自身的属性设置网页的过期时间等等。当我们定义了页面的关键字或者描述信息后,搜索引擎蜘蛛(也就是常说的网络爬虫)就可以利用它们来搜索这个页面的信息当然<meta>标签的设置在我们移动端开发中也是必不可少的一步!<m

2021-01-13 20:27:35 126

原创 CSS3中的transform(转换)

CSS3中的transform(转换)transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移,旋转,变形,缩放等效果.浏览器支持情况Internet Explorer 10、Firefox、Opera 支持 transform 属性。Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。Opera 只支持 2D 转

2021-01-08 10:14:39 270

原创 CSS3中的transition(过渡)

CSS3中的transition(过渡)transition是CSS3中具有特殊功能的特性之一,可以不使用flash动画或者JS计时器的情况下,当元素从一种样式变为另一种样式时为元素添加过渡效果.浏览器支持情况Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。Safari 支持替代的 -webkit-transition 属性。注意:Internet Explorer 9 以及更早版本的浏览器不支持 transit

2021-01-07 15:09:58 98 4

原创 H5C3教程

H5C3教程文章目录H5C3教程HTML5简介什么是HTML5?HTML5 是如何起步的?HTML5浏览器支持HTML5 语义元素HTML5 表单元素HTML5 表单属性HTML5 新的 Input 类型HTML5 Video(视频)HTML5 Audio(音频)HTML5内联SVGHTML5 MathMLHTML5 拖放(Drag 和 Drop)HTML5 Geolocation(地理定位)HTML5 Web 存储HTML5 Web SQL 数据库HTML5 应用程序缓存HTML5 Web Worker

2021-01-06 10:38:15 148 2

原创 HTML之marquee(文字滚动)标签

HTML之marquee(文字滚动)标签marquee简介<marquee>标签,是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容。<marquee>标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等,它们都是可选的。marquee属性behavior属性behavi

2021-01-05 12:45:08 160

原创 JS中的三大将(offset/client/scroll)

JS中的三大将(offset/client/scroll)通常我们在写JS的时候,经常会碰到offset,scroll和client这三个关键字,所以今天我们单独拿出来讲一下这三个关键字!开局先来两张图,后面好发育!offset(元素偏移量)offset相关属性可以动态的得到元素的位置(偏移),大小(高度和宽度)等数值.注意:offset返回的数据都是不带单位的数字类型offset相关属性的使用offset相关属性获取的数据offsetParent返回元素带

2021-01-04 10:20:47 138 2

原创 JavaScript执行机制

JavaScript执行机制文章目录JavaScript执行机制关于JavaScript不会吧!不会吧!不会还有人不知道单线程是什么吧?JavaScript的同步和异步于是,所有任务可以分成两种一种是同步任务(synchronous)一种是异步任务(asynchronous)执行步骤我们不禁要问了,那怎么知道主线程执行栈为空啊?JavaScript的宏任务与微任务你是否觉得同步异步的执行机制流程就是JavaScript执行机制的全部?macro-task(宏任务)micro-task(微任务)注意执行步骤

2021-01-01 18:36:06 78

原创 简述JS中两种定时器的用法

简述JS中两种定时器的用法setTimeout()定时炸弹setTimeout()使用时指定一个时间段,只要时间到了直接执行绑定的函数setTimeout()中传递两个参数第一个参数:事件所执行的函数第二个参数:时间间隔就是时间段(以毫秒为单位)实例window.setTimeout(function(){ alert("hello"); },3000)停止定时器停止定时器方法取消了先前通过调用setTimeout()建立的定时器,括号中的参数

2021-01-01 09:13:29 428

原创 JS中的BOM详解

JS中的BOM详解文章目录JS中的BOM详解BOM简介BOM中的顶级对象其他window方法JavaScript Window ScreenJavaScript Window LocationJavaScript Window HistoryJavaScript Window NavigatorBOM简介我们在JavaScript这篇博客中讲过JavaScript分三个部分:ECMAScript标准(基本语法)DOM:Document Object Model 文档对象模型,操作页面元素的BO

2020-12-30 18:51:28 281 2

原创 三分钟学会JS回调函数(callback)

三分钟学会JS回调函数(callback)什么是回调函数?当程序运行起来,一般情况下,应用程序会时常通过API调用库里所预先备好的函数。但是有些库函数却要求应用先传给它一个函数,好在合适的时候调用,以完成目标任务。这个被传入的、后又被调用的函数就称为回调函数上面的可能不是很好理解,我们举个栗子:你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,过了几天店里有货了,店员就打了你的电话,然后你接到电话后就到店里去取了货。在这个例子里,你的电话号码就叫回调函数,你把电话留

2020-12-30 09:06:22 386

原创 JS事件委托(事件代理)详解

JS事件委托(事件代理)详解事件委托是前端面试的经典题型,不管是以后面试还是做开发看看都是有帮助的!其实我也不是很清楚这个概念,所以才写了这篇博客,一是为了防止自己以后忘了.二是给那些和我一样的小伙伴做参考.那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。说的这么官方,不如我们一起来看网上大神们都用的一个栗子,就是取快递来解释这个现象.有三个同事预计会在周一收到快递。为签收快

2020-12-29 12:58:41 290

原创 如何禁止页面或文本被选中以及如何阻止浏览器的默认行为?

如何禁止页面或文本被选中以及如何阻止浏览器的默认行为?禁止整个body中的内容被选中复制:<body onselectstart="return false"> <p>禁止整个body中的内容被选中复制</p></body>禁止页面中某一块或某一篇文章被选中复制:<body> <div onselectstart="return false"> 这段内容不可选,禁止文字被选中

2020-12-28 17:25:29 262

原创 JS中的(event)事件对象

JS中的(event)事件对象事件对象什么是事件对象?事件对象就是当你触发了一个事件以后,对该事件的一些描述信息每一个事件都会有一个对应的对象来描述这些信息,我们就把这个对象叫做事件对象例如:你触发一个点击事件的时候,你点在哪个位置了,坐标是多少你触发一个键盘事件的时候,你按的是哪个按钮…鼠标触发事件的话,会得到鼠标的相关数据,键盘触发事件的话,会得到键盘的相关数据,键盘事件只有可以获取焦点的元素可以使用事件对象的使用事件触发时就会自动产生这个事件对象,并且会自动

2020-12-28 09:09:05 118

原创 JS中的DOM事件流(事件冒泡,事件捕获)

JS中的DOM事件流(事件冒泡,事件捕获)事件流简介在JS事件循环中,我们接触了很多JS自己触发的事件,但是当我们在网页上进行某些类型的交互时,也会触发事件,比如在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。当一个节点产生一个事件时,该事件会在元素结点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程称为DOM事件流。DOM事件流最早要从IE和网景公司的浏览器大战说起,IE提出的是冒泡流,而网景提出的是捕获流,后来在W3C组织的统一之下,DOM支持了冒泡流和

2020-12-26 10:18:37 130

原创 深入浅出JS事件

深入浅出JS事件上一篇博客JS中的DOM事件中为大家详细讲解了JS中的一些常用的DOM事件,今天这篇博客是带大家深入了解一下JS事件还是老问题!事件是什么?事件就是我们给这个元素添加的一些被动能力,当这个元素被进行某种程度的触发之后,元素对某些函数进行处理并执行,我们将这一系列的行为叫做事件注册事件我们给元素添加事件的行为叫做注册事件或者绑定事件注册事件的方式:传统方式元素.on...元素有一些以on开头的事件,比如onclick运用元素.找到我们需要的事件给事件直接赋值一个

2020-12-26 09:17:41 81

原创 JS中的节点操作

JS中的节点操作节点概述网页页面中所有内容都是节点.在DOM中节点我们以Node来表示.我们一般使用DOM对节点实现修改,添加,删除操作一般情况下,节点至少拥有三个基本属性NodeType:节点类型,这里的类型是标签的名称,比如div等等NodeName:节点名称,这里的名称是指JS中给这个节点起的一个名字NodeValue:节点值创建节点语法:document.createElement("tagName")document.createElement("tagName")

2020-12-25 11:38:57 104

原创 JS中的排他思想以及自定义属性

JS中的排他思想以及自定义属性今天我们学习JS中一个很重要的思想.排他思想实现排他思想的步骤是先找到所有的元素把所有的元素样式都改回初始的样式最后留下自己,设置特定样式注意:步骤的顺序不能颠倒,一定要先把所有改回去最后再单独改自己实例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <

2020-12-24 09:05:49 146

原创 mouseover和mouseenter的区别

mouseover和mouseenter的区别相信大家刚开始学mouseover和mouseenter的时候,总感觉这两个效果是一样的!但是仔细一想,既然是一样的,那么为什么要写两个呢?那么问题就来了,到底mouseover和mouseenter之间有什么区别?我们通过两个栗子来看看吧!栗子一:<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

2020-12-23 11:26:29 117 2

原创 JS中的DOM操作

JS中的DOM操作JS中的DOM操作主要可以改变网页中的内容,结构(标签),属性以及样式.同样这些操作针对于DOM而言也是通过操作对象的属性来实现的改变元素中的内容对于文本框元素而言,其内容属于value属性的值对于其它标签内容指的是写在两个标签之间的内容部分,所以无法使用value属性实现为了解决这个问题我们使用两个节点对象属性元素的innerText属性元素的innerHTML属性这两个属性都可以修改一个节点之间的内容注意:对于HTML文件而言能够识别<>,如果

2020-12-22 18:56:34 150 2

原创 JS中的DOM事件

JS中的DOM事件JavaScript事件JavaScript事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。JavaScript事件是可以被JavaScript侦测到的行为.JavaScript事件发生的条件主角(事件源):触发事件的元素发生什么事(事件类型):比如单击,移动到上方等等做什么事(事件处理程序):事件被触发以后执行的代码(函数),这个函数就是在这个元素被触发了对应的事件后自己执行的函数执行事件的步骤获取事件源绑定事件添加事件的处理程序运行并触

2020-12-21 09:32:52 273

原创 原生JS实现贪吃蛇游戏

原生JS实现贪吃蛇游戏贪吃蛇游戏(原生JavaScript)贪吃蛇游戏思路分析游戏思想:面向对象的思想三个js文件分别代表三个对象三个对象相互独立,在HTML中控制全局使用面向对象思想的好处贪吃蛇游戏采用面向对象的思想去实现,我们的食物还有蛇以及地图是相互独立的,不会对彼此产生影响,可以单独调用贪吃蛇游戏对象分析游戏的场景(一个大的div)场景的大小场景的边框场景在浏览器中的位置游戏的主角(每一节是一个小的div)蛇的属性蛇的初始长度(四节)蛇的

2020-12-19 09:10:56 5876 12

原创 JS中获取DOM元素的方法

JS中获取DOM元素的方法JS获取DOM元素的方法(8种)通过ID获取(getElementById)通过name属性(getElementsByName)通过标签名(getElementsByTagName)通过类名(getElementsByClassName)获取html的方法(document.documentElement)获取body的方法(document.body)通过选择器获取一个元素(querySelector)通过选择器获取一组元素(querySelectorAll

2020-12-18 18:31:12 261 2

原创 DOM简介以及JS和DOM之间的关系?

DOM简介以及JS和DOM之间的关系?从今天开始我们就开始DOM的学习,学习一门知识,首先要了解这门知识是什么?然后才可以进一步的进行学习.什么是DOM?DOM就是文档对象模型(Document Object Model)是由W3C组织推荐的处理可扩展标记语言(xml)的标准编程接口DOM允许脚本(js)控制Web页面、窗口和文档。DOM把整个页面映射为一个多层节点结构。HTML或XML页面中的每个组成部分都是某种类型的节点,这些节点又包含着不同类型的数据。这个时候可能有人会问X

2020-12-17 09:24:28 232

原创 Web API绪论

Web API绪论在学习Web API之前我们先来了解一下什么是API?API又叫应用程序接口,本质是一些编程接口API的目的是提供应用程序与开发人员的某些软硬件操作的一些方便功能.类似于我们使用的成型产品,在使用的时候无需考虑其生产过程,直接使用即可.了解了API以后,我们再来看看什么是Web API?Web API是浏览器提供的一套有关于操作浏览器功能以及操作浏览器内页面元素的API(BOM和DOM).现阶段我们主要针对于浏览器学习常用的API,主要针对浏览器做交互效果.总结:

2020-12-16 09:00:29 108

原创 JS常用内置对象

【JavaScript学习总结】——JS常用内置对象JS中的对象总共分为三种:自定义对象,内置对象,浏览器对象.自定义对象和内置对象是JS的基础内容属于ECMAScript。浏览器对象属于JS独有的,以后会在Web API中进行专门讲解,请大家及时关注!内置对象什么是内置对象?根据JS API(开发文档说明)(Application Program Interface)讲解的内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或者最基础而且最必要的功能(常用的属性

2020-12-14 09:19:52 150

原创 JS对象

【JavaScript学习总结】——JS对象JavaScript对象概念在JS中,对象本质是对一组无序的相关变量(属性)以及函数(方法)进行组合的结果,将这些变量及方法进行统一再封装对封装结果命名为对象JavaScript中所有的事物都是对象:字符串,数字,数组,日期,等等.可以说万事万物皆对象,在程序中可以将生活中的所有事物映射成一个对象,已达到程序实现现实生活中的事务。在JavaScript中,对象是拥有属性和方法的数据.属性主要是对对象的特征的描述,属性是与对象相关的值方

2020-12-12 10:29:27 105

原创 JS预解析

【JavaScript学习总结】——预解析预解析概念我们都知道HTML,CSS,JS代码全部交由浏览器的两个引擎进行处理,分别是渲染引擎和JS引擎.JS引擎负责对JavaScript代码进行执行处理,通过两个步骤完成JS代码的执行任务,分别是预解析和代码执行那么什么是预解析?当变量或者函数等作用域下,JS代码在执行之前,浏览器默认会将JS中有关var或者function声明的变量或者函数在内存中进行提前声明以及提前定义变量提升在ES6之前,JavaScript没有块级作用

2020-12-11 19:10:14 88

原创 初学JS必备三大经典案例——回文数,水仙花数,斐波那契数列

初学JavaScript必备三大经典案例(初学者必看)回文数回文“回文”是指正读反读都能读通的句子,它是古今中外都有的一种修辞方式和文字游戏,如“我为人人,人人为我”等。在数学中也有这样一类数字有这样的特征,成为回文数。(例如:121,222,323等等)回文数实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view

2020-12-10 10:36:04 118

template.js

template.js 一款 JavaScript 模板引擎,简单,好用。提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。

2021-01-25

空空如也

空空如也

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

TA关注的人 TA的粉丝

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