- 博客(13)
- 收藏
- 关注
RSS订阅原创 2021 【JS】获取当前屏幕各种高度
JS获取当前屏幕各种高度网页可见区域宽： document.body.clientWidth网页可见区域高： document.body.clientHeight网页可见区域宽： document.body.offsetWidth (包括边线的宽)网页可见区域高： document.body.offsetHeight (包括边线的高)网页正文全文宽： document.body.scrollWidth网页正文全文高： document.body.scrollHeight网页被卷去的高： doc
2021-03-17 22:07:45
154
原创 【JS this指向】改变函数内this指向的三种方法
文章目录一、改变函数内this指向的三种方法二、代码案例1.fun.call()1） fun.call()使用2） fun.call()可实现属性继承2.fun.apply()1） fun.apply()的使用2） fun.apply()的应用场景3.fun.bind()1） fun.bind()的使用2） fun.bind()的应用场景总结一、改变函数内this指向的三种方法fun.call()：可调用函数，可改变this指向fun.apply()：可调用函数，可改变this指向，参数为数组fu
2020-12-29 15:30:49
298
2
原创 【JS】原型与原型链理解
1、什么是原型1）定义JS中的所有引用类型（Object、Array、RegExp、Date、Function）均天生自带__proto__属性，对于引用类型而言原型即为__proto__属性 var obj = {}; console.log(obj) var arr =['']; console.log(arr)对于JS中的所有函数，原型即为天生自带的prototype原型对象，原型对象本身也自带__proto__属性，该属性指向Object的prototype原型对象 functi
2020-12-24 19:03:36
241
2
原创 【css】translate元素仍占据原始位置特性分析
如何发现该特性的？使用translateX平移元素后，再用offsetLeft获取元素距离body左侧的距离时，无法获取经translateX移动的部分（背景复现见以下代码），造成该结果的原因是translate属性不会改变元素原始位置。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=
2020-12-17 16:19:03
2377
1
原创 【JS】实现倒计时
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>时分秒倒计时</title> <style> span { .
2020-12-07 16:24:53
82
原创 表格动态生成及删除行操作
```html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { .
2020-10-21 20:26:15
179
原创 【JS】tab选项卡切换
一、代码思路1、用户可视步骤一：点击li后显示高亮背景。 鼠标点击每一个li时需先排他，避免出现其他都显示成current样式。代码主要步骤：1）新建li点击后的样式 current；2）for 循环对所有li注册点击事件;3）for 循环排他；4）当前点击li获得新样式：this.className = ‘current’;2、用户可视步骤二：点击li后，显示当前点击li对应的item content。需排他，避免已被显示的content一直显示。代码主要步骤：1）对li元素设置自定义属
2020-10-16 20:09:11
319
原创 JS 实现表格中checkbox（复选框）全选反选
一、需求步骤–实现表格首行复选框全选反选功能1、当表格第一行thead标签内复选框选中，则tbody标签内复选框全选中；thead标签内复选框未选中，则tbody标签内复选框全部未选中；2、当tbody标签内复选框全被选中时，thead内复选框则被选中；tbody内只要有复选框未被选中，则thead内复选框不被选中。二、撸码思路1、thead复选框checked属性与tbody复选框一致，var tbody复选框[i] = this.thead复选框.checked;2、每选中一个tbody内的复
2020-10-16 17:33:00
2667
2
原创 【JS】获取DOM元素的方法汇总
通过ID获取（getElementById） const aID = document.getElementById('aid'); console.log(aID);通过name属性（getElementsByName） const aName = document.getElementsByName('aname')[0]; console.log(aName);通过标签名（getElementsByTagName）const a = document.getElementsByTag
2020-10-15 19:17:05
160
1
原创 【JS】冒泡排序
冒泡排序思路：1、相邻两两比较，一共比较arr.length-1轮，轮数计数变量为i；2、每轮比较，假若按从小到大排序，前者大于后者，则把前后者数据交换；3、每轮中，比较次数arr.length-i(因为每一轮结束就有一个数据已被交换好),每轮比较次数变量为j。 var arr = [2, 3, 5, 4, 1, 10, 11,0]; for (var i = 1; i < arr.length; i++) { for (var j = 0; j &
2020-09-23 22:45:29
94
原创 【CSS 3D旋转木马】实现及translateZ分析
CSS 3D旋转木马制作–【事前】撸袖干活前，结构分析遍。3 D 木马图，先把盒装好。无性父，透视走起玩美术，preserve-3d味儿足，眼看相绝成怨妇。木马儿 ，rotateY左手擎住，ranslateZ右手握复，绕了一圈仍需赶路。筒子齐活再装修，animation你真秀。安得木马千万件，单身狗儿俱欢颜。【过程】<!DOCTYPE html><html lang="en"><head> <meta charset=
2020-09-19 21:32:53
537
转载 【HTML】section标签理解
1.HTML标准中对section的解释The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.Examples of sections would be chapters, the various tabbed pages in
2020-08-25 10:33:43
9690
转载 【css外边距塌陷】外边距合并问题解决方案
1.父子元素之间的外边距margin合并问题(外边距塌陷) .box { width: 800px; height: 500px; background-color: orange; } .b1 { margin-top: 20px; width: 200px; height: 200px; background-color: pu
2020-08-24 17:26:26
230
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人