- 博客(30)
- 收藏
- 关注
RSS订阅原创 函数和闭包
1 . 函数的调用方式：一： 点击按钮调用： <button onclick="fn( )">点击</button>二：函数自动执行： function fn(){ } fn（）2 . 传递参数的方式：一：<button onclick="fn('hello','world')">1点击</button>二： function fn(a,b){document.write(a+b);}fn('hello','world')
2022-05-01 11:53:58
208
原创 Math 对象
1 . Math常用方法ceil() 对小数进行上舍入Math.ceil( 25.1~9 ); 都返回26；Math.ceil(-25.1~6);都返回-25 *因为 -25要比-25.1~9要大floor（） 对小数进行下舍入Math.floor ( 25.1~9 );返回25 ； Math.floor(-25.1~9);都返回-26 *因为-26要比-25.1~9 要小round( ) 把数四舍五入为最接近的数Math.round(25.1~4);都返回25 ； ...
2022-04-28 17:15:34
124
原创 JS 字符串方法
1.trim（）方法 可以去除字符两边的空格，不能去除字符中间的空格' ' 会把空格都去掉if(a.trim()==' '){alert('输入不能为空')}2.includes 不仅字符串能使用，数组也能使用let arr = [' 开心 ',' 非常 ',' 棒 ']let flag = arr.includes('棒')数组中有即为true 没有就是flase3 . toLowerCase 把字符串转换小写let str = ' AABBCC ';l
2022-04-27 16:06:26
105
原创 JS内置对象
1. js的七大数据类型string number boolean symbool undefined null object (array function reg)基本数据类型：string number boolean symbool undefined null引用数据类型object 堆内存（实际的值）和栈内存（内存地址）2. concat（） 用来连接两个或多个字符串（ 不影响原来的字符串 ）replace 可以将字符串中的内容替换为新的内容 （...
2022-04-26 17:10:16
78
原创 JS 时间属性
1. Date对象表示当前的时间 new Date( );指定时间： let oDate = new Date( ' 2022-3-17 12:30:30 ' )；年： oDate.getFullYear()月： oDate.getMonth() 值在0~11之间 ，（0表示1月份，1表示2月份，以此类推）日： oDate.getDate() 值在1~31之间星期：oDate.getDay() 值在0~6之间（ 0 表示星期天）小时： oDate.getHours() ...
2022-04-25 15:59:46
281
原创 JS数组属性
1. concat 属性 用来合并两个数组let arr1 = [1, 2, 3]let arr2 = [4, 5, 6]合并成新数组let arr3 = arr1.concat(arr2)2.unshift 在数组开头添加新元素let arr1 = [1, 2, 3]arr1.unshift(0)document.write(arr1)3.shift 删除数组第一个元素let arr1 = [1, 2, 3]arr1.shift（）4.pop
2022-04-24 14:33:27
277
原创 JS内置对象
1. JS中所有事物都是对象自定义一个对象：汽车 car属性 color 珍珠白属性 price 50w属性 name 保时捷let car = {color:'珍珠白',price: '50w',name: '保时捷',在页面上打印：document.write(car.color + '<br>')document.write(car.price + '<br>')document.write(car.name + '<
2022-04-22 16:41:24
1140
原创 JS 调试
1. 双重循环：制作九九乘法表。思路：（一共要执行9遍，每遍要执行多少次由第几遍决定）代码：效果:2.break和continue的区别 （都表示终止执行）break （用于终止循环，在break后面的语句不再执行）continue（只能在循环结构中使用，退出本次循环，继续后面的循环）3.调试代码的几种方法：一 ： alert二： debugger三：console.log(i)...
2022-04-21 17:23:30
313
原创 【无标题】
1 注释：单行注释以 // 开头。// ....................................多行注释多行注释以 /* 开始，以 */ 结尾。/* ....................................*/2. 选择结构：if选择结构：if(xq=='周一'){ document.write('新的一周开始了') } if(xq=='周二'||xq=='周三'||xq=...
2022-04-18 22:59:19
102
原创 JS入门
1. JavaScript的基本结构：<script> </script> （ 可以包含在文档中的任何地方 ）。在文档中写入 ：document.write('文字')；可以加上标签：document.write('<h1>文字</h1>')；外部引入js： <script src="./js/1.js" ></script>；按钮点击 ：<input type="button" val
2022-04-17 16:07:56
772
原创 CSS实现水平垂直居中
1. 行内元素实现水平垂直居中： text-align: center; line-height: ;2.块元素实现水平垂直居中的四种方式：①：使用弹性盒模型.box{display：flex；justify-content：center；alingn-items：center；}②：用绝对定位配合magin（缺点：需要只要准确的宽高）.box{position：relative；}div{position: absolute;left:50%
2022-04-15 16:23:35
131
原创 CSS媒体查询
1.媒体查询：@media screenscreen：表示所有电子设备的屏幕 print：表示打印机屏幕 all：表示所有设备小于500px：max-width：500px大于500px：min-width：500px屏幕小于500px时字体显示成红色： @media all and （max-width：500px）{div{ color：red；}}屏幕大于700px时字体成蓝色：@media all and （min-width：700px）{div{
2022-04-14 16:40:33
6225
原创 Flex
1.flex实现水平垂直居中display: flex;justify-content: center;（主轴是水平方向，水平方向居中 ）align-items: center;（ 让子盒子在垂直交叉轴方向居中 ） }效果：2. align-items 只能定义一根轴线的对齐方式 align-content 用来定义多根轴线的对齐方式属性值：flex-start 和交叉轴起点对齐flex-end 和交叉轴终点对齐center 和交叉轴的中点对齐spa..
2022-04-13 16:05:33
102
原创 Flex弹性布局
1.行内元素和块元素都可以设置flex块级元素： display : flex;行内元素： display : inline-flex;flex-direction：设置主轴的方向。row（默认值 左到右的顺序）row-reverse （水平位置从右往左）column：主轴是垂直方向从上到下 row-reverse：主轴是垂直方向从下到上2. flex-wrap 默认情况下一条轴是不会自动换行的。换行是 flex-wrap：wrap（第一行在上面）flex-wrap：wr
2022-04-12 17:03:03
204
原创 CSS动画
1.animation动画 由两个部分组成：①设置关键帧 ②调用关键帧关键帧 例如：@keyframes donghua {0% {width:0;}50% {width:40px;}100% {width:80px;} }调用关键帧： animation: donghua 3s linear 0.5s infinite alternate;infinite：循环播放alternate ：原样返回2.视距（可以理解是物体距离自己的眼睛的距离，距离越短，会感觉物..
2022-04-11 16:13:53
340
原创 CSS定位
1.相对定位：position: relative;（相对于自身位置进行偏移，原本的位置会被保留下来）例如：（距离左边10px，距离底部20px）第二个盒子： position: relative; left: 10px; bottom: 20px;2.绝对定位： position: absolute;（绝对定位会以最近的已经定位的元素为基准进行偏移，一般使用relativ...
2022-04-08 16:56:47
169
原创 CSS高级属性：变形
1. 2D位移：transform：translate（x，y）translate（20px，15px）：x轴向右位移20px，y轴向下位移15pxtranslate（15px，0）等同于 translatex（15px）：表示只有x轴向右位移15pxtranslate（0，20px）等同于translatey（20px）： 表示只有y向下平移20px。2.2D缩放：transform：scale（x，y）☆：宽高比例按倍数来scale（1,1） 表示原型，不放大也不缩小。sca
2022-04-07 15:00:51
708
原创 浮动
1.浮动：div{flot：left} 向左浮动 div{flot：left}向右浮动消除浮动的四种方法：一：浮动元素后面加上空的div 设置clear：both二：给父元素增加高度，style="height: " （简单，但会降低扩展性，要不断调整高度）三：父级添加overflow属性（下拉列表场景中不能使用）四：父级添加伪类after，、.clear::after{content: “ ”; 添加内容为空display: block; 把添加的内容转化为块元素c
2022-04-06 17:25:28
373
原创 css3渐变
1.渐变色线性渐变：Linear gradientslinear-gradient ( position, color1, color2,…) position表示方向background: linear-gradient(to right，red,green,yellow)从左到右渐变为红 绿 黄 效果：background: linear-gradient(to bottom， right，red,green,yellow)最后延伸到右下，那就是从左上角到右下角渐变为红 ..
2022-04-05 15:03:36
308
原创 css
1.边框圆角.box{width: 300px;height: 300px;border:3px solid red}四个值：border-radius：10px 20px 30px 40px；顺时针设置圆角的大小，左上 右上 右下 左下。三个值：border-radius：10px 20px 30px；左上角是10px 右上角和左下角是20（对角线） 右下角是30两个值：border-radius: 20px 50px;表示左上角和右下角是20（对角线）右上
2022-04-04 16:47:52
53
原创 HTML5
1.input类型：<input type="number" name="num" id="" min="2" max="10" step="2" value="2">max number 规定最大值 min number规定最小值step number 规定间隔的数字 value number 规定默认值2.表示时间选择年月日：<input type="date" name="date">选择月和年：<input type="month" name
2022-04-01 17:17:18
40
原创 CSS高级选择器
1.p:first-of-type{ background: red;}p:first-of-type 选择属性其父元素的首个p元素的每个<p>元素p:last-of-type{ background: red }p:last-of-type选择属性其父元素的最后p元素的每个p元素p:only-of-type{ background:red; }p:...
2022-03-31 16:59:15
154
原创 HTML5的元素
1.100vh表示整个屏幕的高度 viewport height100vw就是整个屏幕的宽度 viewport widthvh是视口的整个高度、2.HTML5是用于取代HTML和XHTML5的标准版本HTML5新增的标签有：header ，nav，main，footer等等header：一般是头部信息nav：一般是导航的内容section：用来包裹一个内容aside：一般表示为作用栏article：一般表示正文内容footer：表示页面中的脚注3.网页元素
2022-03-30 15:39:31
221
原创 css
1.内边距：上内边距：padding-top右内边距：padding-right下内边距：padding-bottom左内边距：padding-left顺时针顺序：padding：10px 20px 30px 40px2.盒子原本盒子的宽度= （元素内容）content的宽度+padding +border盒子的宽度或高度等于元素内容的宽度或高度(怪异盒模型)元素继承父元素的盒子模型模式 （会继承body的怪异盒子模型的模式）3.块元素和行内元素块元素可以设置wi
2022-03-29 17:38:00
267
原创 盒子模型
盒子模型是由 margin + border + padding + 网页元素（content）组成的1.边框的颜色上边框的颜色：border-top-color右边框的颜色 ：border-right-color:red下边框的颜色：border-bottom-color左边框的颜色：border-left-colorborder-left-color: red blue第一个red表示上下边框的颜色 第二个表示左右边框的颜色border-color:red yello
2022-03-28 17:39:53
369
原创 css
1.文本修饰a元素是默认就含有下划线。没有下划线：text-decoration: none设置文本的上划线：text-decoration:overline设置文本的删除线：text-decoration:line-through设置文本的下划线：text-decoration: underline2.垂直对齐方式<img src="" > 我是图片让图片后面的文字居中：vertical-align:middle让图片后面的文字向上：vertical-ali
2022-03-27 17:44:39
360
原创 CSS字体属性
字体属性1.字体：宋体例如：p{font-family: 宋体;}也可以写成：p{font: 宋体;}<p>我是段落<p>2.字体大小：p{font-size:12px;}<p>我是段落<p>3.字体风格.{ font-style:italic; }{ font-style: oblique;}两种都表示斜体。...
2022-03-25 15:34:35
709
原创 CSS的高级选择器
层次选择器1.后代选择器：两个选择符之间必须要以空格隔开。例如： ul li{color:red;}2.子选择器：li > p{color:red;}3.相邻兄弟选择器：选择器active相邻的下一个li的背景变色例如：.active + li{background:red;}4.通用兄弟选择器...
2022-03-25 15:03:13
1342
原创 HTML部分按钮以及CSS选择器
1.隐藏域：<input type="hidden" name=""value="" readonly> 作用是不让用户在页面上看见readonly是只读属性，作用是只是让用户看到，但不想让用户修改2.按钮禁用：<input type="submit" value="提交" disabled >disabled是禁用属性，目的是把按钮原来的功能禁用掉3.增强鼠标可用性：<input type="radio" name="a" id="man" value="男"
2022-03-23 16:44:10
531
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人