Web系列:网页版超级计算器,仿百度搜索框,仿百度视频选项卡
最近忙里抽闲,搞了些Web方面的小东东,即HTML+CSS+Javascript应用。
感觉这些小东西挺有意思,可以很好的锻炼自己的动手能力,巩固知识。
扔在硬盘太可惜了,因此拿出来分享一下,给需要的童鞋参考。
其实俺的水平还很菜,做的这些东西根本没啥实用性,因为小菜试了试只兼容火狐和谷歌,IE下就悲剧了。。。
前台这些东西,没四五年工作经验,真是不敢做。。。
下面简单介绍一下这些小东东。
以下介绍的所有应用,文章末尾提供打包下载,里边有非常详细的注释。
网页版超级计算器:
这个计算器核心是Javascript的应用,为啥叫超级计算器呢?因为小菜用Javascript写了个简单的表达式分析器,可以用来计算表达式的值,支持括号。
可以供大家学习一下小菜是怎么解析表达式的,绝对没有用堆栈,非常容易理解,哈哈。
别的就没啥了,效果如下:
仿百度视频选项卡
这个小应用主要是CSS+DIV布局的应用,看起来挺简单,但如果自己动手做,还是比较麻烦的,最困难的就是兼容性,实在是可望不可及,期待读者来完善,哈哈。
百度的网站简洁大方,值得学习!
刚刚看了下百度视频,让小菜差点吐血。。。百度竟然改版了!!小菜前天才仿制成功的,今天竟然改版了。。。有机会再仿!
个人觉得仿的还是挺像的,截图如下:
仿百度搜索框
地球人应该都见过百度首页的搜索框,看着挺简洁,但是做起来却不是那么简单,很有技术含量,当然,最头疼的还是兼容性问题。
小菜仿的这个搜索框基本和百度的一样,但没有识别键盘的上、下方向键,这个功能不同的浏览器差异太大,小菜精力有限,就没有实现。
为了演示,当向文本框输入内容时,下面弹出的列表固定显示10个元素,元素的内容是文本框内容+顺序号。
提醒读者一下,百度已经提供了搜索的API,可以直接调用,不需要自己去写。
效果图如下:
网页版超级计算器,仿百度视频选项卡,仿百度搜索框打包下载:
里边的代码有非常详细的注释,希望对读者有所帮助。