《小白HTML5成长之路35》再做一个顶部的提示信息

最近天气干燥，小白和老朱都感冒了，虽然状态不好，小白还是没有停止HTML5前进的脚步，他憋了一股劲一定要在2018年到来之前提高一个台阶。看到老朱来到办公室，小白赶紧凑过去：“朱哥，再来点新东西吧！”

老朱哑着嗓子说道：“你先试着把昨天的弹窗增加一个出现的动画吧，正好熟悉一下CSS3动画。”

小白：“消失的动画用不用做？”

“消失先不用做，消失我们用了remove直接移除了弹窗容器，就算加上css3动画也显示不出来，这块功能我们以后有时间再说。弹窗控件以后你肯定会经常使用，你可以根据以后的需求慢慢完善它。”

“好吧！那我先把CSS3动画加上。”

小白做好以后找到老朱说道：“我给中间的弹窗添加了一个透明度从0变到1的过程，宽度也做了变化。背景添加了一个透明度从0变到0.5的过程。你看一下效果。”

“好的！弹窗就先这样吧！以后慢慢完善。既然我们已经做了一个简单的弹窗控件，是不是在这个基础上还能做一个顶部提示信息的控件？顶部提示信息也很有用的，经常有一些提示信息是不需要用户确认的，出现几秒钟后消失就可以。”

小白想了想：“恩，可以啊！不但能做提示信息，还能做其他的一些弹窗功能，我先试着实现提示信息的功能吧！”。

大概过了半个小时时间，小白找到了老朱，他对老朱说：“我给Layer添加了一个msg方法用来添加提示信息，可是没有确定按钮我该怎么让它消失呢？您先看一下我的代码吧！”

“页面里面我做了两个色块，点击色块提示当前选中的色块颜色值。”

老朱说道：“你可以使用JavaScript里面的setTimeout函数，这个函数可以在特定时间结束以后执行一个或多个操作。setTimeout（‘要执行的js代码字符串’，等待的毫秒数）。你在Layer的msg方法中增加一个setTimeout函数处理一下就可以了。”

“恩，果然可以了！我再调整一下css样式，捎带把CSS3动画加上。”

老朱看了以后说道：“不错嘛，进步很快，还让提示信息背景宽度做了适配。不过还有些问题，你现在通过class进行查找移出提示信息，如果连续点色块，提示信息就会产生冲突，所以最好能给每一个提示信息增加一个索引或者id，这样就不会产生冲突了。你再试试！”

过了一会儿，小白高兴的找到老朱，说道：“我处理好了，现在不会冲突了，你看一下效果！”

“我通过当前页面中提示信息的数量给新的提示信息增加id，当前提示信息的位置根据上一条未消失信息的位置来确定。”

老朱看完以后说道：“恩，不错！不过还能细化，以后使用的时候碰到具体问题你再慢慢优化它吧！你现在已经做得很不错了。”

小白说：“恩，这些功能我以后可以根据自己的理解对它进行优化。把功能做成控件使用的时候真是太方便了，我以后要给用户提示一些信息的时候直接使用Layer.msg()，传入要提示的话就可以了。”

想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！

本篇文章与31、32、33、34内容连续