今日完成：

完成js任务一，开始学习任务二。同时分享了小课堂。

明日计划：
继续学习任务二，任务二需要的知识点跳转页面、数组随机已经学习。主要之前的任务也遇到过。

遇到的问题：

今天修改了任务一的逻辑。昨天我是在鼠标点击事件的函数下直接包括获取格子、颜色包括定时器等操作；今天换了思路，把获取格子、颜色等动作设置为单独的函数，然后将定时器操作写在点击事件之间直接调取其他函数。

但是遇到一个问题，导致我的if/eles一直不对，改成do while也不行。调了一上午，中午才发现是乱用函数参数导致，if/eles的逻辑是没问题的，汗。。。

收获：

1.更了解数组取值、随机等的方法。用for/in遍历数组还是很好用的。

2.学js逻辑是很重要的，逻辑复杂了会多很多工作。这个以后我要注意。

今日小课堂内容分享：

rgba和opacity的透明效果有什么不同？display：none和visiblity：hidden有什么区别？

  小课堂【成都第67期】

分享人：何华飒

            目录

            1.背景介绍

            2.知识剖析

            3.编码实战

            4.参考文献

            5.更多讨论

            一.背景介绍

 RGBA和OPACITY背景介绍

大家在写页面时，会用到各种元素，比如div,  img等等。有时候一张页面会放好几张图片，图片如果显示效果都一样，看起来很单调，整个页面给人的感觉会很硬。那么，怎么能让页面的元素有一种多样化，甚至有一种朦胧美呢？于是，有了opacity和rgba()这两个属性。 其中，opacity属性是css3新提的属性。

display：none和visibility背景介绍

顾名思义，display：none和visibility是与元素显示有关系的，这两个属性都可以控制元素的 显示与隐藏。

究其作用，我们可以知道，为了提高用户的体验，实现更好的页面甚至元素与用户的互动，当用户开始某个操作时，可以通过display和visibility

 这两个属性让元素显示或者隐藏, 或者以哪种方式显示。

综上所述；其实某个元素（或属性）产生的背景和原因，就是为了满足日益增长的用户体验要求。

            二.知识剖析

 1.Opacity和rgba()的用法以及二者的区别： 首先，opacity 中文翻译为：不透明度。

语法--opacity：value | inherit ; 

取值说明: value 不透明度，从0.0(完全透明)到1.0（完全不透明）。

关于Opacity兼容性

 Opacity是css3中的新属性，需要注意兼容性。

                IE: filter:alpha(opacity)

                Mozilla: -moz-opacity

                Safari: -khtml-opacity

.opacity{
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* 老版Mozilla */
-khtml-opacity:0.5;/* 老版Safari */
opacity: 0.5; /* 支持opacity的浏览器*/
}

     其次，看一下rgba(),

     语法：rgba(r,g,b,a)   

  取值说明：

 R：红色值。正整数 | 百分数

 G：绿色值。正整数 | 百分数

 B：蓝色值。正整数 | 百分数

A：Alpha透明度。取值0~1之间。

正整数为十进制0~255之间的任意值，百分数为0%~100%之间的任意值。RGBA是在R（Red）G（Green）B（Blue）模式上增加了alpha通道，alpha通道是不透明度，即，如果一个元素的alpha通道数值为0%（或0），那该元素就是完全透明的（也就是看不见的，但是可以透过该元素看到该元素下的元素），数值为100%（或255）时则意味着该元素完全不透明。

 然后，RGBA和opacity都是用来设置元素的不透明度的，那么两者有什么区别呢？ opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。简单来说就是opacity作用于元素和元素所有内容的透明。

看一下例子

                <a href="https://ptteng.github.io/PPT/demo/css-06-RGBA%20and%20opacity/rgba-demo.html">demo</a>

 所以，rgba相对于opacity还是技高一筹的，当然只要是涉及颜色的，都可以用rgba来设置。比如background-color,text-shadow, box-shadow。

            2.关于CSS 中display：none 和visibility的用法和区别？

            display  指定一个元素如何显示，visibility指定一个元素应该显示还是隐藏。Display属性可以改变一个元素的显示状态。

            主要结合元素自身默认的display属性，根据布局页面的需求，来控制元素的显示状态,比如可以让inline元素，显示为inline-block或者block元素。反之亦然。

            Visibility属性，表示元素是否可见。可取的值有--<br>

                默认值：visible<br>

                hidden,元素是不可见的<br>

                Inherit从父元素继承其属性值。

            重点要讲的他们的区别：是display值为none时，visibility值为hidden时的区别。

            当元素设置display属性值为none时，元素会消失不可见，屏幕阅读器不会读取这个元素，其本来所在的位置会让其后面的元素占据（元素是不存在，不占据位置的）。

            而，visibility：hidden；表现上也是元素不见了，但是依然占有位置空间，仅仅是在视觉上“消失了”，hidden 也就是隐藏。

            而对使用display：none；浏览器不会解析，搜索引擎可能会认为被隐藏的元素属于垃圾信息，会忽视。而且，屏幕阅读器会忽略被隐藏的文字。

            <a href="https://ptteng.github.io/PPT/demo/css-06-RGBA%20and%20opacity/display-demo.html">demo</a>

            最后，对使用visibility：hidden；虽然隐藏了，但是还是占了位置，需要配合position：relative；和position：absolute;来使用，没有display：none；那么简单，灵活。

            最后的最后，visibility：hidden；转换为visibility：visible;时，跟display：none转换为display：block;性能要好， 因为display在切换可见性时，会产生reflow,他要重新构建frame,当然要比visibility：visible；慢。

            三.编码实战

                display:none 的应用

                <p style="text-align: right">---利用display:none 实现hover效果

                <a href="https://ptteng.github.io/PPT/demo/css-06-RGBA%20and%20opacity/display-demo.html">demo</a>

            四.参考文献

            参考一：<a href="http://www.w3cplus.com/content/css3-rgba">rgba详解</a>

            参考二:<a href="http://www.jb51.net/css/67359.html" target="_blank">关于CSS属性中visibility隐藏和display消失的区别简析</a>

                五、更多讨论

            rgba、opacity ；display：none、visibility：hidden各自适合的应用场景？

            感谢大家观看

           BY : 何华飒