写点什么

js 逐步教你实现原生古诗匹配系统 (html 逻辑 css 逻辑 js 逻辑)

发布于: 2021 年 03 月 22 日
js逐步教你实现原生古诗匹配系统(html逻辑 css逻辑  js逻辑)

第一步 html:


<form action="	" class="search-form">		<input type="text" class="search"  placeholder="诗人名字,关键字">		<ul  class="suggestions">			<li>这里面是匹配到的古诗</li>		</ul>	</form>
复制代码


图片:


html 逻辑:

写一个 html 表单,表单 text 表达的是匹配的是什么?

ul 里面是匹配成功出来的诗.


css 部分:


*{padding: 0px;margin: 0px;}		body		{			display: flex;			justify-content: center;			background-color: rgb(145,182,195);		}		.search-form {		  display: flex;		  flex-direction: column;		  justify-content: center;		  align-items: center;		}		input.search {		  padding: 20px;		  font-size: 40px;		  text-align: center;		  width: 120%;		  outline: 0;		  border-radius: 5px;		  position: relative;		  top: 10px;		  left: 10px;		}		.suggestions {		  position: relative;		  top: 7px;		  width: 100%;		}
.suggestions li { background: white; list-style: none; padding: 20px; display: flex; flex-direction: column; } span.title { margin-right: 20px; text-align: right; color: yellow; margin-top: 5px; }
span.hl { color: green; }


