许小墨のBlog

函数-上引入： 先问大家一个问题，大家洗过衣服吧？ 手动怎么洗？拿个盆，接水，放衣服，倒洗衣粉，洗，涮，拧干 挺费劲的，有没有简便的方法？ 使用洗衣机，衣服放进去，倒上洗衣粉，按开关，一切就都搞定了 在生活中这样的例子有很多，大到洗衣机空调，小到水龙头剪刀。每个工具都有自己不同的功能。为了生活方便简洁，就会使用这些工具。 程序员是一群很会享受生活的群体，所以在代码中也有很多这样的工具，就是咱们今天要学习的函数。 总结：代码中工具—-函数 一、概念：函数就是具备某个功能的一个工具。是完成某个功能的一段代码。 大家以前有没有用过函数呀？ parseInt() alert() 这都是函数，是系统提供的，直接拿来就能用。 系统提供了很多函数，但是并不能包含所有的功能，所以有些功能需要我们自己来写—-自定义函数。函数定义好以后，就可以像系统函数一样使用了，不用再重复写了。 所以经常写的代码，就写一个函数，需要的时候调一下好了。 自定义函数怎么写？ 二、函数语法1、定义语法：1234function 函数名(){ 代码段}# function是一个关键字，函数名自定义，定义规 ...

循环结构引入：操场一圈是400米，在运动会的时候，2000米的跑步比赛，我们需要绕操场跑5圈，如下图： 示意图 这就是一个循环，那么，在这个过程中，其实我们动作只是跑一圈，剩下的过程只是在重复。从计算机的角度来想，我们可不可以设定一个程序，让他自动跑5圈呢？可以的，用咱们今天要学习的循环结构。循环结构的意义就是让代码重复执行。 一、while循环结构语法： 123while(条件语句){ 条件成立执行的代码} 例：对女朋友说5句我爱你 123456// 那么既然是循环，咱们需要设定几个条件，首先是从哪开始，每完成一次要进行计数，完成多少次停止。var i = 1;while(i<=10){ document.write("我爱你！"); i++;} while循环结构的具体流程： while循环的运行流程 while循环需要我们在循环外就将变量声名好，在执行代码的过程中，一定要让变量进行变化，否则这个循环就会无休止的进行下去。 不会停止的循环叫做死循环，程序一直不 ...

逻辑分支引入：我们在日常生活中，有很多事情是需要做判断的，比如说，去服装城买衣服，你看中一件衣服，老板要300元，你立马就会想，这个价格是否贵了，判断的结果只有两种可能，一是贵，二是不贵，贵了你就不买了，不贵你就买了。再比如去网吧，网管也要判断你是否满18岁，结果也只有两种，是和否，是就上网，不是就看别人上网，再比如，学校根据考试成绩对每个人进行评级，如果成绩大于60就合格，否则就不合格，如果成绩大于90，就优秀等等。。。在咱们的代码中，也会有很多判断，比如咱们做的练习，小红满足条件了，就能嫁人了，不满足条件就不能嫁人。咱们昨天只是能看到一个布尔值，并没有进行下一步的操作，通过今天的学习就可以进行下一步的操作了，咱们今天学习的主要内容就是判断，也叫做逻辑分支。 判断也会有很多种，比如： 考试成绩大于60，及格 考试成绩大于60，及格，否则，不及格 考试成绩如果大于60并且小于80，及格，如果大于80并且小于90，良好，如果大于90，优秀 根据上述几种情况，我们把判断分为三种，根据结果只做一个件事情的，叫单分支，做两件事情的，叫做双分支，做多件事情的，叫多分支。 一、if分支1、单分 ...

day01-变量类型运算一、JS的介绍1、JS的由来在90年代初，浏览器技术并不发达，浏览器上展示的网页只能以浏览为主，没有用户的交互功能，就像我们现在看到的新闻网页，只能浏览，没有动效，无法通过点击或拖拽实现有趣的效果。网络技术也不发达，数据传送很慢，网速仅有28.8kb/s，不像我们现在的网络，动辄百兆千兆。 基于这样一个背景，用户在进行注册账号的时候，输入的账号等信息，点击提交把数据发送到服务器的时候，传送速度慢，用户需要等待很长时间，才能得到服务器的反馈。例如在表单中输入账号等信息，点击提交后，用户需要耐心等待大概30s的时间，才能知道注册是否成功，关键像两次密码输入不一致、用户名被占用、用户名不合法、密码长度不合法等校验工作，都需要将数据传送给服务器进行验证，每次传送都需要耗费流量，当时的流量费用特别高，给用户操作网页带来了极大的烦恼。 为了解决这个问题，作为当时最受欢迎的浏览器公司网景（Netscape）公司，率先提出了解决方案：将数据校验工作放在浏览器上进行，当浏览器上数据验证通过没有问题之后，再将数据发送给服务器处理，可以减少数据传送次数，节省流量，也节省了传 ...

