- 博客(30)
- 收藏
- 关注
RSS订阅原创 JS函数及闭包
函数的调用方式1.<button onclick="fn()">按钮</button>2. fn(); function fn(){ // alert(1) for(var i=0;i<5;i++){ document.write('hello js<br>'); } }函数的传参方式1.fn('hello','world')2.<butto...
2022-05-02 15:12:26
218
2
原创 JS内置对象Math
Math.pow(n,m) n的m次方Math.pow(2,3) 在这里表示2的3次方ath.floor(3.14)向下取整 往大的值取Math.floor(3.14)向上取整 往小的值取Math.round(2.3) 四舍五入注意！负数的时候 不会四舍五入 会直接舍去Math.random()随机数 大于等于0 小于等于1 包括0 不包括1Math.floor(Math.random() * (max - min+1)) + min; ...
2022-04-28 16:59:42
259
原创 校验和截取
第一种校验不能为空的方式 包括如输入空格if(a.trim()==' '){alert('输入不能为空')}第二种校验不能为空的方式 包括如输入空格if(!a.trim().length){alert('输入不能为空')}else if(a.indexOf('@')==-1||!a.includes('.')){alert('必须包含@和.')}else{document.write( a.split('@',1));}字符串用trim()方法 可以去除 ..
2022-04-27 19:27:03
283
原创 JS String对象的使用
使用构造函数String实例化出一个字符串对象let str=new String('123123')s的七大数据类型string number boolean symbool undefined null object(array function reg)js的构造函数String Number Boolean Symbool Object Array Function RegExp(正则)基本数据类型string number boolean symbool u
2022-04-26 17:25:00
390
原创 JS日期和时间戳
new Date() 可以理解为 构造函数Date使用new实例化一个时期对象oDatelet oDate = new Date(); 返回当前日期和时间var tdata = new Date('2021-10-10 11:48:50')指定时间，返回时间为2021年10月10日 11:48:50注意！！格式可以多种显示但是必须是字符串类型oDate.getFullYear()返回年份 值为4位数let oDate = new Date('2020-2-22 11:22:33');
2022-04-26 00:17:30
372
原创 JS数组和数组方法
let obj = {name:'张三',age:30,car:"保时捷"}for(var key in obj){document.write( obj[key] )}在以上的代码里，变量key的类型是字符串。obj[key]就等于obj["name"] obj["age"] obj["car"]使用for-in循环可以把属性名打印出来 obj["name"]可以把name的属性名打印出来打印出 obj对象中属性名叫name的值对象里面的属性名的类型是字符串
2022-04-24 22:56:14
233
原创 javascript数组
数组是一种特殊的变量，它能够一次存放一个以上的值。删除对象属性 delete添加对象属性 addnew Array() 几个数组在最后的位置添加字符串 car.pushjoin()方法里面可以添加参数，以什么参数为分割符号reverse()将数组进行反转sort()将数组进行排序将数组排序及反转，就是从大到小的顺序...
2022-04-22 17:09:40
1313
原创 调试代码和字符串转换数字
1.代码里直接加debugger检查-控制台 先刷新然后点击跳过或者直接按F10进行下一步，点击播放按钮或者按F8终止调试；2.alert弹出框查询3.console.log() 直接点击检查在控制台里查询，使用较多。console.log() 控制台打印console.error 打印错误提示console.warn 打印警告console.info 打印详细提示字符串转换成数字的几种方式1.parseInt 会把字符串转换成整数 小数点会舍去2.parse
2022-04-21 22:46:26
561
原创 for循环、while循环、do-while循环
for循环：<script>for(var i=1;i<10;i++){document.write('这是for循环'+'<br>')}</script>while循环：先判断再操作；<script>let j=71;while(j>=1){document.write('<hr style="width: '+ j +'%;">')j=j-10;</script>
2022-04-20 23:50:10
203
原创 JS for循环和for in循环
先使用变量后用var定义变量 会出现变量提升，给变量一个初始值undefined使用let不存在变量提升，需要先定义变量，再使用变量否则会报错：annot access 'str' before initializationecmascript第六版本 提供了新的声明变量的关键字 let...
2022-04-20 01:57:59
570
原创 js 运算符
JS算术运算符+加法；-减法；乘法*；/除法；++递增；--递减；JS赋值运算符+=；-=；*=；/=；%=；=；JS比较运算符==等于===等值等类型！=不相等！==不等值或不等型>=大于等于<=小于等于JS逻辑运算符&&与||或！非...
2022-04-19 00:53:32
239
原创 行内元素居中、块级元素居中
行内元素居中水平居中 text-align：center；垂直居中 line-height=height；不固定高度垂直居中可以使用paddin；固定高度垂直居中display:table-cell;vertical-align:middle;块级元素居中1、使用绝对定位配合margin 但是必须要固定宽高2、transform:translate(50%,-50%)3、margin(0 auto);必须要有固定宽高4、flex弹性..
2022-04-15 23:47:26
383
原创 flex容器子元素属性
order 属性规定 flex 项目的顺序默认值为0，必须是数字，取值越小越靠前align-self 属性规定弹性容器内所选项目的对齐方式flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少flex-shrink属性规定某个 flex 项目相对于其余 flex 项目将收缩多少flex-basis属性规定 flex 项目的初始长度（固定宽 优先级比width高，同时设置会展示flex-basis，还是会被压缩宽度，除...
2022-04-14 23:22:22
976
原创 弹性布局flex
order 项目排列 取值越小越靠前 默认值0align-self 单个项目与其他项目不一样.item:nth-of-type(1){align-self:flex-start;}flex-grow 把剩余的宽度都充满，如果每个项目取值都设为1 会平均分配{flex-grow：1；}使用这个属性平均分配后就不要使用换行{flex-shrink：1}表示是否被压缩，默认是1 ，表示被压缩。取值0表示不压缩，保持设置的尺寸flex-basis （固定宽） 优先级比widt
2022-04-14 02:32:46
220
原创 flex弹性盒布局
采用flex布局的元素称为flex容器，所有子元素自动称为容器成员，称为flex项目分为水平主轴和垂直交叉轴，默认是沿主轴排列块级元素：display:flex；行内元素：disp：inline-flex；注意 添加前缀-webkit兼容谷歌...用flex布局以后，flex item的float、clear、vertical-align属性都会失效flex-direction：决定主轴排列反向flex-direction：row；（默认，从左到右顺序排列）fl.
2022-04-12 20:38:00
325
原创 CSS3动画
CSS3动画：可通过设置多个节点精确控制一个或者一组动画，常用实现复杂的动画效果。1.设置关键帧（定义动画）@keyframes 名称{0%{transform:translatex(10px);}100%{transform:translatex(100px);}}@keyframes 名称{from{transform:translate(0,0);}to{transform:translate(100px,0);}}动画序列：0%是开始，100%是完成。百分比取
2022-04-12 00:26:36
298
原创 CSS过渡
transition过渡过渡动画：是从一个状态渐渐的过渡到另外一个状态transition：要过渡的属性 花费时间 运动曲线 何时开始；1.属性：宽度、高度、内外边距。一般使用all，表示所有属性都有2.花费时间：单位是秒 需要要写 如0.5s3.运动曲线：ease（默认值）慢速开始然后变快，慢速结束linear 匀速；ease-in 慢速开始；ease-out慢速结束；ease-in-out 慢速开始和结束；4.何时开始：单位是秒0 （默认值）元素过渡效果立即执行正值：
2022-04-11 00:21:23
2551
原创 position定位
为什么需要定位？某个元素可以自由的在一个盒子内移动位置或者固定屏幕中某个位置并且可以压住其他盒子定位的组成：定位：将盒子定在某一个位置，相当于摆放盒子，按照定位的方式移动。定位=定位模式+边偏移定位模式：static 静态模式；relative相对定位absolute绝对定位fixed固定定位边偏移：top、bottom、left、right ；决定了元素的最终位置静态定位static 是默认定位方式 无定位的意思，按照标准流特性摆放位置，没有边偏
2022-04-09 01:11:41
230
原创 CSS3变形transform
2D移位: transform（x,y）;transform：translate（10px,20px）;元素移位至x轴10像素，y轴20像素的坐标位置；transform:translate（0,10px）;元素移位至y轴10像素的坐标位置，x轴不变；transform:translateX（10px）；元素移位至x轴10像素的坐标位置；transform:translateY（10px）；元素移位至y轴10像素的坐标位置；注意！！X值可以为负值，会向左边移位；2D倾斜.
2022-04-07 21:01:58
760
原创 浮动和清除浮动
浮动 float:left;right;none;注意！！加了浮动的img可能会出现两种情况：脱离文档流，导致div包不住、div高度塌陷（可以用以下4种方法清除浮动，比较推荐使用伪类）清除浮动1.clear：left;right;none;both；在浮动元素后面加上一个空的div，设置clear：both；2.给父元素设置高度3.给父级元素添加overflow:hidden;overflow:visible；默认值 超出元素的内容不会被修剪 但是会呈现在盒子外overflow
2022-04-06 23:32:54
163
原创 CSS3渐变和CSS3文本阴影
css渐变：线性渐变：linear-gradientlinear-gradient（position,color1,color2...）position渐变方向 如果不写方向，默认从上到下，从第一种颜色到第二种颜色渐变，也可多种颜色径向渐变：radial-gradientradial-gradient（to top,color1,color2）to top,to bottom,to left,to right,to center,to top righr等；方向是对应相反顺序，如to
2022-04-05 23:48:59
575
原创 CSS基础：圆角和内影响
border-radius:10px 10px 10px 10px;利用属性制作圆形的2个要点：宽和高必须相同：圆角半径为元素宽度的一半或者直接用50%box-shadow：inset（内阴影） x-offset y-offset blur-radius color;:outset;（外阴影）默认值；blur-radius模糊范围 x-offse y-offset x和y轴阴影区域；background-size:100%;只给一个值，另一个值为auto；：cover；覆盖背景定
2022-04-05 00:59:55
325
原创 HTML5新增结构和表单验证
html5新增input类型：<input type="number" name="numbername" min="2" max="20" step="2" value="默认值"><input type="range" name="rangename" min="10" max="20" step="2" value="默认值"><input type="date" name="date">年月日<input type="mon.
2022-04-01 22:06:28
430
原创 【无标题】
<contenEditable>规定用户是否可以编辑内容例如：<p contenEditable>1111</p><canvas></canvas>定义图形 创建画布 html5新增结构元素<hidden>规定对元素进行隐藏例如：<div hidden>1111</div> 1111的内容用户不可见 和display:none;本质上是一样的；HTML废除的属性：table部分属性：bgc
2022-04-01 00:59:09
68
原创 html5新增结构元素
<header></header>一般用在头部信息 页面中某一个区块的页眉<nav></nav>作为导航链接组 一些导航内容<section></section>页面中的内容区块 通常用作标题和内容<aside></aside>非正文内容，与页面是分开的，被删除不会影响内容<footer></footer>页面中某一区块的脚注<main></main&
2022-03-30 18:59:56
240
原创 伪类链接和列表样式
添加下划线、上划线、删除线 默认是没有下划线text-decoration：none；：underline；：overline；：line-through；图片后面的文字垂直居中、向上对齐、向下对齐、更往下对齐vertical-align：middle；：top；...
2022-03-27 23:23:45
125
原创 字体样式和文本排版
字体样式：字体：font-familyp{font-family:宋体，楷体；}采用宋体，如果浏览器不认识就采用楷体，还不认识的话就用浏览器默认的字体。字体大小：font-sizep{font-size:20px;}p{font-size:2em;}px是物理像素；em是根据父元素的大小，一般用在移动端适配。目前使用较多的单位是rem，是根据根元素html大小来的。字体风格：font-stylep{font-style:italic} 斜体；p{font-styl...
2022-03-25 18:47:51
151
原创 表单高级使用
隐藏域：<input type="hidden" name="名称" value="">readonly只读 disable禁用<input type="text" readonly> <input type="text" readonly><lable></able>标注标签 增强鼠标可用性，自动将焦点移到与之相关的表单元素上<input type="text" name="a" id="b"><
2022-03-23 18:13:43
906
原创 表单元素格式
1.文本框：<input type="text" name="文本框名称" value="初始值" size="20" maxlength="10">
2022-03-22 19:59:15
131
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人