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


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

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

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

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

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

            

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

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

           

    网页版超级计算器:

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

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

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

     

    仿百度视频选项卡

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

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

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

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

     

    仿百度搜索框

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

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

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

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

             效果图如下:

     

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

    点我下载

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

  • 相关阅读:
    Java多线程之 对同一个值操作
    Java 之 应用多线程计算1+2+...+100之多种方法比较(二)
    Java 之 应用多线程计算1+2+...+100之多种方法比较(一)
    SQL语句优化
    第六章:shiro Realm相关对象
    第五章:shiro密码加密
    第四章:shiro的INI配置
    第三章:shiro授权认证
    第二章:shiro身份验证
    第一章:Shiro简介
  • 原文地址:https://www.cnblogs.com/iyangyuan/p/2991321.html
Copyright © 2020-2023  润新知