今天完成的事情

1、继续学习js

定时器

 我们设定时间   让某个动作不断的去执行 。 这个我们再js 里面用定时器来表示。

   window.setInterval(“执行的函数”,间隔时间) 

       正确的写法:

        setInterval(fun, 1000);      1000 ms   毫秒

        每隔1秒钟，就去执行一次 fun 这个函数.  

        setInterval(“fun()”,1000)     可以用 

        setInterval( function(){} , 1000 )  

        setInterval(fun(),1000)  错误的  

  定时器 特别的像  for 循环，但是我 的定时器最大的特点在于， 自动，可以设定时间。

获取日期和时间

getDate()                  获取日 1-31

getDay ()                  获取星期 0-6      

getMonth ()                获取月  0-11

getFullYear ()            获取完整年份（浏览器都支持）

getHours ()               获取小时 0-23

getMinutes ()               获取分钟 0-59

getSeconds ()               获取秒  0-59

getMilliseconds ()            获取当前的毫秒 

getTime ()       返回累计毫秒数(从1970/1/1午夜)

2、提交任务8，修了任务8一系列bug

footer部分经过调整实现了左对齐，nav部分添加了hover效果。优势部分，使用padding，使其对齐

明天计划的事情

1、继续学习js

继续刷javascript dom，顺便看看高程

2、完成任务一

遇到的问题

收获

浏览器f12调试

强制DOM状态

有些HTML的DOM是有状态的，比如<a> 标签，其会有 active，hover， focus，visited这些状态，有时候，我们的CSS会来定关不同状态的样式，在分析网页查看网页上DOM的CSS样式时，我们可以点击CSS样式上的 :hov 这个小按钮来强制这个DOM的状态。

动画

现在的网页上都会有一些动画效果。在Chrome的开发者工具中，通过右上角的菜单中的 More Tools => Animations 呼出相关的选项卡。于是你就可以慢动作播放动画了（可以点选 25% 或 10%），然后，Chrome还可以帮你把动画录下来，你可以拉动动再画的过程，甚至可以做一些简单的修改。

直接编辑网页

在你的 console 里 输入下面的命令：

document.designMode = "on"

于是你就可以直接修改网页上的内容了。

P.S. 下面这个抓屏中还演示了一个如何清空console的示例。你可以输入 clear() 或是 按 Ctrl+L（Windows下），CMD + K (Mac下)

网络限速

你可以设置你的网络的访问速度来模拟一个网络很慢的情况。

复制HTTP请求

这个是我很喜欢 的一个功能，你可以在 network选项卡里，点击 XHR 过滤相关的Ajax请求，然后在相关的请求上点鼠标右键，在菜单中选择： Copy => Copy as cURL，然后就可以到你的命令行下去 执行 curl 的命令了。这个可以很容易做一些自动化的测试。

友情提示：这个操作有可能会把你的个人隐私信息复制出去，比如你个人登录后的cookie。

抓个带手机的图

这个可能有点无聊了，不过我觉得挺有意思的。

在device显示中，先选择一个手机，然后在右上角选 Show Device Frame，然后你就看到手机的样子了，然后再到那个菜中中选 Capture snapshot，就可以抓下一个有手机样子的截图了。

我抓的图如下（当然，不是所有的手机都有frame的）

设置断点

除了给Javascript的源代码上设置断点调试，你还可以：

给DOM设置断点

选中一个DOM，然后在右键菜单中选 Break on … 你可以看到如下三个选项：

给XHR和Event Lisener设置断点

在 Sources 面页中，你可以看到右边的那堆break points中，除了上面我们说的给DOM设置断点，你还可以给XHR和Event Listener设置断点，载图如下：

关于Console中的技巧

DOM操作

chrome会帮你buffer 5个你查看过的DOM对象，你可以直接在Console中用 $0, $1, $2, $3, $4来访问。

你还可以使用像jQuery那样的语法来获得DOM对象，如：$("#mydiv")

你还可使用 $$(".class") 来选择所有满足条件的DOM对象。

你可以使用 getEventListeners($("selector")) 来查看某个DOM对象上的事件（如下图所示）。

你还可以使用 monitorEvents($("selector")) 来监控相关的事件。比如：

monitorEvents(document.body, "click");