StefanieLap-CSDN博客

原创 JS中的reduce方法使用

学过JS数组中的reduce方法，一直很少用它，最近在网上看到一些博客，get到了reduce的用法，很多地方都可以用得到。首先, 我们来看这个方法需要的参数:arr.reduce(callback[, initialValue])参数callback（一个在数组中每一项上调用的函数，接受四个函数：）previousValue（上一次调用回调函数时的返回值，或者初始值）currentValue（当前正在处理的数组元素）currentIndex（当前正在处理的数组元素下标）array

2021-03-05 20:38:37 406 3

原创 call、apply、bind

//首先来看三个方法的基本语法：// apply的使用语法// 函数名字.apply(对象,[参数1,参数2,...]);// call的使用语法// 函数名字.call(对象,参数1,参数2,...);// bind的使用语法// 函数名字.bind(对象,参数1,参数2,...);//作用：前两个都是为了改变this指向，bind是改变this指向并且复制一个这个方法返回//接着我们来看看怎么用function f1(x,y,z){ //这里用到了模板字符串，不了解的.

2021-03-05 16:11:55 74

原创 JS回调函数、真实举例

回调是一个在另一个函数完成执行后所执行的函数——故此得名“回调”。回调就是一种方法，帮我们确保某些代码直到另一些代码已经执行完毕后才执行。举例：function doHomework(subject, callback) { alert(`Starting my ${subject} homework.`); callback();}doHomework('math', function() { alert('Finished my homework');});运行结果：先 s

2021-03-05 16:10:33 694

原创 JS 对象、原型链、构造函数、call、apply、bind、dom、箭头函数、匿名函数中的this指向

this指向对象中的this原型链中的this构造函数中的thiscall&apply中的thisbind中的thisDOM 事件处理函数中的 this & 内联事件中的 thisDOM事件处理函数内联函数setTimeout & setInterval箭头函数中的 this匿名函数中的this对象中的this对象内部方法的this指向调用这些方法的对象，函数的定义位置不影响其this指向，this指向只和调用函数的对象有关。多层嵌套的对象，内部方法的this指向离被调用函

2021-03-05 16:07:36 306

原创 css动画+帧动画

动画：animation设置关键帧<style type="text/css"> #d1{ width: 200px; height: 200px; background: pink; animation: donghua1 3s; } @keyframes donghua1{ /* from{} 等同于0%{}，最开始*/ 0%{ transform: translate(0,0); }

2020-11-02 21:55:50 437

原创 css定位

固定定位相对定位绝对定位静态定位，不作任何处理，默认的情况粘性定位（新出的，兼容性不强）固定定位根据浏览器的位置进行定位，会脱离正常的文档流，必须要配合上下左右position：fixed；right：100px；top：100px；相对定位相对于自己原本的位置，不会脱离文档流，只是样子移动了position：relative；right：10px；top：100px；绝对定位...

2020-11-02 20:57:01 94

原创 css转换

2d转换：水平竖直移动，旋转3d转换：旋转三维立体空间有三个轴，水平，竖直和垂直屏幕射向眼镜的z轴2d旋转<head> <meta charset="utf-8"> <title></title> <style type="text/css"> #d1{ width:600px; height: 100px; background: skyblue; margin: 100px

2020-11-01 19:38:41 177

原创 css过渡动画

综合性过渡效果transition: 属性时间;举例：transition: width 2s;设置具有过渡效果的属性可设置单个，多个（逗号隔开），全部属性（all）transition-property: all;过渡的时间长度transition-duration: 2s;整个过渡动画变化的速度 ease:(默认值),从慢到快到慢下来 linear：设置线性速度 ...

2020-10-30 10:13:22 3730

原创 css文字属性

字体属性字体大小字体粗细字体颜色文字排布文字行高文字阴影<head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .d1{ width:600px; height: 200px; /* background-color:darkcyan; */ margin: 0 auto;

2020-10-29 19:44:04 136

原创 css浮动与清除浮动

浮动可以解决的问题：可以解决文字包围图片的问题可以解决莫名其妙的间隔问题可以向左向右排版对齐问题一描述：<head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .content{ width: 800px; } </style> </head> <body> &l

2020-10-28 23:00:50 108

原创 css选择和伪元素

1.属性选择器：中括号加属性名（单独选择某个属性）[属性名]举例：<head> <meta charset="utf-8" /> <title></title> <style type="text/css"> [data-src]{ width:100px; height: 100px; background-color: antiquewhite; } </style&.

2020-10-28 21:09:54 168

原创 css初识-选择器优先级

css使用方式通过style标签设置样式通过style属性设置样式通过css文件注意：选择器的优先级，在其余情况相同的情况下，继承的样式<浏览器默认的样式<标签样式<claa样式<id样式<style属性样式element.style的优先级最高，覆盖掉了id：d1的样式css的优先级高，也就是说，同样的选择器，谁在后面谁的优先级高如果想让底层的优先级升到最前面，加 !important，但是如果两种都有!important，还是..

2020-10-26 20:42:37 432

weixin_45605549的博客