CSS 中的特殊样式设置做一个三角形利用边框属性制作一个三角形 .box{ width: 0px; border-top: 100px solid transparent; border-bottom: 100px solid yellow; border-left: 100px solid transparent; border-right: 100px solid transparent; } - transparent代表透明色 需要注意的是：border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式 设置文本溢出文本溢出隐藏,超出部分显示...或者截取，前提必须有宽度 单行文本： CSS: { width: ___px; white-space: nowrap; overflow: hidden; text-overflow ...

网格布局什么是网格布局？Grid 布局是CSS中最强大的布局系统。 与 flexbox 的一维布局系统不同，Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。 通过将 CSS 规则应用于父元素 (网格容器)和其子元素（ 网格项），你就可以轻松使用 Grid(网格) 布局。 它的目标是完全改变我们基于网格的用户界面的布局方式。CSS 一直用来布局我们的网页，但一直以来都存在这样或那样的问题。一开始我们用表格（table），然后是浮动（float），再是定位（postion）和内嵌块（inline-block），但是所有这些方法遗漏了很多重要的功能（例如垂直居中）。 Flexbox 的出现很大程度上改善了我们的布局方式，但它的目的是为了解决更简单的一维布局，而不是复杂的二维布局（实际上 Flexbox 和 Grid 能协同工作，而且配合得非常好）。 基本概念必须使用 display: grid 指定一个容器为网格布局， 必须使用 grid-template-columns 和 grid-template-rows 设置 列 和 行 的尺寸大小 行 和 列容器里面的水 ...

移动端布局方案什么是移动端移动终端或者叫移动通信终端 是指可以在移动中使用的计算机设备 广义的讲包括手机、笔记本、平板电脑、POS机甚至包括车载电脑 设计 app 原型图 ==> 根据原型图 实现页面布局 （移动端页面） 移动端页面查看移动端页面： 浏览器页面打开 鼠标右击 检查 ==> 单击 左上方第二个按钮 iphone 6/7/8 ===> 手机型号 375*667 ===> 手机屏幕的分辨率 75% ===> 理解为：最佳观看比例 旋转小图标 ===> 点击时切换横屏和竖屏 最右边的三个圆点 ===> 能够获取“手机”信息 移动端准备工作meta 标签<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 几个参数解释： width = d ...

弹性盒模型（FlexibleBox 或 flexbox）什么是弹性盒？是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间 弹性盒子由弹性容器(Flexcontainer)和弹性子元素(Flexitem)组成 弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器 弹性容器内包含了一个或多个弹性子元素 注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局 基本配置项给父元素添加1、display:flex/inline-flex; flex将对象作为弹性伸缩盒显示 inline-flex将对象作为内联块弹性伸缩盒显示 需要注意的是：子元素的 width、float、clear 和 vertical-align 属性将会失效 2、flex-direction (主轴排列方向) row 默认，横向一行排列 row-re ...

CSS3 中的转换与动画CSS3 中的转换CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸 transform 适用于2D或3D转换的元素 deg 角度 需要注意的是： 当一个元素同时设置多个转换效果时，需要注意“轴”的变化 2D 转换translate(x,y) 定义 2D 移动，沿着 X 和 Y 轴移动元素 translateX(n) 定义 2D 移动，沿着 X 轴移动元素 translateY(n) 定义 2D 移动，沿着 Y 轴移动元素 rotate(angle) 定义 2D 旋转，在参数中规定角度，在一个平面内进行旋转 scale(x,y) 定义 2D 缩放，改变元素的宽度和高度 scaleX(n) 定义 2D 缩放，改变元素的宽度 scaleY(n) 定义 2D 缩放，改变元素的高度 skew(x-angle,y-angle) 定义 2D 倾斜，沿着 X 和 Y 轴 skewX(angle) 定义 2D 倾斜，沿着 X 轴 skewY(angle) 定义 2D 倾斜，沿着 Y 轴 transform- ...

CSS3 中的渐变与过渡CSS3 中的渐变此前，这些效果必须使用图像来显示部分效果，但是现在可以使用css渐变实现，减少下载的事件和管带的使用 CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡(至少是两个颜色) CSS3 定义了两种类型的渐变（gradients）： 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向... 径向渐变（Radial Gradients）- 由它们的中心定义 线性渐变 background-image:linear-gradient(direction, color-stop1, color-stop2, ...); direction 默认为to bottom，即从上向下的渐变 可以设置的有 to bottom 从上向下 to left 从左向右 to right 从右向左 to top 从下向 ...