使用JS模拟下拉框
使用js达到css中下拉框效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{padding: 0;margin: 0}
li{list-style: none;}
#box{position: relative;margin: 30px auto;width: 400px;position: relative;}
input{margin-top: 20px;}
#txt{margin-top: 20px;width: 300px;height: 30px;box-shadow: 0 0 3px #666;
border: 0;border-radius: 4px;outline: none;font: 18px/30px "";text-indent: 8px;
box-sizing: border-box;color: #666;position: absolute;left: 20px;top: 20px;}
#btn{width: 50px;height: 30px;background: none;border: 0;
border-radius: 4px;box-shadow: 0 0 4px #999;outline: none;
box-sizing: border-box;position: absolute;left: 320px;top: 20px;cursor: pointer;}
ul{width: 300px;position: absolute;top: 70px;left: 20px;border-radius: 4px;
box-sizing: border-box;box-shadow: 0 0 4px #999;padding-top: 2px;
display: none;}
li{height: 30px;float: left;clear: both;font: 16px/24px "";text-indent: 8px;
cursor: pointer;width: 100%;}
.active{background: #ccc;}
</style>
</head>
<body>
<div id="box">
<span id="txt">请输入水果名称</span>
<input type="button" id="btn" value="搜索">
<ul id="ulb">
<li>香蕉</li>
<li>西瓜</li>
<li>草莓</li>
<li>苹果</li>
<li>橙子</li>
<li>火龙果</li>
<li>牛油果</li>
</ul>
</div>
</body>
<script>
//1.选择元素
var otxt = document.getElementById('txt');
var oul = document.querySelector('#ulb');
var obtn = document.getElementById('btn')
var ali = oul.children;
// 设置默认根据内容显示当前项的索引：pag
// 6.设置默认显示第几项，默认索引index
var index = pag = 0;
// 给span做第二次点击效果，0时为显示，1时为隐藏
var type = 0;
// 7.初始化样式和内容
otxt.innerHTML = ali[index].innerHTML;
setActive();
// 2.点击显示
otxt.onclick = function (eve){
var e = eve || window.event;
e.stopPropagation();
if(type == 0){
// 每次点开之后，将样式初始化成显示的内容
oul.style.display = 'block';
type = 1;
}else{
oul.style.display = 'none';
type = 0;
}
for(var j = 0;j<ali.length;j++){
ali[j].className = '';
}
// 点击span标签显示ul，根据内容索引，显示当前项
ali[pag].className = 'active';
}
// 点击空白隐藏
for(var i = 0;i <ali.length;i++){
ali[i].index = i;
// 4.li的鼠标进入事件
ali[i].onmouseover = function(){
index = this.index;
// 5.设置当前项
setActive();
}
// li的点击事件
ali[i].onclick = function (){
// 将点击的li的内容设置给span，同时修改index为当前点击的li的索引
otxt.innerHTML = this.innerHTML;
index = this.index;
// 点击li确定内容时，要修改内容索引
pag = index;
}
}
// 键盘事件
document.onkeydown = function (eve){
// 如过ul没有显示，按下键盘没有效果
if(oul.style.display !='block') return;
var e = eve || window.event;
var keyCode = e.keyCode || e.which;
if(keyCode == 38 ){
// 按下键盘上键时，计算索引
if(index == 0){
index = ali.length-1;
}else{
index--;
}
// 设置当前项，修改内容
setActive();
otxt.innerHTML = ali[index].innerHTML;
// 按下键盘时，也要修改内容索引为当前li的索引
pag = index;
}
if(keyCode == 40 ){
if(index==ali.length-1){
index = 0;
}else{
index++;
}
setActive();
otxt.innerHTML = ali[index].innerHTML;
pag = index;
type = 0;
}
if(keyCode == 13 ){
// 回车隐藏ul
oul.style.display = 'none';
// 回车隐藏，要修改成下次的状态为 0
type = 0;
}
}
// 3.点击隐藏
document.onclick = function(){
oul.style.display = 'none'
type = 0;
}
// 设置当前项的功能函数
function setActive(){
for(var j = 0;j<ali.length;j++){
ali[j].className = '';
}
ali[index].className = 'active';
}
</script>
</html>
最近比较忙。
看TypeScript时很感触的一句话，就是Atwood’s Law(Atwood定律)。是Jeff Atwood在2007年提出的：“any application that can be written in JavaScript, willeventually be written in JavaScript.”任何可以使用JavaScript来实现的应用都最终都会使用JavaScript实现。
从几年前的webQQ，web微信，h5版微博，包括这几年华为的云电脑，web-office，web-photoshop。js似乎一直在践行着这句话。当大多数常用的软件、游戏在朝着轻量化，云平台发展，世界真的在逐渐朝着万物互联的方向走着。js在一堆堆工程师的共同努力下，许许多多的框架被创造出来，在各个行业都在发挥着它的力量。
