利用js实现vue制作百度搜索框首页功能代码



7 24 9



特效描述:利用js实现 vue 制作百度 搜索框 首页功能代码,利用js实现vue制作百度搜索框首页功能代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/input.css" type="text/css" />
<link rel="stylesheet" href="css/baidu.css">
<link rel="stylesheet" href="css/input.css" type="text/css" />
<link rel="stylesheet" href="css/baidu.css">

2. 引入JS

<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--<link rel="stylesheet" href="css/input.css" type="text/css" />-->
<link rel="icon"href="img/pic1.jpg">
</head>
<script>
    window.onload=function(){
        new Vue({
            el:'#box',
            data:{
                myData:[],
                t1:'',
                now:-1,
                isShow:true,
            },
            methods:{
                get:function(ev){
                    if(ev.keyCode==38 || ev.keyCode==40)return;
                    if(ev.keyCode==13){
                        window.open('https://www.baidu.com/s?wd='+this.t1);
                        this.t1='';
                    }
                    this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                        wd:this.t1
                    },{
                        jsonp:'cb'
                    }).then(function(res){
                        this.myData=res.data.s;
                        this.isShow='true'
                    },function(){
                    });
                },
                search:function(){
                    window.open('https://www.baidu.com/s?wd='+this.t1);
                    this.t1='';
                },
                changeDown:function(){
                    this.now++;
                    if(this.now==this.myData.length)this.now=-1;
                    this.t1=this.myData[this.now];
                },
                changeUp:function(){
                    this.now--;
                    if(this.now==-2)this.now=this.myData.length-1;
                    this.t1=this.myData[this.now];
                },
                clk:function(e){
                    var index=e.target.innerText;
                    this.t1=index;
                    var input=document.getElementById("input");
//                    console.log(input)
                    input.style.color="blue";
                    input.focus()
                    this.isShow=false;
                    var boxUl=document.getElementById("boxUl");
                    console.log(boxUl);
                }
            }
        });
    };
</script>
<body  >
<header>
    <nav>
        <ul class="nmb">
            <li><a href="#">糯米</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">好123</a></li>
            <li><a href="#">地图</a></li>
            <li><a href="#">视频</a></li>
            <li><a href="#">贴吧</a></li>
            <li><a href="#">登录</a></li>
            <li class="settings"><a href="#">设置</a>
                <div class="setbox">
                    <div class="box">
                        <div class="triangle1"></div>
                        <div class="triangle2"></div>
                    </div>
                    <ul class="setItem">
                            <li>搜索设置</li>                                                                                                                                                                                                                                                                                                                                                                                                            <li>搜索设置</li>
                            <li>高级设置</li>
                            <li>关闭预测</li>
                            <li>搜索历史</li>
                        </ul>
                    </div>
                </li>
                <li id="more">
                    <a href="#">更多产品</a>
                    <div>
                        <span>更多产品</span>
                        <br/>
                        <a href="#" class="imgItem">
                            <span class="imglist music">
                            </span>
                            音乐
                        </a>
                        <a href="#" class="imgItem">
                            <span class="imglist tupian">
                            </span>
                            图片
                        </a>
                        <a href="#" class="imgItem">
                            <span class="imglist zhidao">
                            </span>
                            知道
                        </a>
                        <a href="#" class="imgItem">
                            <span class="imglist wenku">
                            </span>
                            文库
                        </a>
                        <a href="#" class="imgItem">
                            <span class="imglist fengyunbang">
                            </span>
                            风云榜
                        </a>
                        <a href="#" class="imgItem">
                            <span class="imglist baidutuiguang">
                            </span>
                            百度推广
                        </a>
                        <a href="#" class="imgItem">
                            全部产品
                        </a>
                    </div>
                </li>
            </ul>
        </nav>
    </header>
    <section>
        <img src="img/baidu1.png" title="百度一下你就知道" alt="未加载成功">
            <div id="box" >
                <sapn class="center">
                <span class="center_left">
                    <input id="input" type="text" v-model="t1" @keydown="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()" value="请输入你想要搜索的关键字" onFocus="clearText(this)">
                    <ul id="boxUl" v-if="isShow">
                        <li v-text="value" v-for="value in myData" :class="{gray:$index==now}" @click="clk($event)" >
                            <!--{{value}}-->
                        </li>
                    </ul>
                </span>
                <span class="center_right">
                    <input type="button" value="百度一下" @click="search()">
                </span>
                </sapn>
            </div>
    </section>
    <div id="backgroundColor"></div>
    <div id="loginForm">
        <div><label for="userName">用户名:</label><input type="text" id="userName"></div>
        <div><label for="userPassword">密码:&nbsp;</label><input type="password" id="userPassword"></div>
        <div><input type="button" id="login" value="登录" onClick="login()"></div>
        <span id="close" onClick="hideLogin()">x</span>
    </div>
<script>
    function clearText(elm){
        elm.value="";
        elm.onfocus=null;
    }
    function changeText(elm){
        elm.value="点击下"
    }
    function showLogin(){
        document.getElementById("backgroundColor").style.display="block";
        document.getElementById("loginForm").style.display="block";
    }
    function hideLogin(){
        document.getElementById("backgroundColor").style.display="none";
        document.getElementById("loginForm").style.display="none";
    }
    function login() {
        var username = document.getElementById("userName")
        var password = document.getElementById("userPassword")
        if (username.value.trim().length==0) {
            username.style.borderColor = "red"
            return;
        }
        if (password.value.trim().length==0) {
            password.style.borderColor = "red"
            return;
        }
        window.location.href="1215text.html?username="+username.value;
    }
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 搜索框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到