Web系列:网页版超级计算器,仿百度搜索框,仿百度视频选项卡

         最近忙里抽闲,搞了些Web方面的小东东,即HTML+CSS+Javascript应用。

         感觉这些小东西挺有意思,可以很好的锻炼自己的动手能力,巩固知识。

         扔在硬盘太可惜了,因此拿出来分享一下,给需要的童鞋参考。

         其实俺的水平还很菜,做的这些东西根本没啥实用性,因为小菜试了试只兼容火狐和谷歌,IE下就悲剧了。。。

         前台这些东西,没四五年工作经验,真是不敢做。。。

        

        下面简单介绍一下这些小东东。

         以下介绍的所有应用,文章末尾提供打包下载,里边有非常详细的注释。

       

网页版超级计算器:

 

         这个计算器核心是Javascript的应用,为啥叫超级计算器呢?因为小菜用Javascript写了个简单的表达式分析器,可以用来计算表达式的值,支持括号。

         可以供大家学习一下小菜是怎么解析表达式的,绝对没有用堆栈,非常容易理解,哈哈。

         别的就没啥了,效果如下:

 

 

 

仿百度视频选项卡

 

         这个小应用主要是CSS+DIV布局的应用,看起来挺简单,但如果自己动手做,还是比较麻烦的,最困难的就是兼容性,实在是可望不可及,期待读者来完善,哈哈。

         百度的网站简洁大方,值得学习!

         刚刚看了下百度视频,让小菜差点吐血。。。百度竟然改版了!!小菜前天才仿制成功的,今天竟然改版了。。。有机会再仿!

         个人觉得仿的还是挺像的,截图如下:

 

 

 

 

仿百度搜索框

 

         地球人应该都见过百度首页的搜索框,看着挺简洁,但是做起来却不是那么简单,很有技术含量,当然,最头疼的还是兼容性问题。

         小菜仿的这个搜索框基本和百度的一样,但没有识别键盘的上、下方向键,这个功能不同的浏览器差异太大,小菜精力有限,就没有实现。

         为了演示,当向文本框输入内容时,下面弹出的列表固定显示10个元素,元素的内容是文本框内容+顺序号。

         提醒读者一下,百度已经提供了搜索的API,可以直接调用,不需要自己去写。

         效果图如下:

 

 

 

网页版超级计算器,仿百度视频选项卡,仿百度搜索框打包下载:

 

点我下载

 

里边的代码有非常详细的注释,希望对读者有所帮助。

 

posted @ 2013-03-31 10:09  杨元  阅读(7499)  评论(2编辑  收藏  举报