自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 javascript闭包

1.什么是闭包 一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)。也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。2.词法作用域function init() { var name = "Mozilla"; // name 是一个被 init 创建的局部变量...

2022-05-02 14:59:50 143

原创 Math对象

目录1.什么是Math对象2.Math的常用方法Math.ceil()Math.floor()Math.random()Math.round()1.什么是Math对象 Math是一个内置对象,具有数学常数和函数的属性和方法。它不是一个函数对象。Math适用于Number类型,但是不适用BigInt。与许多其他全局对象不同,Math它不是构造函数,所以他不要单独创建。所有属性和方法Math都是静态的。您将常数 pi 称为Math.PI并将正弦函数称为M...

2022-04-29 00:05:33 341

原创 Js中String对象的使用

1.什么是String对象String全局对象是一个用于字符串或一个字符序列的构造函数。一个字符串用于储存一系列字符就像“John Doe”,一个字符串可以使用单引号或双引号。2.如何声明String对象一般使用如下的几种方式声明string对象。一般就使用第一种就可以,第二种可以将其他类型的对象转换为String类型,第三种得到的是一个字符串对象let str1 = "hello world"let str2 = String(123)let str3 = new String(45

2022-04-26 19:18:59 604

原创 date对象

/* Date() 日期对象 是一个构造函数 必须使用new 来调用创建我们的日期对象 */ var arr = new Array(); //创建一个数组对象 var boj = new Object(); //创建了一个对象实例 //1,使用date 如果没有参数 返回当前系统的当前时间 let date = new Date(); console.log(date); //2.参数常用的写法 ...

2022-04-25 20:35:46 111

原创 Javascript数组补充

1.翻转数组核心:把数组的最后一个元素取出来作为第一个,然后把旧数组索引号第四个取过来(arr.length-1),给新数组索引号第0个元素(newaArr,length)var arr= [0,1,2,3,4,5]var newArr=[];for(var i = arr.length-1;i>=0;i--){newArr[newArr.length]=arr[i]}console.log()2.筛选数组的方法<script> /...

2022-04-23 10:43:35 2142

原创 Javascript新增数组元素

1.length用来修改length长度var arr = ['red', 'green', 'blue'];console.log(arr.length)arr.length = 5;(我们把数组的长度 )console.log(arr[3]) 可得值undefined2.修改索引号 ,追加数组元素var arr1 = ['red', 'green', 'blue'];arr1[3] = 'black';console.log(arr1);(追加数组元素)arr

2022-04-22 17:09:54 1346

原创 Javascript-断点调试

断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。浏览器按F12-->sources-->找回需要调试的文件-->在程序的某一行设置断点Watch:监视,通过watch可以监视变量的值的变化,非常的常用。F11:程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。代码调试的能力非常重要,只有学会了代码调试,才能学会

2022-04-21 22:39:41 1146

原创 Javascript-while循环和dowhile循环

1.while循环 语法: while(表达式){ 循环体 } 当while括号里面的表达式为真,那么就会一直反复的执行里面的循环体。只有括号内的表达式不满足了,才会结束里面循环执行的代码块;或者是手动的在循环体里面加一个break;当执行到break时就会结束掉wh...

2022-04-20 19:55:01 235

原创 Javascript-for循环

1.for循环语法部分for(初始部分;循环条件;条件迭代){循环执行的语句}for(①初始部分;②判断条件(为true则继续循环,为false结束循环)然后执行语句;③改变循环变量的值){④循环执行的语句2.for-in循环常用语对数组或对象的属性进行循环操作for(变量 in 对象){循环执行的语句}...

2022-04-20 00:18:18 311

原创 CSS流程控制

1.分支流程控制if语句1.1 if的语法结构if(条件表达式){执行语句}1.2 执行思路如果if里面的条件表达式结果为真 true 则执行大括号里面的执行语句如果if里面的条件表达式结果为假 则不执行大括号里面的执行语句则执行if语句后面的代码if(3<5){document.write(1)==>1 因为3雀氏小于5所以页面显示1}2.if else if语句(多分支语句)多分支语句就是利用多个条件来选择不同的语句执行 得到不同的结果 多选.

2022-04-18 22:28:35 356 1

原创 JavaScript入门知识

1.JavaScript是什么JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言脚本语言:不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行现在也可以用于Node.js技术进行服务器端编程2.JavaScript的书写分为行内式,内嵌式,2.1行内式:<body><input type="button" value="提交" noclick=“alert('我是拟鲽')”></body>2

2022-04-17 15:56:45 151

原创 CCS居中样式语法

1.行内元素居中盒子内的文本文字内容居中,水平方向居中text-align:center; 垂直方向居中line-height:盒子高度;这样就可以实现文字在容器中居中显示。2.块元素如何居中显示2.1 使用flex布局让子盒子可以在父盒子中水平垂直居中显示。使用对父盒子使用flex布局,然后再让flex伸缩元素向每行中点排列justify-content:center;最后让盒子里面的内容侧轴居中align-item:center;。2.2 使用定位加图像变换来实现子盒子的水平.

2022-04-15 20:16:41 672

原创 CSS媒体查询及移动端兼容

1.媒体查询通过媒体查询(Media queries),您可以根据各种设备特征和参数的值或者是否存在来调整您的网站或应用。它们是响应式设计 (en-US)的关键组成部分。 例如,媒体查询可以缩小小型设备上的字体大小,在纵向模式下查看页面时增加段落之间的填充,或者增加触摸屏上按钮的大小。在 CSS 中,使用@mediaat-rule根据媒体查询的结果有条件地应用样式表的一部分。 使用@import有条件地应用整个样式表。许多媒体功能都是范围功能,这意味着可以在它们前面加上“最小”或“...

2022-04-14 16:17:58 826

原创 CSS-flex弹性布局补充

1.order<div class="box"><div class="xbox">1</div><div class="xbox">2</div><div class="xbox" style="order: -1;">3</div>order定义项目的排列顺序,值越小越靠前第一个值默认为0<div class="xbox">4</div><div class="x

2022-04-13 20:55:44 148

原创 CSS-flex弹性布局

1.认识flexFlex的发展史2009年W3C 提出概念,但是官方没有flex这个词2011年浏览器厂商决定使用flexbox,来形容它的布局特点2015年W3C正式将其修改为flexbox布局2016年5月官方正式公布最新的稳定的flex布局规范标准,各大浏览器的支持越来越稳定定义Flex是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性作用它能够更加高效方便的控制元素的对齐、排列可以自动计算布局内元素的尺寸,无论这个元素的尺寸

2022-04-12 17:06:01 503

原创 CSS animation

animation用于制作关键帧动画1.animation属性也是一个简写属性,用于设置六个动画属性。用法:animation: name duration timing-function delay iteration-count direction;animation-name 规定需要绑定到选择器的 keyframe 名称 animation-duration 规定完成动画所花费的时间,以秒或毫秒计 animation-timing-function 规...

2022-04-11 21:04:37 72

原创 CSS定位补充及CSS3过渡

1.z-index调整元素定位时重叠层的上下位置z-index属性值:整数,默认值为0设置了position属性时,z-index属性可以设置各元素之间的重叠高低关系z-index值大的层位于其值小的层上方网页中的元素都含有两个堆叠层级未设置绝对定位时所处的环境,z-index是0设置绝对定位时所处的堆叠环境,此时层的位置由z-index的值确定改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序,只需调整绝对定位层的z-index值即可2.背景颜色透明度back

2022-04-10 15:45:10 538

原创 CSS定位

1.什么是定位? position属性用于指定一个元素在文档中的定位方式。并通过top、left、right和bottom来决定该元素最终的位置。语法:position:static | relative | fixed | absolute | sticky;top:0px;left:0px;该属性的使用方法是,先指定元素的定位方式,如:静态定位、相对定位、固定定位、绝对定位、粘性定位;然后再去设置定位后的元素相较于定位位置上下左右的距离。2.1 静态定位(static)...

2022-04-08 22:38:42 76

原创 CSS高级特效-transform

1.2D平移transform:translatetransform: translate(100px, 200px);x轴向右移动100px y轴向下移动200pxtransform: translate(0, 50px);transform: translateY(50px);x轴不移动,y轴向下移动50pxtransform: translateX(-30px);x轴向左移动30px2.2D倾斜transform:skew(ax,ay)transform

2022-04-07 20:21:18 326

原创 CSS浮动及去除浮动

1.CSS浮动语法:float:left;float:right☆加了浮动的img就脱离了文档流,导致div保不住img,img会把div盖住加了浮动的img无法吧div撑住,会造成div塌陷2CSS如何去除浮动2.1清除浮动的第一个方法在浮动元素的后面加一个空的div,设置clear:both2.2清除浮动的第二个方法给父元素加height(一般不建议)2.3清除浮动的第三个方法给父元素加个overflow:hiddenoverflow.

2022-04-06 17:32:38 2501

原创 CSS渐变、CSS3字体及CSS3文本效果

1.CSS渐变1.1线性渐变.box{width: 300px;height: 300px;background: linear-gradient(red,blue)position渐变方向 color1 color2不给方向 默认从上到下的顺序第一种颜色到第二种颜色依次渐变linear-gradient(color1,color2,color3...)linear-gradient(to bottom right,red,blue)从上到下to right从左...

2022-04-05 19:36:13 340

原创 CSS圆角、盒子阴影和背景设置

1.圆角语法案例:.box {width: 300px;height: 300px;border: 3px solid red;border-radius: 150px;(按顺时针的顺序去设置)左上角 右上角 右下角 左下角值越大,圆角越圆利用border-radius做一个圆元素的宽高必须一致圆角的半径为元素宽度的一般,或者直接设置圆角半径为50%}2、盒子阴影语法box-shadow:inset(outset)x-offsety-offse...

2022-04-03 13:42:01 1050

原创 HTML5新增input类型及表单的初级验证

1.HTML5新增input类型1.1 HTML5新增input类型——number<input type="number" name="num" min="3" max="20" step="3" value="3">属性 值 说明 max number 规定允许的最大值 min number 规定允许的最小值 step number 规定合法的数字间隔 value number 规定的默认值

2022-04-01 14:47:43 771

原创 CSS3 新增选择器

CSS3 给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。主要包括结构伪类选择器和伪元素选择器。1. 结构伪类选择器结构伪类选择器主要根据文档结构来选择器元素, 常用于根据父级选择器里面的子元素 。1.1 E:first-childE:first-child 这个选择器用于匹配父元素中的第一个子元素E/* 1.表示选择ul里面的第一个孩子 ,若第一个孩子是li元素,那么背景色就会变成粉色,但是如果ul的第一个孩子不是li元素,那么就不会执行该样式*/ ul li:first..

2022-03-31 21:32:31 47

原创 HTML5新增的结构元素和网页元素

1.什么是HTML5HTML5是用于取代HTML和XHTML的标准版本新特性:新的语义化标签,比如header、footer、nav新的表单控件,比如email、url、search用于绘画的canvas元素用于媒介回放的video和audio元素目前所学内容中全是div的布局:不利于网站对访客的易用性 不利于搜索引擎或者爬虫软件建立索引 不便于后期的代码维护使用什么方法能够解决上面的问题呢?HTML5新增结构元素 HTML5新增网页元素 headerma.

2022-03-30 17:27:51 1636

原创 CSS行内元素和块元素的区别及display属性

1.行内元素和块元素的区别内联元素(行内元素)<span>、<a>、<img/>、<strong>、<em>、<i>块级元素<h1>…<h6>、<p>、<div>、列表内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立块元素会独占一行,其宽度自动填满其父元素宽度行内元素不会独占一行,相邻的行内元素会排列在同一行里直到一行排不下,才会换行,其宽度随元.

2022-03-29 15:25:19 702

原创 CCS盒子模型

CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,主要是由边框、外边距、内边距、和 网页元素(content)组成。1.边框border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色。border是一个复合属性例:border:1px solid red;1像素的红色实线边框1.1边框粗细border-width属性表示边框粗细例:border-width: thick;粗的边框,系统默认5pxborder-width: mediu

2022-03-28 23:32:17 598

原创 文本修饰、垂直对齐方式、伪类选择器、列表样式

1.文本修饰1.1.对于一般的元素而言是默认值,定义的标准文本 没有下划线1.2. a元素是默认就含有下划线a{text-decoration: none;}(该语法可去除a元素的下划线)1.3.设置文本的上划线a{text-decoration:overline;}1.4设置文本的删除线a{text-decoration:line-through;}1.5设置文本的下划线a{text-decoration: underline;

2022-03-27 04:19:01 230

原创 CSS字体属性和CSS文本属性

1.CSS字体属性CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)1.1字体系列CSS使用font-famliy属性定义文本的字体系列。p{ font-family:“微软雅黑”div{font-family:“楷体”,“微软雅黑”}各种字体之间必须使用英文状态下的逗号隔开 一般情况,如果有空格隔开的多个单词组成的字体,加引号 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示1.2字体大小CSS使用font-size属性定义字体

2022-03-25 21:47:02 555

原创 CSS层次选择器和属性选择器

1.层次选择器选择器 类型 功能描述 E F 后代选择器 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内 E>F 子选择器 选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素 E+F 相邻兄弟选择器 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面 E~F 通用兄弟选择器 选择匹配的F元素,且位于匹配的E元素的所有匹配的F元素 层次选择器,就是通过元素之间的层次关系来选择元素的一种基础

2022-03-24 17:47:20 597

原创 CSS入门知识

1.CSS简介CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称,称之为 CSS 样式表或级联样式表。CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。 2.CSS 语法规范CSS语法由两个主要的部分构成:选择器以及一条或多条声明。具体格式如下:<style>选择器{ XX:xx; XX:xx}p{ c...

2022-03-23 21:36:03 309

原创 HTML5的表单标签

帮助自己快速复习,轻松找到标签含义

2022-03-22 17:32:44 559

空空如也

空空如也

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

TA关注的人

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