前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >《小白HTML5成长之路35》再做一个顶部的提示信息

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

作者头像
企鹅号小编
发布2018-01-25 11:12:43
1.2K0
发布2018-01-25 11:12:43
举报
文章被收录于专栏:编程

最近天气干燥,小白和老朱都感冒了,虽然状态不好,小白还是没有停止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内容连续

本文来自企鹅号 - 无名码农媒体

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文来自企鹅号 - 无名码农媒体

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档