<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
}
body{
background:url("img/logo1.jpg")no-repeat;
background-size:100% 100%;
}
.box{
1000px;
height:400px;
margin:0 auto;
}
input{
460px;
height:35px;
margin-top:10px;
margin-left:200px;
border:1px solid cornflowerblue;
display: inline-block;
}
button{
100px;
height:40px;
color:white;
background-color: cornflowerblue;
display: inline-block;
}
li{
margin-left:200px;
list-style: none;
}
#kw{
display: none;
}
#logo{
560px;
height:260px;
margin-left:376px;
margin-top:250px;
background:url("img/logo.png") no-repeat;
background-size:100% 100%;
}
.col{
color:#F7A04F;
}
.col1{
color:#378BFF;
}
</style>
</head>
<body>
<!--<input type="text" id="ip" /><br/>-->
<div id="logo"></div>
<div class='box'>
<input type="text" id='inp' value="" >
<button id="btn">百度一下</button>
<ul id='kw'>
<li><span class="col">1、</span>2017年中国的GDP</li>
<li><span class="col">2、</span>印度购14万枪支</li>
<li><span class="col">3、</span>普京健康遭质疑</li>
<li><span class="col1">4、</span>任正非自罚100万</li>
<li><span class="col1">5、</span>奥尼尔儿子落选</li>
<li><span class="col1">6、</span>倒卖网红食品</li>
<li><span class="col1">7、</span>babby为儿子庆生</li>
<li><span class="col1">8、</span>以色列道歉</li>
<li><span class="col1">9、</span>动车突然停车等人</li>
<li><span class="col1">10、</span>五五开被罚100万</li>
</ul>
</div>
<!--<table id="tb">
<tr>
<td>哈哈1</td>
<td>哈哈2</td>
<td><button class="del">删除1</button></td>
</tr>
<tr>
<td>呵呵1</td>
<td>呵呵2</td>
<td><button class="del">删除2</button></td>
</tr>
</table>-->
<script>
// var dels = document.getElementsByClassName("del");
// //dels.onClick = deleteTr();
// for (var x of dels) {
// x.onclick = deleteTr;
// }
// function deleteTr(){
// this.parentNode.parentNode.move();
// }
var btn = document.getElementById("btn");
var arr = document.querySelectorAll("li");
document.getElementById("inp").onfocus = function(){
arr[1].parentNode.style.display = "block";
}
document.getElementById("inp").onblur = function(){
arr[1].parentNode.style.display = "none";
}
btn.onclick = function(){
var ip = document.getElementById("inp");
if(ip.value!=""){
for(var i=arr.length-1;i>=0;i--){
if(i==0){
arr[i].innerHTML = ip.value;
}else{
arr[i].innerHTML=arr[i-1].innerHTML;
}
}
}
}
</script>
</body>
</html>