# 作业

**Repository Path**: lei_jin_peng/task

## Basic Information

- **Project Name**: 作业
- **Description**: 这是一个作业提交仓库
- **Primary Language**: Unknown
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-06-10
- **Last Updated**: 2022-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 抗击疫情

[在线预览](http://lei_jin_peng.gitee.io/web/kang)

## 项目特色

- 不依赖任何框架
- 采用Web Components组件开发
- 一些JS技巧和CSS动画

为了避免错过精彩的地方，我直接把关键代码放上来

包括了Web Components组件、面向对象、正则匹配、函数式编程、事件委托、自定义属性等特性

```javascript
customElements.define('slide-nav', class extends HTMLElement {
	constructor() {
		super()
		this.innerHTML = (index => `
			<img src="${index ? '../' : ''}img/people.png">
			<ul id="slide${index}" onmouseover="this.setAttribute('id','slide'+event.target.getAttribute('data-nth'))" onmouseout="this.setAttribute('id','slide${index}')">
				<li><a href="${index ? '../index.html' : ''}" data-nth="0">首页</a></li>
				${['实时数据', '最新辟谣', '防护手册'].map((e, i) => `<li><a href="${index ? '' : 'page/'}list${-~i}.html" data-nth="${-~i}">${e}</a></li>`).join('')}
				<li><span></span></li>
			</ul>
		`)((x => x ? x[0][0] - 0 : 0)(location.href.match(/\d.html/)))
	}
})
```

“防护手册”页面的轮播图也比较有意思，通过巧妙的闭包实现，有兴趣可以自行查看

## 页面展示

布局比较简单，重点还是代码

![首页截图](pic/k1.jpeg)

![页面截图](pic/k2.jpeg)

## 小结

这个网页中的许多技巧大多是用不到的，因为采用Vue、React等框架开发比这方便的多，没必要考虑这些底层的细节。

大一的时候因为疫情做了这个网站，没想到现在疫情仍在延续，希望疫情尽快过去