<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./QQmusic/font_l89wpv56fh/iconfont.css">
</head>
<!-- css -->
<style>
body {
background: url(https://wegame.gtimg.com/g.55555-r.c4663/wegame-home/banner-bg.cd9c626b.jpg);
}
div {
width: 200px;
height: 300%px;
line-height: 50%;
}
input {
width: 200px;
height: 35px;
background: rgba(0, 0, 0, 0.0);
border-radius: 10px;
font-size: 20px;
}
ul li {
line-height: 30px;
}
</style>
<body>
<!-- html -->
<p>
<input type="text" placeholder="请 选 择 游 戏 名 称">
<span class="iconfont icon-sousuo"></span>
</p>
<div>
<ul style="display:none">
<li>英雄联盟</li>
<li>地下城与勇士：创新世纪</li>
<li>CF:穿越火线</li>
<li>QQ飞车</li>
<li>生死狙击</li>
<li>NBA2KOL2</li>
</ul>
</div>
<!-- js -->
<script>
//获取元素
var ipt = document.querySelector("input");
var oUl = document.querySelector("ul");
var oLi = document.querySelectorAll("li");
var span = document.querySelector("span")
//console.log(ipt,search,oUl,oLi);
//点击input显示"ul"
ipt.onclick = function () {
oUl.style.display = "block";
}
//移动事件li选项切换颜色
oLi.forEach(function (item, idx) {
console.log(item);
item.onmouseenter = function () {
oLi.forEach(function (x, i) {
x.style.background = '';
//console.log(x,i);
})
item.style.background = 'gray';
}
//点击里li,输出文本框获取
item.onclick = function () {
ipt.value = item.innerHTML;
}
//点击搜索恢复初始值
span.onclick = function () {
ipt.value = "";
}
})
//移出隐藏ul
oUl.onmouseleave = function () {
oUl.style.display = "none";
}
</script>
</body>
</html>
扫一扫
441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
