一个模仿-百度一下,你就知道-的代码

<div id="mybody">
    <div id="navigation_bar" v-if="logoShow">      //两个span之间如果换行的话就会产生空格,这样写的话就没有空格,也显得比较专业
        <span>新闻</span><span>hao123</span><span>地图</span><span>视频</span><span>贴吧</span><span>学术</span><span>登录</span><span>设置</span>
    </div>
    <div id="logoDiv" v-if="logoShow">
        <img src="img/bd_logo1.png" width="270" height="129"/>
    </div>
    <div id="inputDiv" v-bind:style="{margin:inputDivStyle}">
        <input id="inputView" type="text" v-model="word"><input id="submitView" type="submit" value="百度一下">
        <div id="keywordDiv" v-if="keywordShow">
            <div v-for="item in keywordList" @click="selectItem(item)">{{item.word}}</div>
        </div>
    </div>
    <div id="newListDiv">
        <div v-for="item in newsList">
            <div class="newsitem_title">{{item.title}}</div>
            <div class="newsitem_desc">{{item.desc}}</div>
            <div class="newsitem_href">{{item.href}}</div>
        </div>
    </div>

</div>

这里是样式(css)

注意:前端页面中不能出现红、黑、黄等的这种极致的颜色,不然会显得页面很丑,也不高大上

<style type="text/css">
html,body{
    width: 100%;/*默认值是0*/
    height: 100%;/*默认值是0*/
    margin: 0px;
    padding: 0px;
}
#mybody{
    width:100%;
    height: 100%;
    /*background-color:red;*/
}
#navigation_bar{
    width: 100%;
    height: 40px;
    /*background-color: green;*/
    text-align: right;/*文字内容靠右*/
    line-height: 40px;/*保证文字的垂直方向居中*/
}
#navigation_bar span{
    padding: 0px 10px 0px 0px;
    font-size: 14px;
    /*color:#333;*/
    color:#404040;
}
#logoDiv{
    width: 270px;
    height: 129px;
    /*background-color: blue;*/
    margin: 0 auto; /* 布局居中的一种写法 */
}
#inputDiv{
    width: 655px;
    height: 180px;
    /*background-color: yellow;*/
    /*margin: 0 auto;此处不写,因为在后面进行绑定*//* 布局居中的一种写法 */
    padding: 15px 0px 0px 0px;
}
#inputView{
    border:solid 1px #4791ff;
    width:530px;
    height: 15px;
    font-size: 16px;
    padding: 10px;

}
#submitView{
    width:98px;
    height:37px;
    border: solid 1px #4791ff;
    background-color: #3385ff;
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
}
#submitView:HOVER {
    background-color: #317ef3;/*鼠标移动过去时,背景颜色发生变化*/
}
#keywordDiv{
    width: 650px;
    height: 100px;
    background-color: #ffffff;
    border: solid 1px #cccccc;
}
#keywordDiv div{
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    font-weight: bold;
    padding: 5px 0px 0px 5px;
}
.newsitem_title{
    color: blue;
    font-size: 16px;
    padding: 10px 0px 0px 10px;
}
.newsitem_desc{
    color: #666666;
    font-size: 12px;
    padding: 10px 0px 0px 10px;
}
.newsitem_href{
    color: #528000;
    font-size: 12px;
    padding: 10px 0px 30px 10px;
}
</style>

这里是JavaScript

<script src="js/vue.js"></script>  //引入vue.js文件
<script src="js/jquery-3.2.1.min.js"></script>
<script>
var clickMyself = false;//用于标记是否我自己点击而产生对model一个改变
var myModel = {logoShow:true,keywordShow:false,word:‘‘,inputDivStyle:‘0 auto‘,keywordList:[],newsList:[]};
var myViewModel = new Vue({
    el:‘#mybody‘,
    data:myModel,
    methods:{
        selectItem:function(item){
            this.word=item.word;
            this.keywordShow=false;
            clickMyself = true;//标记一下,是我自己点击
        }
    },
    computed:{

    },
    watch:{
        word:function(){
            if(clickMyself==true){
                clickMyself = false;
                console.log(‘客户自己选中,不是输入,此方法自动退出‘);
                return;//如果是自己点击,就不用再去访问下面代码,避免重复访问后台
            }
            console.log(‘模型word的值变了‘);
            this.logoShow=false;
            this.inputDivStyle=‘10px‘;
            //this.keywordShow=true;//移动到成功事件之后
            $.ajax({
                url:‘ServiceAPI001.jsp‘,
                type:‘GET‘,
                //data:clientInput,
                dataType:‘json‘,
                timeout:3000,
                success:function(result){
                    myModel.keywordShow=true;
                    myModel.keywordList = result.keywordList;
                    myModel.newsList = result.newsList;
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    alert(‘服务器忙,请不要说脏话,理论上大家都是文明人‘);
                    alert(textStatus+XMLHttpRequest.status);
                }
            });
        }
    }
});
</script>

