- 博客(35)
- 收藏
- 关注
RSS订阅原创 this指向
一、thisthis随处可在，函数内部的另一个对象，this相当于在调用时的作用域this在不同环境下，不同作用下，表现的也不同，谁调用函数，this就指向谁1、全局作用下，this指向的是window <script> // 1、全局作用下，this指向的是window console.log(window); console.log(this); console.log(window==this);<
2022-05-16 15:06:48
176
原创 BOM屏幕宽高
一、调整窗口大小属性window.onresize 是调整窗口大小加载事件，当触发时就调用的处理<!DOCTYPE html>浏览器 可视窗口的尺寸1、内部的宽高（1）散装属性（兼容性）innerWidth 当前屏幕的宽度innerHeight 当前屏幕高clientWidth 当前屏幕的宽度clientHeight 当前屏幕高（2）浏览器窗口封装二、滚动条移动尺寸1、散装高度 document.documentEl...
2022-05-04 17:19:23
157
原创 JS——作用域、闭包
目录一、常用系统函数isNaN()二、无参函数1、第一种调用方式：按钮调用2、第二种调用方式：fn() 函数名直接调用函数可以自己执行，不一定总是使用点击事件三、传递参数1、按钮里传递2、函数名里直接传参：fn(a，b)四、return1、函数通过return将值返回调用它的地方2、函数会停止执行，并返回指定的值五、变量1、全局变量定义在函数外部是全局变量，网页上的所有脚本和函数都能访问它。2、局部变量六、作用域1、全局作用域...
2022-05-02 22:10:07
58
原创 js—— Math对象
一、 Math对象Math是一个内置对象，具有数学常数和函数的属性和方法，用于执行数学任务。二、Math对象方法1、Math.ceil 对数进行向上舍入 <script> // ceil 对数进行向上舍入 document.write(Math.ceil(-24.6)+'<br>'); //返回-24 document.write(Math.ceil(25.5)+'<br>');
2022-04-28 15:20:31
132
原创 js——string对象属性（二）
一、string常用方法1、trim()：字符串中去除字符左右两边的空格（不能去除字符里面的空格）。两种校验是否为空的方法： <script> /* 第一种校验不能为空的方式 包括如输入空格 */ let email = prompt('请输入邮箱') if(eamil.trim()==''){ alert('输入不能为空') } /* 第二种校验不能为空的方式 包括
2022-04-27 16:30:10
54
原创 Js——String对象
一、String对象String 全局对象是一个用于字符串或一个字符序列的构造函数，一个字符串可以使用单引号或双引号。二、String的创建三、String的常用方法1、 length 字符串长度2、charAt(索引) 返回在指定位置的字符不给索引的话，默认为0.如果给的索引超过了索引的最大值，或者小于0，那么都会返回空的字符串。3、indexOf(字符) 返回字符所在位置的索引这里的索引也是从零开始，最后一位的索引为str.length-1....
2022-04-26 19:17:22
289
原创 js——Date对象
一、DateDate：对象用于处理日期和时间//当前时间点let oDate = new Date(); //表示构建一个指定时间对象（格式必须是字符串的类型。）let oDate = new Date("4 24,2022,14:58:12");let oDate = new Date('1999-01-01 11:48:50');// 月份是从0 开始算的 0表示1月 1表示2月 2表示3月 3表示4月 以此类推。二、Date常用方法1、Date.getFullYear(
2022-04-25 15:30:54
388
原创 js——数组的使用
一、对象创建一个 JavaScriptDate实例，该实例呈现时间中的某个时刻。Date对象则基于Unix Time Stamp，即自1970年1月1日零时起（UTC）起经过的毫秒数。
2022-04-25 01:04:44
981
原创 js——函数
一、函数的概念就是可被重复调用执行的代码块。声明方式：严格意义上两种方式，但还有匿名函数二、函数的定义function 函数名(参数1, 参数2, ... , 参数3) { // 需要执行的代码块 }1、function是一个关键字， 后面要加空格;2、函数名的命名规范和变量命名一样, 只能是字母、数字、下划线、美元符号, 不能以数字开头, 一般采用驼峰式命名;3、函数名后的( )中放置函数形参, 形参可以为任意多个(意味着可...
2022-04-22 17:06:06
342
原创 js——循环结构
1、for 循环 语法： for（初始化语句; 条件判断; 条件控制语句）{ 循环执行语句}for循环的流程是：①执行初始化语句②执行条件判断语句，看结果是true还是false 如果为false，结束循环 如果为true，继续循环③执行循环体语句④执行条件控制语句⑤...
2022-04-21 17:22:06
202
原创 JS——选择结构
一、if 结构语法： if（条件）{ JavaScript语句 } 该语句要求条件必须为真，才会执行{}里面的JavaScript语句。这里的条件 只会返回布尔类型 不是true 就是false <script> var result1 = 61; var resul...
2022-04-20 15:38:08
834
原创 js的输出语句及字符串转换
一、输出语句1、在页面打印直接在页面中显示出你所输入的内容2、弹出框3、控制台打印语句，普通打印4、打印一个错误提示5、打印一个警告提示6、打印一个详细提示7、计算时间8、输入提示框 <script> 8、输入提示框 var result = prompt('输入你的考试成绩', 60 ) //只要在输入框里输入的字，都是字符串类型 document.w...
2022-04-20 01:18:17
1404
原创 js运算符
一、运算符1、算术运算符运算符 描述 + 加法 - 减法 * 乘法 / 除法 % 取模（取余） ++ 递加，自增1 -- 递减，自减1 （1） + 加法① 两个都是数字类型，直接相加②一个是数字类型，另一个是字符串类型这种情况相加 + 号代表拼接，数字类型会进行隐式数据类型转换，转换成字符串类型，和字符串拼接2、- 减法与加法不同 ，减法、乘法、除法会把字符串转成数字类型，再和数字进行相...
2022-04-18 17:14:13
597
原创 初学js（JavaScript）
告别画网页的我们，正式进入了js的学习，其实刚刚才开始，却觉得有一点点难了呀，但是希望大家好好坚持，好好消化呀！什么是JavaScript？JavaScript是一种基于对象和事件驱动的脚本语言，是由ecmascript(规范) bom(浏览器对象) dom(元素对象)组成。而今天我们就来学习一下ecmascript(规范)吧！ECMAScript是一种语法标准包括了语法、变量和数据类型、运算符、逻辑控制语句、关键字、保留字、对象一、使用方法1、内置<body&.
2022-04-17 14:41:10
392
原创 CSS3居中显示的方法
一、文字居中显示盒子内的文本文字内容居中，只要加上水平方向居中text-align:center; 垂直方向居中line-height；这样就可以实现文字在容器中居中显示。☆但是注意，设置的line-height值要与盒子的高度值一样！2、多行文本居中①多行文本不固定高度的垂直居中，通过设置padding来实现②表格属性实现行内元素居中固定高度的垂直居中：父元素使用display: table， 子元...
2022-04-15 19:25:35
1953
原创 CSS3 媒体查询（响应式布局）
一、媒体查询媒体特性： width 视口(窗口)的宽度 height 视口(窗口)的高度 min-width 视口的最小宽度（视口大于等于指定宽度时生效） max-width 视口的最大宽度（视口小于等于指定宽度时生效）语法：@media screen and (min-width: )@media screen and (max-width: )媒体类型...
2022-04-14 16:48:19
739
原创 Flex布局（2）
上次内容我们已近简单介绍过Flex布局及他的一些基本属性，今天在昨天的基础上，让我们再深入了解一下吧！1、水平垂直居中justify-content: center 让子盒子item在水平方向居中align-items: center 让子盒子item在垂直交叉轴方向居中想要实现水平垂直居中，首先要知道到底是以谁为基准，也就是说要在哪个里面实现垂直居中这是让粉色盒子在红色边框的盒子中水平居中，所以红色边框盒子作为基准，设置属性值。当我想要红色边框的盒子也在页面的显示水平垂直居
2022-04-13 18:35:09
128
原创 Flex布局
一、Flex布局Flex是Flexible Box的缩写 flex布局表示弹性布局，可以为盒状模型提供最大的灵活性。弹性盒子是由弹性容器和弹性子元素组成，弹性容器就是父元素，弹性子元素就是父元素里面的子元素。1、任何一种元素都可以指定为flex布局flex设定布局的方法和之前的方法不一样。它是给父元素设定属性，来确定子元素的布局模式。之前讲的布局，是通过设定元素自身来确定自己的布局模式。语法：块级元素：display：flex行内元素：display：inline-flex
2022-04-12 17:48:58
877
原创 CSS 3D效果
一、动画效果1、Transform属性Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。有了这个属性，接下来就是设置动画的时间和动画的表现形式啦。2、animation动画属性语法：animation：（ animation-name animation–duration animation-timing-functionanimation-delayanimation-iteration-count animat...
2022-04-11 18:50:12
5876
原创 CSS3过渡
一、transitiontransition的过渡就是平滑地改变一个元素的css值，使元素从一个样式逐渐过渡到另一个样式，是一种动画转换的过程，如渐现、渐弱、动画快慢等。语法：transition:[transition-property transition-duration transition-timing-function transition-delay ]当我们知道语法是，我们要来了解一下这些属性表示的意思是什么1、transition-propertypro...
2022-04-10 01:05:40
424
原创 CSS3定位
一、定位使用 position属性在文档中的实现定位。并通过属性值top、left、right和bottom来决定该元素的位置。语法：position：static | relative | fixed | absolute | sticky；top：0px；left：0px；1、static 静态定位该属性值没有定位， 以标准流方式显示（它将忽略top、bottom、left、right、z-index声明）2、absolute 绝对定位生成绝对定位的元素，相对自身原来的位
2022-04-08 17:59:18
556
原创 CSS3高级特效
一、变形 transformCSS3变形是一些效果的集合，如：平移、旋转、缩放、倾斜效果。每个效果都可以称为变形（transform），它可以分别操控元素发生平移、旋转、缩放、倾斜等变化。1、translate(tx,ty)：平移函数，基于X、Y坐标重新定位元素的位置tx x轴（横坐标）移动方向长度ty y轴 （纵坐标）移动方向长度① 设置两个值，x轴向右移动200px，y轴向下移动50px②x轴不移动，y轴向下移动100px③y轴不移动，x轴向右移动10...
2022-04-07 18:36:06
1207
原创 浮动及清除浮动
一、浮动1、float： 用于浮动left 元素向左浮动right 元素向右浮动non 默认值，元素不浮动①div盒子不加浮动，作为块级元素占据整行，文字会自动换行。②div盒子加了左浮动，float：left；呈现出一种文字环绕盒子的效果。两种结果，见下图：二、消除浮动我们又感受到浮动的好处，但同样的使用了浮动以后一会造成一些影响，会造成父级高度塌陷。解决父级边框塌陷的方法：下图的蓝色和粉色盒子都给了100px的宽高，外面包裹的盒子只给了一个宽300p
2022-04-06 18:59:25
865
原创 CSS3背景渐变及文本效果
一、渐变1.Linear Gradients—线性渐变颜色沿着一条直线过渡：从左到右、从右到左、从上到下等1、background: linear-gradient(position , color1 ,color2, ....)；/* position 渐变方向，color1 第一种颜色 color2第二种颜色 */①渐变默认方向为从上到下，即to bottom，可省略不写；②渐变方向的书写格式是：to 具体方位名词，比如to right，就是到右边，开始方向为到达方向的相..
2022-04-05 20:43:16
284
原创 CSS3边框及盒子阴影
一、CSS3边框1、border-radius 圆角边框按照顺时针的顺序去设置 左上角，右上角，右下角，左下角 ，值越大，圆角越圆。①设置一个值，四个圆角同时变化②设置两个值，第一个值为左上、右下圆角的值，第二个值为右上、左下圆角的值（🔺 是对角关系）③设置三个值，第一个值为左上圆角的值，第二个值为右上、左下圆角的值 ，第三个值为右下圆角的值④设置四个值，按照左上、右上、右下、左下的顺时针顺序⑤圆形利用border-radius属性制作圆...
2022-04-04 02:03:28
2965
原创 HTML5新增input类型
一、HTML5新增input类型1、type="date" 表示选择年、月、日,可选择，可手输样式图：2、type="month" 表示选择年、月样式图：3、type="week"表示选择年、周样式图：4、type="time" 表示选择具体时间，只有时和分钟样式图：5、type="datetime 表示选择年、月、日、时间(指的是UTC时间，格林威治时间)（文本框相似，需要手动输入具体时间）样式图：6、type...
2022-04-01 17:39:23
1770
原创 CSS3高级选择器
一、新增全局属性1、contenteditable 规定是否允许用户再编辑内容2、hidden 对元素进行隐藏（规定对元素进行隐藏hidden和input：hidden本质上还是利用display：none来实现）二、CSS3高级选择器1、first-of-type 选择属性其父元素的首个元素2、last-of-type 选择属性其父元素的最后一个元素以下面的小练习...
2022-03-31 18:56:33
595
原创 HTML5
前言：HTML5 的新增特性主要是增加了一些新的语义化标签、新的表单和新的表单属性等。一、HTML5 新增结构元素我们之前布局时，全都是使用 div 来做的。但是div 对于搜索引擎来说，不利于网站对访客的易用性，不利于搜索引擎或者爬虫软件建立索引，更 不便于后期的代码维护。而新增的结构元素，增加了语义化，方便后期的维护。1、结构元素①<header>：头部标签 <!-- 一般是用在头部信息上 -->②<main>：主体标签 <...
2022-03-30 17:40:53
927
原创 CSS盒子模型
一、内边距（包裹在元素里面）1、padding： top 设置上内边距 right 设置右内边距 bottom 设置下内边距 left 设置左内边距...
2022-03-29 18:24:06
450
原创 CSS的样式
一、文本修饰ext-decoration: none; 默认值，定义的标准文本， 没有下划线 overline; 设置文本的上划线 ine-through;设置文本的删除线 underline; 设置文本的下划线☆a元素是默认就含有下划线二、垂直对齐（——图片和文本）vertical-alig...
2022-03-27 21:38:28
256
原创 CSS字体、文本样式
字体样式front-family 字体类型 front-size 字体大小 front-weight 字体粗细 front-style 字体风格文本样式 颜色color rgb（颜色） RGBA（颜色和透明度） 文本对齐方式 text-align 首行缩进text-indent 行高 line-height ...
2022-03-25 23:47:57
630
原创 CSS高级选择器
CSS高级选择器层次选择器后代选择器 子选择器 相邻兄弟选择器 通用兄弟选择器 属性选择器E [attr] E [attr=val] E [attr^=val] E [attr$=val] E [attr*=val]一、 层次选择器1、后代选择器
2022-03-24 23:56:37
129
原创 初入CSS
导入CSS的方式:行内样式(直接标签元素内写) 内部样式(style) 外部样式(单独的css文件)优先级：行内样式>内部样式>外部样式☆就近原则外部样式链接外部样式 导入样式
2022-03-23 18:29:53
49
原创 HTML--学习内容（1）
目录表单用标签页来使用文本输入框密码框表单用<from>标签页来使用<form action="提交地址" method="get/post"action:表单提交的位置 methed: post/get提交方式 get方式提交:我们可以在页面中看到我们提交的信息，不安全 post:比较安全，传输大文件。 文本输入框<input type=“text”> value=“值” , 默认初始值,可更改 maxlength=字符的长度.
2022-03-22 16:31:05
235
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人