<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[chaomi_didi的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/chaomi_didi</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; chaomi_didi]]></copyright><item><title><![CDATA[2021 【JS】获取当前屏幕各种高度]]></title><link>https://blog.youkuaiyun.com/chaomi_didi/article/details/114952330</link><guid>https://blog.youkuaiyun.com/chaomi_didi/article/details/114952330</guid><author>chaomi_didi</author><pubDate>Wed, 17 Mar 2021 22:07:45 +0800</pubDate><description><![CDATA[JS获取当前屏幕各种高度
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： doc]]></description><category></category></item><item><title><![CDATA[【JS this指向】改变函数内this指向的三种方法]]></title><link>https://blog.youkuaiyun.com/chaomi_didi/article/details/111917055</link><guid>https://blog.youkuaiyun.com/chaomi_didi/article/details/111917055</guid><author>chaomi_didi</author><pubDate>Tue, 29 Dec 2020 15:30:49 +0800</pubDate><description><![CDATA[文章目录一、改变函数内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]]></description><category></category></item><item><title><![CDATA[【JS】原型与原型链理解]]></title><link>https://blog.youkuaiyun.com/chaomi_didi/article/details/111644557</link><guid>https://blog.youkuaiyun.com/chaomi_didi/article/details/111644557</guid><author>chaomi_didi</author><pubDate>Thu, 24 Dec 2020 19:03:36 +0800</pubDate><description><![CDATA[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]]></description><category></category></item><item><title><![CDATA[【css】translate元素仍占据原始位置特性分析]]></title><link>https://blog.youkuaiyun.com/chaomi_didi/article/details/111317806</link><guid>https://blog.youkuaiyun.com/chaomi_didi/article/details/111317806</guid><author>chaomi_didi</author><pubDate>Thu, 17 Dec 2020 16:19:03 +0800</pubDate><description><![CDATA[如何发现该特性的？
使用translateX平移元素后，再用offsetLeft获取元素距离body左侧的距离时，无法获取经translateX移动的部分（背景复现见以下代码），造成该结果的原因是translate属性不会改变元素原始位置。
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=]]></description><category></category></item><item><title><![CDATA[【JS】实现倒计时]]></title><link>https://blog.youkuaiyun.com/chaomi_didi/article/details/110821323</link><guid>https://blog.youkuaiyun.com/chaomi_didi/article/details/110821323</guid><author>chaomi_didi</author><pubDate>Mon, 07 Dec 2020 16:24:53 +0800</pubDate><description><![CDATA[&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;时分秒倒计时&lt;/title&gt;
    &lt;style&gt;
        span {
            .]]></description><category></category></item><item><title><![CDATA[表格动态生成及删除行操作]]></title><link>https://blog.youkuaiyun.com/chaomi_didi/article/details/109209079</link><guid>https://blog.youkuaiyun.com/chaomi_didi/article/details/109209079</guid><author>chaomi_didi</author><pubDate>Wed, 21 Oct 2020 20:26:15 +0800</pubDate><description><![CDATA[```html
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
        table {
 .]]></description><category></category></item><item><title><![CDATA[【JS】tab选项卡切换]]></title><link>https://blog.youkuaiyun.com/chaomi_didi/article/details/109123961</link><guid>https://blog.youkuaiyun.com/chaomi_didi/article/details/109123961</guid><author>chaomi_didi</author><pubDate>Fri, 16 Oct 2020 20:09:11 +0800</pubDate><description><![CDATA[一、代码思路
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元素设置自定义属]]></description><category></category></item><item><title><![CDATA[JS 实现表格中checkbox（复选框）全选反选]]></title><link>https://blog.youkuaiyun.com/chaomi_didi/article/details/109120880</link><guid>https://blog.youkuaiyun.com/chaomi_didi/article/details/109120880</guid><author>chaomi_didi</author><pubDate>Fri, 16 Oct 2020 17:33:00 +0800</pubDate><description><![CDATA[一、需求步骤–实现表格首行复选框全选反选功能
1、当表格第一行thead标签内复选框选中，则tbody标签内复选框全选中；thead标签内复选框未选中，则tbody标签内复选框全部未选中；
2、当tbody标签内复选框全被选中时，thead内复选框则被选中；tbody内只要有复选框未被选中，则thead内复选框不被选中。
二、撸码思路
1、thead复选框checked属性与tbody复选框一致，var tbody复选框[i] = this.thead复选框.checked;
2、每选中一个tbody内的复]]></description><category></category></item><item><title><![CDATA[【JS】获取DOM元素的方法汇总]]></title><link>https://blog.youkuaiyun.com/chaomi_didi/article/details/109103435</link><guid>https://blog.youkuaiyun.com/chaomi_didi/article/details/109103435</guid><author>chaomi_didi</author><pubDate>Thu, 15 Oct 2020 19:17:05 +0800</pubDate><description><![CDATA[通过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]]></description><category></category></item><item><title><![CDATA[【JS】冒泡排序]]></title><link>https://blog.youkuaiyun.com/chaomi_didi/article/details/108763642</link><guid>https://blog.youkuaiyun.com/chaomi_didi/article/details/108763642</guid><author>chaomi_didi</author><pubDate>Wed, 23 Sep 2020 22:45:29 +0800</pubDate><description><![CDATA[冒泡排序思路：
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 &lt; arr.length; i++) {
            for (var j = 0; j &]]></description><category></category></item><item><title><![CDATA[【CSS 3D旋转木马】实现及translateZ分析]]></title><link>https://blog.youkuaiyun.com/chaomi_didi/article/details/108685485</link><guid>https://blog.youkuaiyun.com/chaomi_didi/article/details/108685485</guid><author>chaomi_didi</author><pubDate>Sat, 19 Sep 2020 21:32:53 +0800</pubDate><description><![CDATA[CSS 3D旋转木马制作–【事前】
撸袖干活前，
结构分析遍。
3 D 木马图，
先把盒装好。
无性父，
透视走起玩美术，
preserve-3d味儿足，
眼看相绝成怨妇。
木马儿 ，
rotateY左手擎住，
ranslateZ右手握复，
绕了一圈仍需赶路。
筒子齐活再装修，
animation你真秀。
安得木马千万件，
单身狗儿俱欢颜。
【过程】
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset=]]></description><category></category></item><item><title><![CDATA[【HTML】section标签理解]]></title><link>https://blog.youkuaiyun.com/chaomi_didi/article/details/108215920</link><guid>https://blog.youkuaiyun.com/chaomi_didi/article/details/108215920</guid><author>chaomi_didi</author><pubDate>Tue, 25 Aug 2020 10:33:43 +0800</pubDate><description><![CDATA[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]]></description><category></category></item><item><title><![CDATA[【css外边距塌陷】外边距合并问题解决方案]]></title><link>https://blog.youkuaiyun.com/chaomi_didi/article/details/108203700</link><guid>https://blog.youkuaiyun.com/chaomi_didi/article/details/108203700</guid><author>chaomi_didi</author><pubDate>Mon, 24 Aug 2020 17:26:26 +0800</pubDate><description><![CDATA[1.父子元素之间的外边距margin合并问题(外边距塌陷)


    


.box {
            width: 800px;
            height: 500px;
            background-color: orange;
        }
    .b1 {
        margin-top: 20px;
        width: 200px;
        height: 200px;
        background-color: pu]]></description><category></category></item></channel></rss>