/*偶数匹配*/ .suggestions li:nth-child(even) { transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001); background: linear-gradient(to bottom, #ffffff 0%, #efefef 100%); }
/*奇数匹配*/ .suggestions li:nth-child(odd) { transform: perspective(100px) rotateX(-3deg) translateY(3px); background: linear-gradient(to top, #ffffff 0%, #efefef 100%); }
复制代码


css 逻辑:

第一:先取消掉所有的系统默认的样式.

第二:是先让 body 里面的表单弹性布局( display: flex;),并让主轴(justify-content)x 水平居中.(简单的说就是让表单水平居中.).

第三:是让表单里面的元素 flex 布局,并让主轴改为 y 排列模式flex-direction: column;,y 居中justify-content: center;,x 居中 align-items: center;.

第四:是让 input:text 自身扩大 20px,文字 40px,text 里面的文字水平居中,点击的边框默认行为变没( outline: 0;),top:10是让离上面 10px,,left:10 离左边 10px

注意一下;相对定位是相对于本身的啊。

第五;是 ul 相对于本身top: 7px;

第六:是让里面的 li 里面的文字垂直排列.( flex-direction:是默认的方式是水平.)

第七:是


span.title {		  margin-right: 20px;		  text-align: right;		  color: yellow;		  margin-top: 5px;		}
span.hl { color: green; }
复制代码

js 使用的.

第八:是

这里的目的是;让它更立体感一点,

偶数的情况下;距离目标 100px,x 轴旋转 3deg,往 y 也就是往厚度移动 2px,一倍大 0.001.

奇数的情况下;渐变是开始的时候是 #ffffff 0%,到达 top 的时候是 #efefef 100%,也就是说从下往上把.

第九;偶数 even 代表 0248,奇数代表 13579


效果图片:


js 代码(逻辑在下面):


const endpoint =      'https://gist.githubusercontent.com/liyuechun/f00bb31fb8f46ee0a283a4d182f691b4/raw/3ea4b427917048cdc596b38b67b5ed664605b76d/TangPoetry.json';

const poetrys = []; fetch(endpoint) .then(responseData => { console.log(responseData); return responseData.json(); }) .then(data => { console.log(data); poetrys.push(...data); console.log(poetrys); });


function findMatches(wordToMatch, poetrys) { return poetrys.filter(poet => { // 正则找出匹配的诗句 const regex = new RegExp(wordToMatch, 'gi'); const author = poet.detail_author.join(''); // console.log(author); return poet.detail_text.match(regex) || poet.title.match(regex) || author.match(regex); }); }
function displayMatches() { const matches = findMatches(this.value, poetrys); const regex = new RegExp(this.value, 'gi'); const html = matches.map(poet => { // 替换高亮的标签 const text = poet.detail_text.replace(regex, `<span class="hl">${ this.value }</span>`); const title = poet.title.replace(regex, `<span class="hl">${ this.value }</span>`); const detail_author = poet.detail_author[0].replace(regex, `<span class="hl">${ this.value }</span>`); // 构造 HTML 值 return ` <li> <span class="poet">${ text }</span> <span class="title">${ title } - ${ detail_author }</span> </li> `; }).join(); // console.log(html); suggestions.innerHTML = html; }
const search = document.querySelector('.search'); const suggestions = document.querySelector('.suggestions');
search.addEventListener('change', displayMatches); search.addEventListener('keyup', displayMatches);
// console.log(poetrys);
复制代码


js 逻辑:

第一步:得到 json 数据


const endpoint =      'https://gist.githubusercontent.com/liyuechun/f00bb31fb8f46ee0a283a4d182f691b4/raw/3ea4b427917048cdc596b38b67b5ed664605b76d/TangPoetry.json';
复制代码


第二:创建一个空数组用来装数据的.

第三;先下载fetch(endpoint),下载完毕后,再让里面的一个一个的字符串转换成对象.


then(responseData => {        return responseData.json();
复制代码


,完毕后,然后再让一个一对象装进一个一下标里面(装进数组里面).


.then(data => {        console.log(data);        poetrys.push(...data);
复制代码

...是扩展运算符,是。。。代表获取所有的.


第四:获取到要用到的表单与 ul。

第五:是当 input 改变的时候,把


 const matches = findMatches(this.value, poetrys);
复制代码

把输入的值与 poetrys 进行匹配去进行:

第六:



这个函数的

第一步是:用正则(输入的作为匹配的条件(也就是说必须包括它.))。

第二步:是要转换成字符串才能匹配,为什么,因为对象不能匹配(js 规定).

第三步·:是要让诗句 或者诗名 或者作者名必须有一个里面包括的值是输入的匹配成功就行了.



功能是;把输入的换成高高亮亮的颜色.在 innerHTML 到网页上.

注意一下:要正则的话必须先转换成字符串啊.join();


注意一下;text 诗句,title 是诗名。author 是作者名.


最下面是整个项目的代码:


<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<meta name="viewport" content="width=device-width, initial-scale=1.0">	<title>Document</title>	<style type="text/css">		*{padding: 0px;margin: 0px;}		body		{			display: flex;			justify-content: center;			background-color: rgb(145,182,195);		}		.search-form {		  display: flex;		  flex-direction: column;		  justify-content: center;		  align-items: center;		}		input.search {		  padding: 20px;		  font-size: 40px;		  text-align: center;		  width: 120%;		  outline: 0;		  border-radius: 5px;		  position: relative;		  top: 10px;		  left: 10px;		}		.suggestions {		  position: relative;		  top: 7px;		  width: 100%;		}
.suggestions li { background: white; list-style: none; padding: 20px; display: flex; flex-direction: column; } span.title { margin-right: 20px; text-align: right; color: yellow; margin-top: 5px; }
span.hl { color: green; }


/*偶数匹配*/ .suggestions li:nth-child(even) { transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001); background: linear-gradient(to bottom, #ffffff 0%, #efefef 100%); }
/*奇数匹配*/ .suggestions li:nth-child(odd) { transform: perspective(100px) rotateX(-3deg) translateY(3px); background: linear-gradient(to top, #ffffff 0%, #efefef 100%); }
</style></head><body> <form class="search-form"> <input type="text" class="search" placeholder="诗人名字,关键字"> <ul class="suggestions"> <li>输入词句,找一首诗</li> <li></li> </ul> </form> <script> const endpoint = 'https://gist.githubusercontent.com/liyuechun/f00bb31fb8f46ee0a283a4d182f691b4/raw/3ea4b427917048cdc596b38b67b5ed664605b76d/TangPoetry.json';

const poetrys = []; fetch(endpoint) .then(responseData => { console.log(responseData); return responseData.json(); }) .then(data => { console.log(data); poetrys.push(...data); console.log(poetrys); });


function findMatches(wordToMatch, poetrys) { return poetrys.filter(poet => { // 正则找出匹配的诗句 const regex = new RegExp(wordToMatch, 'gi'); const author = poet.detail_author.join(''); // console.log(author); return poet.detail_text.match(regex) || poet.title.match(regex) || author.match(regex); }); }
function displayMatches() { const matches = findMatches(this.value, poetrys); const regex = new RegExp(this.value, 'gi'); const html = matches.map(poet => { // 替换高亮的标签 const text = poet.detail_text.replace(regex, `<span class="hl">${ this.value }</span>`); const title = poet.title.replace(regex, `<span class="hl">${ this.value }</span>`); const detail_author = poet.detail_author[0].replace(regex, `<span class="hl">${ this.value }</span>`); // 构造 HTML 值 return ` <li> <span class="poet">${ text }</span> <span class="title">${ title } - ${ detail_author }</span> </li> `; }).join(); // console.log(html); suggestions.innerHTML = html; }
const search = document.querySelector('.search'); const suggestions = document.querySelector('.suggestions');
search.addEventListener('change', displayMatches); search.addEventListener('keyup', displayMatches);
// console.log(poetrys); </script>
</body></html>
复制代码

```


发布于: 2021 年 03 月 22 日阅读数: 7
用户头像

不成就忍耐到成。我没有什么本事,只会忍耐 2020.10.03 加入

还未添加个人简介

评论

发布
暂无评论
js逐步教你实现原生古诗匹配系统(html逻辑 css逻辑  js逻辑)