- 博客(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
267
原创 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
182
原创 JS 字符串方法
1.trim（）方法 可以去除字符两边的空格，不能去除字符中间的空格 ' ' 会把空格都去掉 if(a.trim()==' '){ alert('输入不能为空') } 2.includes 不仅字符串能使用，数组也能使用 let arr = [' 开心 ',' 非常 ',' 棒 '] let flag = arr.includes('棒') 数组中有即为true 没有就是flase 3 . toLowerCase 把字符串转换小写 let str = ' AABBCC '; l
2022-04-27 16:06:26
171
原创 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
123
原创 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
355
原创 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
345
原创 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
1194
原创 JS 调试
1. 双重循环：制作九九乘法表。 思路：（一共要执行9遍，每遍要执行多少次由第几遍决定） 代码： 效果: 2.break和continue的区别 （都表示终止执行） break （用于终止循环，在break后面的语句不再执行） continue（只能在循环结构中使用，退出本次循环，继续后面的循环） 3.调试代码的几种方法： 一 ： alert 二： debugger 三：console.log(i) ...
2022-04-21 17:23:30
383
原创 【无标题】
1 注释： 单行注释以 // 开头。 // .................................... 多行注释 多行注释以 /* 开始，以 */ 结尾。 /* ....................................*/ 2. 选择结构： if选择结构： if(xq=='周一'){ document.write('新的一周开始了') } if(xq=='周二'||xq=='周三'||xq=...
2022-04-18 22:59:19
150
原创 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
828
原创 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
256
原创 CSS媒体查询
1.媒体查询： @media screen screen：表示所有电子设备的屏幕 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
6481
原创 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
175
原创 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
280
原创 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
387
原创 CSS定位
1.相对定位：position: relative;（相对于自身位置进行偏移，原本的位置会被保留下来） 例如：（距离左边10px，距离底部20px） 第二个盒子： position: relative; left: 10px; bottom: 20px; 2.绝对定位： position: absolute;（绝对定位会以最近的已经定位的元素为基准进行偏移，一般使用relativ...
2022-04-08 16:56:47
283
原创 CSS高级属性：变形
1. 2D位移：transform：translate（x，y） translate（20px，15px）：x轴向右位移20px，y轴向下位移15px translate（15px，0）等同于 translatex（15px）：表示只有x轴向右位移15px translate（0，20px）等同于translatey（20px）： 表示只有y向下平移20px。 2.2D缩放：transform：scale（x，y）☆：宽高比例按倍数来 scale（1,1） 表示原型，不放大也不缩小。 sca
2022-04-07 15:00:51
855
原创 浮动
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
427
原创 css3渐变
1.渐变色 线性渐变：Linear gradients linear-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
432
原创 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
102
原创 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
85
原创 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
234
原创 HTML5的元素
1.100vh表示整个屏幕的高度 viewport height 100vw就是整个屏幕的宽度 viewport width vh是视口的整个高度、 2.HTML5是用于取代HTML和XHTML5的标准版本 HTML5新增的标签有：header ，nav，main，footer等等 header：一般是头部信息 nav：一般是导航的内容 section：用来包裹一个内容 aside：一般表示为作用栏 article：一般表示正文内容 footer：表示页面中的脚注 3.网页元素
2022-03-30 15:39:31
261
原创 css
1.内边距： 上内边距：padding-top 右内边距：padding-right 下内边距：padding-bottom 左内边距：padding-left 顺时针顺序：padding：10px 20px 30px 40px 2.盒子 原本盒子的宽度= （元素内容）content的宽度+padding +border 盒子的宽度或高度等于元素内容的宽度或高度(怪异盒模型) 元素继承父元素的盒子模型模式 （会继承body的怪异盒子模型的模式） 3.块元素和行内元素 块元素可以设置wi
2022-03-29 17:38:00
307
原创 盒子模型
盒子模型是由 margin + border + padding + 网页元素（content）组成的 1.边框的颜色 上边框的颜色：border-top-color 右边框的颜色 ：border-right-color:red 下边框的颜色：border-bottom-color 左边框的颜色：border-left-color border-left-color: red blue 第一个red表示上下边框的颜色 第二个表示左右边框的颜色 border-color:red yello
2022-03-28 17:39:53
480
原创 css
1.文本修饰 a元素是默认就含有下划线。没有下划线：text-decoration: none 设置文本的上划线：text-decoration:overline 设置文本的删除线：text-decoration:line-through 设置文本的下划线：text-decoration: underline 2.垂直对齐方式 <img src="" > 我是图片 让图片后面的文字居中：vertical-align:middle 让图片后面的文字向上：vertical-ali
2022-03-27 17:44:39
420
原创 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
819
原创 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
1443
原创 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
657
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人