2019 年 10月随笔档案 - Cloud%

JS中for循环嵌套

摘要：for 循环 for语句也是一种前测试循环语句，但它具有在执行循环之前初始化变量和定义循环后要执行的代码的能力 for循环中专门提供了位置来放置循环的三个表达式定义一个循环需要做实现这三步： 1、初始化表达式 2、条件表达式 3、更新表达式语法： for(①初始化表达式；②条件表达式；③更阅读全文

posted @ 2019-10-23 17:02 Cloud% 阅读(13576) 评论(2) 推荐(1)

Codecombat 游戏攻略（计算机科学三）2

摘要：第33关逻辑之路判断secretB 非真，走上面；否则，走下面（这里面要先自己进行逻辑判断）if…else语句或者这样用（不用自己进行判断）第三十四关逻辑之圈注意逻辑判断第三十五关逻辑结论运算符优先级或与非优先于and 挑战或与非使用while循环先检查是否有enemy或是ite 阅读全文

posted @ 2019-10-20 21:44 Cloud% 阅读(4484) 评论(0) 推荐(0)

Codecombat 游戏攻略（计算机科学三）

摘要：第二关赋值运算符-=字符串拼串循环语句while 第三关 JS变量var的赋值方法字符串拼串循环语句while条件语句if 第四关巫师之门算术运算符JS变量var的赋值方法第五关巫师出没算术运算符第六关巫师天际层算术运算符的优先级第七关币屑方法的参数第八关白兔变量声明方阅读全文

posted @ 2019-10-20 20:41 Cloud% 阅读(9667) 评论(0) 推荐(0)

transform-origin属性

摘要：一、transform-origin的作用 transform-origin改变元素基点（transform-origin是变形原点，原点就是元素绕着旋转或变形的点）注意：该属性只有在设置了transform属性的时候才起作用；如果在不设置的情况下，元素的基点默认的是其中心位置。在没有使用阅读全文

posted @ 2019-10-19 21:57 Cloud% 阅读(16225) 评论(0) 推荐(2)

CSS Sprite雪碧图

摘要：一、CSS Sprite雪碧图使用场景浏览器通常很快就可以将文本显示出来，但图像往往会减慢页面的加载速度。这一现象在移动端尤为明显，为了解决这个问题，可以将多个图像拼合成单个背景图像（sprite），再通过CSS控制具体显示图像的哪一部分。 CSS雪碧即CSS Sprite，也有称之为CSS精灵，阅读全文

posted @ 2019-10-18 23:19 Cloud% 阅读(434) 评论(0) 推荐(0)

for-in语句和with语句、break和continue语句

摘要：for-in语句 for-in语句是一种精准迭代语句，可以用来枚举对象的属性，用以遍历一个对象的全部属性。 for…in声明用于对数组或者对象的属性进行循环操作； for…in循环中的代码每执行一次，就会对数组的元素或对象的属性进行一次操作。 for-in的语法： for (变量 in 对象) { 阅读全文

posted @ 2019-10-17 22:48 Cloud% 阅读(1208) 评论(1) 推荐(0)

Emmet语法规则

摘要：Emmet插件仿照CSS语法来生成代码，使用emmet语法可以大大提高HTML/CSS代码书写的速度。下面就来介绍一下Emmet语法到底应该如何书写; 当熟悉了Emmet的缩写语法之后，可能会想一些格式来生成更清晰可读的缩写，例如，在元素和运算符之间使用空格隔开注意：这种写法是错误的，空格是Em 阅读全文

posted @ 2019-10-13 09:45 Cloud% 阅读(1501) 评论(0) 推荐(3)

CSS画心形和蛋形

摘要：一、心形使用transform-origin属性实现设置不同的点为原点 1、改变元素基点transform-origin（transform-origin是变形原点，原点就是元素绕着旋转或变形的点）注意：该属性只有在设置了transform属性的时候才起作用；如果在不设置的情况下，元素的基点默阅读全文

posted @ 2019-10-12 20:01 Cloud% 阅读(381) 评论(1) 推荐(0)

仿照小米横向特效和弹出二维码

摘要：一、仿照小米横向特效实现效果：（鼠标移动到上面之后弹出橙色区域部分）二、弹出二维码实现效果：（鼠标移动到上面之后弹出百度的二维码）之所以能实现弹出效果，是因为为子元素设置 display:none 属性 display:none —— 不为隐藏的对象保留其原来的位置，使其在页面上消失；然后阅读全文

posted @ 2019-10-12 18:41 Cloud% 阅读(387) 评论(0) 推荐(0)

伪类和伪元素的区别

摘要：一、什么是伪类、伪元素呢？伪类：伪类对元素的分类是基于特征，而不是基于元素的名字属性或是内容。特征并不可以通过DOM树直接获得。（伪类选择器就是不存在与HTML文档中，但是用CSS语法可以选择它们，并对其能够渲染修饰）伪元素：伪元素创造文档语言能够指定的文档树之外的抽象。例如：first-ch 阅读全文

posted @ 2019-10-11 21:57 Cloud% 阅读(1821) 评论(2) 推荐(0)

for循环、while循环、do…while循环

摘要：什么是循环结构？反复一遍又一遍做着相同（相似）的事情循环结构的两大要素？循环条件：什么时候开始，什么时候结束循环操作：循环体，循环过程中做了什么一、while语句 while语句属于前测试循环语句，也就是说，在循环体内的代码被执行之前，就会对出口条件求值 while（Boolean条件阅读全文

posted @ 2019-10-10 23:55 Cloud% 阅读(1745) 评论(1) 推荐(0)

渐进增强和优雅降级

摘要：一、什么是渐进增强在网页开发中，渐进增强认为要专注内容本身。在开始针对低版本的浏览器构建页面，满足最基本的功能，然后再针对更高级的浏览器设置更加完美的效果，以达到更好的用户体验。即，以最低要求，以实现基础功能为基础，向更高层次的兼容。二、什么是优雅降级优雅降级是指在最开始的时候先针对一个高阅读全文

posted @ 2019-10-10 23:33 Cloud% 阅读(169) 评论(1) 推荐(0)

CSS变量（CSS variable）

摘要：CSS变量（CSS variable） CSS变量是由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名，并使用特定的var()来访问。一、CSS变量的用途构建大型站点时，在这些网页中，有大量的CSS样式，并且会在许多场合大量重复的使用。比如说：为了保持一阅读全文

posted @ 2019-10-07 21:33 Cloud% 阅读(6469) 评论(1) 推荐(1)

CSS + > ~ 选择器

摘要：一、后代选择器选取指定元素的后代元素与子元素选择器相比，后代选择器选取的不一定是直接后代（儿子），而是作用于所有后代元素（儿子、孙子、重孙…）都可以。实例：（选取类为 box的元素的 id为aa后代元素） HTML <div class="box"> <p>emmmmmmmmmm……</p> 阅读全文

posted @ 2019-10-06 20:37 Cloud% 阅读(20544) 评论(1) 推荐(7)

font-size:0; 消除空白间隙

摘要：使用font-size:0解决设置inline-block引起的空白间隙问题一、空白间隙问题在进行页面布局的时候为了页面代码所谓整洁刻度，往往会设置缩进或是换行，但是元素display为inline-block或是inline时，行内元素虽然没有设置 margin值，这些换行或是缩进。还是会出现阅读全文

posted @ 2019-10-06 15:29 Cloud% 阅读(1582) 评论(1) 推荐(0)

仿网易云音乐导航栏

摘要：仿网易云音乐导航栏推荐歌单主播排行榜歌手可以自己手动实验这些效果哦~ :link 选择所有未被访问的链接 a:link； :visited 选择所有已被访问的链接 a:visited； :active 选择活动链接 a:active； :hover 选择鼠标指针位于其上的链接 a:hov 阅读全文

posted @ 2019-10-04 20:20 Cloud% 阅读(772) 评论(1) 推荐(0)

JavaScript函数

摘要：一、什么是函数函数（function），也可以被称之为方法（method）或者是过程（procedure）。函数本质上是功能完整的对象。函数是一段预定好的，并可以被反复调用的代码块，其中可以包含多条可执行语句。函数还能接受输入的参数，不同的参数可以返回不同的值。预定定义好：事先声明好，但是不被阅读全文

posted @ 2019-10-04 00:07 Cloud% 阅读(363) 评论(1) 推荐(0)

CSS3画菱形和平行四边形以及立方体

摘要：利用CSS3中的transform属性画菱形和平行四边形 transform 实现2D或是3D的变形转换，通过transform可以实现对元素的四种变换：旋转、缩放、移动、倾斜一、菱形菱形的特点：菱形的四条边相等，可以理解为正方形的一种，所以分析可以通过正方形的旋转得到菱形 transform: 阅读全文

posted @ 2019-10-03 20:42 Cloud% 阅读(2895) 评论(1) 推荐(0)

CSS3画五角星和六角星

摘要：最终想要实现的效果一、五角星在画五角星之前首先分析这个五角星是如何实现，由哪几个部分构成的，示意图如下：三个顶角向上的三角形，通过设置旋转和定位相互重叠和拼接实现最终的五角星效果。为了语义化和代码更加简便，所以使用伪类来添加内容。 1、设置一个等腰三角形，并使用transform将其旋转到合阅读全文

posted @ 2019-10-03 20:38 Cloud% 阅读(2224) 评论(1) 推荐(1)

CSS3制作太极图以及用JS实现旋转太极图

摘要：太极图可以理解为一个一半黑一半白的半圆，上面放置着两个圆形，一个黑色边框白色芯，一个白色边框黑色芯。 1、实现黑白各半的圆形。 2、用：before伪类实现一个黑色边框白色芯的园。 3、用：after伪类实现一个白色边框黑色芯的圆。 CSS实现旋转太极图 JS实现旋转太极图（鼠标悬停转动，移开停止旋阅读全文

posted @ 2019-10-01 22:19 Cloud% 阅读(1331) 评论(1) 推荐(0)

JS设置和获取盒模型的宽和高

摘要：dom.style.width/height：只能取出内联样式的宽度和高度 dom.currentStyle.width/height：获取即时的计算的样式，但是只有IE支持 window.getComputedStyle(dom).width：获取即时计算的样式，支持其他浏览器，兼容性更好 dom 阅读全文

posted @ 2019-10-01 21:10 Cloud% 阅读(3101) 评论(2) 推荐(2)

CSS盒模型面试知识点

摘要：一、基本概念 1、基本概念：标准盒模型+怪异盒模型（IE模型）基本组成：由margin、padding、content组成。 2、标准盒模型和IE模型的区别标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。标准盒模型下盒子的大小 = co 阅读全文

posted @ 2019-10-01 14:51 Cloud% 阅读(1521) 评论(1) 推荐(0)