我正在学习《SSR 实战:官网开发指南》小册!字节跳动前端开发工程师祯民,带你基于 SSR 技术,全链路还原官网实际开发场景!现在 6 折优惠,仅需 17.94 元哦~
我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!
前言
如果一个班级、一个小型公司,人数只有几十个,为了让大家了解每个人的职责,用数据库感觉有点太多余了,所以使用JS来实现。
材料不知道交给谁,搜索就可以显示出来给谁,负责人忘记事情给谁负责?把每个人负责的事情写进去,等需要找人的时候直接搜索。
原理就是把姓名、职位或者介绍写在JavaScript里,姓名前面加#就是定义名字,下一行就是职位或者介绍。
这里就写一小部分。
在线体验
设计
标题
写标题就相当于是一个简易的教程,大概告诉他功能。
<h1>查询系统</h1>
复制代码
h1 {
text-align: center;
color: red;
margin-top: 60px;
}
复制代码
查询盒子
desc部分是显示区域,将找到的职位或者介绍显示在此地。
<div class="box">
<input class="word" type="text" placeholder="请输入名字">
<div class="desc"></div>
</div>
复制代码
.box {
width: 200px;
height: 200px;
padding: 50px;
background-color: lightblue;
border: 1px solid #000;
margin: 100px auto 0;
border-radius: 20px;
}
.word {
width: 200px;
height: 30px;
font-size: 18px;
outline: none;
border: none;
padding-left: 8px;
box-sizing: border-box;
border-radius: 10px;
}
.desc {
width: 200px;
height: 150px;
margin-top: 20px;
background-color: lightgreen;
padding: 10px;
box-sizing: border-box;
overflow: auto;
}
复制代码
到这里制作是算制作好了
看一下总体效果吧!
差不多差不多,能用就行。
功能
数据
查询肯定是先要有数据,数据使用字符串格式,使用#和换行区分,#是名字,换行是职位或介绍。
格式大概就是这种。
#对应名字,换行就是介绍。
查找
数据有了,现在需要把数据找出来,怎么找呢?
首先把数据进行分割,用换行为条件进行分割。
let arr = word.split("\n");
复制代码
现在得到的数据是这样的
创建一个Map,用来存放职位名字对应的职位。
let map = new Map();
复制代码
使用for循环,把#后面的添加进去,再把下一行的职位或者介绍添加进去。
for (let i = 0; i < arr.length - 1; i += 2) {
map.set(arr[i].substring(1), arr[i + 1]);
}
复制代码
这样我们的map数据就是这样的格式。
显示
获取输入框和显示区域
let oWord = document.querySelector('.word');
let oDesc = document.querySelector('.desc');
复制代码
键盘弹起一次,在map里面查找input里输入的字符。
如果找到返回字符对应的值,没有找到则返回“库里没有这个人”
oWord.onkeyup = function() {
let value = map.get(this.value);
if (value) {
oDesc.innerHTML = value;
} else {
oDesc.innerHTML = "库里没有这个人";
}
}
复制代码
总结
这东西总体来说是非常简单的,可以实现一些没必要用后端的小功能,比如我把我的朋友和同学都录进去了,是不是觉得没必要。其实不然,我们需要收集材料,这种材料那种材料,非常多,所以使用这个可以很好的找到材料需要交给谁。
总体来说还是可以的