今天完成的事情

1. 完成了任务15
2. 完成任务12~15的任务总结

明天计划的事情

由于明天请假，有空余时间看一下JavaScript

遇到的问题

暂时没有遇到新问题

收获

以下是任务12~15的任务总结

任务12&13总结如下：

官方脑图：

个人脑图：

任务耗时：完成任务11   1天

是否延期：否

成果链接：

https://swpuhu.github.io/Start-a-project/Task12/task12-2.html

https://swpuhu.github.io/Start-a-project/Task13/task13-vote.html

任务总结：

使用less编写代码，将背景颜色和字体大小设置为变量，方便日后维护统一修改背景颜色和字体样式

学习CSS编写规范，按照

1. display、position、top/left/right/bottom
2. width, height
3. padding/border/margin
4. font-size, color,background-color
5. animation

的顺序来编写，先表述元素的显示方式---->>元素的位置---->>元素的尺寸---->>盒子模型---->>字体样式或颜色等–→>动画效果

模仿bootstrap写了一个栅格系统

要点如下：

1. 给row两侧设置负边距，给col设置相应的正边距，这样两侧的col会紧贴着row并且中间的col之间会有两倍的margin
2. 设置col为float，但是要记得再row中使用伪元素来消除浮动，否则row会出现高度塌陷的问题

使用自己写的栅格系统自由度比较高，可以定制10栅格系统或者更多的栅格。

任务14&15总结如下

官方脑图：

个人脑图：

任务耗时：完成任务11   1天

是否延期：否

成果链接：

https://swpuhu.github.io/Start-a-project/Task14/summary.html

https://swpuhu.github.io/Start-a-project/Task15/task15-1.html

任务总结：

因为三个页面的页眉和页脚都是一样的，所以将主页的头和尾都作为组件给拆了出来。

还拆出来了轮播图，和响应式导航栏。这都是在网页设计中经常会用到的组件。

用CSS写轮播图的基本思路就是用一个宽度为100%的盒子去包含一个300%（假如轮播3张图片），然后设置overflow为hidden，然后通过动画来改变300%盒子的margin（使其为负值）

再在轮播图的末尾放置一张第一张图片，使其能够无缝衔接。

响应式导航栏的主要难点在于在小屏幕下能够折叠选项卡，并且要实现选项卡的平滑过渡效果，

基本思路：

与轮播图类似，同样采用一个盒子包裹内部的选项卡盒子，但是外部的盒子不要设置固定高度，让其被内部的盒子所撑开。

然后使其内部的盒子margin发生改变，采用transition的过渡效果可以实现平滑过渡。

代码如下：

以下是今日的JavaScript学习内容

弹出窗口屏蔽程序

如果浏览器内置的屏蔽程序阻止弹出窗口，那么window.open()可能会返回Null。此时，只要检测这个返回的值就可以确定弹出窗口是否被屏蔽了。

如果使浏览器扩展程序阻止的弹出窗口，那么window.open()会抛出一个错误。所以，必须在检测返回值的同事，把window.open()封装在一个try-catch块中。

间歇调用和超时调用

• 间歇调用setInterval()： 每隔指定的时间就执行一次代码

• 超时调用setTimeout()：在指定的时间过后执行代码

超时调用需要使用window对象的setTimeout()方法。它接受两个参数

• 要执行的代码： 可以是字符串表示的代码(不推荐)，也可以是一个函数

• 毫秒表示的时间

推荐的调用方式：

setTimeout(function(){alert("hello world!");},1000);

调用 setTimeout() 之后，该方法会返回一个数值 ID，表示超时调用。这个超时调用 ID 是计划执 行代码的唯一标识符，可以通过它来取消超时调用。要取消尚未执行的超时调用计划，可以调用 clearTimeout() 方法并将相应的超时调用 ID 作为参数传递给它，如下所示。

var timeoutId = setTimeout(function(){  alert("hello world!"); },1000); clearTimeout(timeoutId);

系统对话框

浏览器通过alert(), confirm(), prompt()方法可以调用系统对话框向用户显示消息。系统对话框与在浏览器中显示的网页没有关系，也不包含HTML。它们的外观由操作系统及浏览器设置决定，而不是由CSS决定

此外，调用这几个方法时代码会停止执行，关掉这些对话框后代码又会恢复执行。

alert()

confirm()

为了确定用户时单击了确定还是取消，可以检查confirm()方法返回的布尔值。true为单击了确定，false表示单击了取消

prompt()