然后再写一个jsp文件,出现一点内容

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%><%
        Thread.sleep(500);

    %>  //这里添加的是内容,也就是你在搜索框随便打上东西然后会出现的内容    {"keywordList":[{"word":"刘亦菲重返校园"},{"word":"刘亦菲"},{"word":"刘德华"},{"word":"刘诗诗"}],"newsList":[{"title":"新闻标题1","desc":"内容描述1","href":"http://xxx/link1.jsp"},{"title":"新闻标题2","desc":"内容描述2","href":"http://xxx/link2.jsp"},{"title":"新闻标题3","desc":"内容描述3","href":"http://xxx/link3.jsp"}]}

这样就??了,一个模仿百度的搜索就做好了,当然页面没有怎么多的内容。

时间: 2024-10-01 09:44:29

一个模仿-百度一下,你就知道-的代码的相关文章

模仿百度文库

---恢复内容开始--- 方案: Txt/Word/Excel/PPT=>PDF(OpenOffice+JodConverter)=>SWF(pdf2swf)=>FlexPaper浏览 第一步: Txt/Word/Excel/PPT=>PDF(OpenOffice+JodConverter) 准备: 1.下载:Apache_OpenOffice_incubating_3.4.1_Win_x86_install_zh-CN.exe 下载地址:http://www.openoffice

c#模仿百度关键词提示

1:from窗体环境:TextBox(关键词文本框).ListBox(提示框) 2:实现思路: 2.1:以输入的关键词为条件查询  数据库(在查询中以点击率排序就加一个order by 点击率 desc)返回多行单列数据结果集合.再一一赋值到listBox中显示. 2.2:在TextBox中如果侦听键盘 if(Down(小键盘向下)) 则先获取到ListBox选中的索引,如果返回-1 或者x+1的值大于ListBox.count()   则初始值=0; 否则为ListBox索引值为x+1 els

ZLMusic模仿百度音乐应用项目源码

func stopPlayMusic() { if (self.isStop == true) { self.player.pause() btn .setTitle("播放", forState:UIControlState.Normal) //var paused = player.currentTime self.songImageView.layer.speed = 0.0 }else{ self.player.play() btn .setTitle("暂停&quo

模仿百度地图的LBS服务——离线地图篇 Part 2 (v 3.1.1)

一.前言 转载请标明出处:http://blog.csdn.net/wlwlwlwl015/article/details/41492031 这一篇blog写的真心不容易,我只想说我这种菜鸟去高仿百度地图去做LBS服务真心有点作死,期间本想放弃,做简单点算了,但不能说服自己.最后通过F6去一行一行的debug(新手朋友注意这是最好的解决问题的方式没有之一),最后成功完成了核心的功能.上一篇blog高仿了百度地图离线地图模块中的"城市列表"部分(模仿百度地图的LBS服务--离线地图篇 P

模仿百度搜索

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>模仿百度搜索 </title> </head> <link rel="stylesheet" href="css/bootstrap.css" /> <style type="text/css"> #co

jsPlumb插件做一个模仿viso的可拖拉流程图

前言 这是我第一次写博客,心情还是有点小小的激动!这次主要分享的是用jsPlumb,做一个可以给用户自定义拖拉的流程图,并且可以序列化保存在服务器端. 我在这次的实现上面做得比较粗糙,还有分享我在做jsPlumb流程图遇到的一些问题. 准备工作 制作流程图用到的相关的脚本: 1 <script src="<%= ResolveUrl("~/resources/jquery/jquery-1.11.1.min.js")%>" type="t

用C3中的animation和transform写的一个模仿加载的时动画效果

用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h2>用C3中的animation和transform写的一个模仿加载的时动画效果</h2> <div class="demo"> <div></div> <div></div> <div></d

做一个模仿Smarty的简易模版

---恢复内容开始--- 今天终于学习完了一个慕课网的正则表达式的视频,感觉挺不错的,推荐给大家 下面是我学习写的一些代码 首先要先明白什么是Smarty模版. 这种模版就是将一个文件中的代码运用正则替换为令一段代码以供下一步的运行.也就是说可以通过这个模版来省略很多语法,结构上面的规则,从而很好的将前端开发和后端开发分离,不需什么都懂,在这个山寨的模版里面主要是将前端的HTML代码中的一些字段替换成可被运行的PHP代码,完成给用户的最后的输出. 好,首先是新建的项目,既然有编译,就有个源文件和

Web前端学习阶段总结-------模仿百度页面

以"百度"首页为模板,设计百度仿真页面,效果如: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模仿百度</title> </head> <body> <p align="right"> <a href="