- 技术栈
- 实现html和CSS
- iconfont使用方法
- 完善html和CSS
- 实现搜索功能
- 实现跳转功能
- 使用logo
- 实现新增网站
- 修复显示问题只显示一级域名
- 处理 logo
- 实现删除功能
- 实现PC端功能
- 优化PC的样式
- 监听键盘事件
- 完整代码
- 使用parcel部署
- 在之前的基础上增加一些内容
- 第二版本代码
-曾老湿, 江湖人称曾老大。
-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
技术栈
1.jQuery 2.LocalStorage 3.SVG Symbols 4.媒体查询 5.git & GitHub 6.使用figma设计UI:TP 7.iconfont小图标库:TP
天才第一步：设计UI是用figma |
|---|
手机页面UI：

PC页面UI：

实现html和CSS
创建项目 |
|---|

copy 淘宝的meta标签，让手机使用页面时，不会被双指放大。

代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover">
<title>曾老湿 - 前端导航网站</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="main.js"></script>
</body>
</html>编辑html |
|---|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover">
<title>曾老湿 - 前端导航网站</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="globalHeader">
<input type="text">
<button>搜索</button>
</header>
<main class="globalMain">
<ul>
<li>
<div class="site">
<div class="logo"></div>
<div class="link">www.driverzeng.com</div>
</div>
</li>
<li>
<div class="site">
<div class="logo"></div>
<div class="link">download.driverzeng.com</div>
</div>
</li>
<li>
新增网站
</li>
</ul>
</main>
<script src="main.js"></script>
</body>
</html>编辑CSS前戏 |
|---|
先写好选择器。方便我们后面加样式
代码语言：javascript复制.globalHeader{}
.globalHeader > input{}
.globalHeader > button{}
.globalMain{}
.siteList{}
.siteList > li{}
.siteList .site{}
.siteList .site > .logo{}
.siteList .site > .link{}
.siteList .addButton{}预览一下网站，然后开始往里面加样式
代码语言：javascript复制MacBook-pro:nav-1 driverzeng$ parcel src/index.html 


iconfont使用方法
打开浏览器访问：http://iconfont.cn/
搜索 add

选择自己喜欢的图标加入购物车

进入购物车






代码语言：javascript复制<script src="//at.alicdn.com/t/font_1780800_huamza6byi9.js"></script>



复制通用CSS代码，可以放在html里面，也可以放在自己的css里面
代码语言：javascript复制/* 放入html中 */
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
/* 放入自己的css中 */
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}

然后复制第三步内容。
代码语言：javascript复制<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>

然后修改icon-xxx部分，回去找到图片的名字



会发现，图片有一部分被遮盖住了，因为代码中icon的名字重复了。

改个名字即可

完善html和CSS
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover">
<title>曾老湿 - 前端导航网站</title>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="globalHeader">
<input type="text">
<button>搜索</button>
</header>
<main class="globalMain">
<ul class="siteList">
<li>
<div class="site">
<div class="logo">D</div>
<div class="link">driverzeng.com</div>
</div>
</li>
<li>
<div class="site">
<div class="logo">D</div>
<div class="link">driverzeng.com</div>
</div>
</li>
<li>
<div class="site">
<div class="logo"></div>
<div class="link">bilibili.com</div>
</div>
</li>
<li>
<div class="addButton">
<div class="icon-wrapper">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-add"></use>
</svg>
</div>
<div class="text">新增网站</div>
</div>
</li>
</ul>
</main>
<script src="//at.alicdn.com/t/font_1780800_huamza6byi9.js"></script>
<script src="main.js"></script>
</body>
</html>/* CSS reset */
*{box-sizing: border-box;}
*:before,*:after{box-sizing: border-box;}
*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
/* style */
body{background: #eee;}
.globalHeader{
margin: 20px;
display: flex;
justify-content: space-between;
}
.globalHeader > input{
width: 100%;
margin-right: 10px;
height: 40px;
padding: 0 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.globalHeader > button{
white-space: nowrap;
padding: 0 28px;
border: none;
border-radius: 4px;
background: #0282b9;
color: white;
font-size: 16px;
}
.globalMain{}
.siteList{
margin: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.siteList > li{
margin-bottom: 10px;
}
.siteList .site{
width: 160px;
height: 123px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
padding: 20px 0;
}
.siteList .site > .logo{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
font-size: 64px;
}
.siteList .site > .link{
font-size: 14px;
margin-top: 4px;
}
.siteList .addButton{
border: 1px solid #ddd;
background: white;
width: 160px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px 0;
}
.siteList .addButton .icon{
width: 200px;
height: 200px;
}
.siteList .addButton .text{
font-size: 14px;
margin-top: 4px;
}
.siteList .addButton .icon-wrapper{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
}

实现搜索功能
此处我们需要知道， 如果搜索的话，我们要用到html的form表单。但是如果说我们去修改html，CSS就会立马挂掉
代码语言：javascript复制 <header class="globalHeader">
<form class="searchForm">
<input type="text">
<button>搜索</button>
</form>
</header>

改代码吧
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover">
<title>曾老湿 - 前端导航网站</title>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="globalHeader">
<form class="searchForm">
<input type="text">
<button>搜索</button>
</form>
</header>
<main class="globalMain">
<ul class="siteList">
<li>
<div class="site">
<div class="logo">D</div>
<div class="link">driverzeng.com</div>
</div>
</li>
<li>
<div class="site">
<div class="logo">D</div>
<div class="link">driverzeng.com</div>
</div>
</li>
<li>
<div class="site">
<div class="logo"></div>
<div class="link">bilibili.com</div>
</div>
</li>
<li>
<div class="addButton">
<div class="icon-wrapper">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-add"></use>
</svg>
</div>
<div class="text">新增网站</div>
</div>
</li>
</ul>
</main>
<script src="//at.alicdn.com/t/font_1780800_huamza6byi9.js"></script>
<script src="main.js"></script>
</body>
</html>/* CSS reset */
*{box-sizing: border-box;}
*:before,*:after{box-sizing: border-box;}
*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
/* style */
body{background: #eee;}
.globalHeader{
margin: 20px;
}
.searchForm{
display: flex;
justify-content: space-between;
}
.searchForm > input{
width: 100%;
margin-right: 10px;
height: 40px;
padding: 0 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.searchForm > button{
white-space: nowrap;
padding: 0 28px;
border: none;
border-radius: 4px;
background: #0282b9;
color: white;
font-size: 16px;
}
.globalMain{}
.siteList{
margin: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.siteList > li{
margin-bottom: 10px;
}
.siteList .site{
width: 160px;
height: 123px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
padding: 20px 0;
}
.siteList .site > .logo{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
font-size: 64px;
}
.siteList .site > .link{
font-size: 14px;
margin-top: 4px;
}
.siteList .addButton{
border: 1px solid #ddd;
background: white;
width: 160px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px 0;
}
.siteList .addButton .icon{
width: 200px;
height: 200px;
}
.siteList .addButton .text{
font-size: 14px;
margin-top: 4px;
}
.siteList .addButton .icon-wrapper{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
}

代码语言：javascript复制 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover">
<title>曾老湿 - 前端导航网站</title>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="globalHeader">
<form class="searchForm" method="get" action="https://www.baidu.com/s">
<input name="wd" type="text">
<button type="submit">搜索</button>
</form>
</header>
<main class="globalMain">
<ul class="siteList">
<li>
<div class="site">
<div class="logo">D</div>
<div class="link">driverzeng.com</div>
</div>
</li>
<li>
<div class="site">
<div class="logo">D</div>
<div class="link">driverzeng.com</div>
</div>
</li>
<li>
<div class="site">
<div class="logo"></div>
<div class="link">bilibili.com</div>
</div>
</li>
<li>
<div class="addButton">
<div class="icon-wrapper">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-add"></use>
</svg>
</div>
<div class="text">新增网站</div>
</div>
</li>
</ul>
</main>
<script src="//at.alicdn.com/t/font_1780800_huamza6byi9.js"></script>
<script src="main.js"></script>
</body>
</html>



如果想要在新标签打开，就再加一个target

但是手机访问，为了不影响用户体验，还是不要新标签打开。
实现跳转功能
我们用a标签把div包起来即可
代码语言：javascript复制 <li>
<a href="https://www.driverzeng.com">
<div class="site">
<div class="logo">D</div>
<div class="link">driverzeng.com</div>
</div>
</a>
</li>但是我们会发现，a标签有一些默认样式，丑的...yp。我们需要取消a标签的默认样式

代码语言：javascript复制a{color: inherit;text-decoration: none;}

点击后... perfect

接下来就可以把剩下几个都完善。
使用logo
首先需要下载logo，然后在项目src目录下创建一个 images目录，把logo放入，代码引用

代码语言：javascript复制 <li>
<a href="https://bilibili.com">
<div class="site">
<div class="logo"></div>
<img src="./images/bilibili.png" alt="">
<div class="link">bilibili.com</div>
</div>
</a>
</li>

修改样式
代码语言：javascript复制img{max-width: 100%;max-height: 100%;}

实现新增网站
首先，我们需要引入jQuery。
打开网站：https://www.bootcdn.cn/



在main.js中写段代码测试jQuery。
代码语言：javascript复制$('.addButton')
.on('click',()=>{
console.log(1)
})

代码语言：javascript复制$('.addButton')
.on('click',()=>{
window.prompt('你要添加啥网址啊？带颜色的不行哦~')
})

测试接收用户输入的 网址。
代码语言：javascript复制$('.addButton')
.on('click',()=>{
const url = window.prompt('你要添加啥网址啊？带颜色的不行哦~')
console.log(url)
})


代码语言：javascript复制$('.addButton')
.on('click',()=>{
let url = window.prompt('你要添加啥网址啊？带颜色的不行哦~')
if(url.indexOf('http')!==0){
// alert('请输入http开头的网址') 可以提示一波，但是为了用户体验我们可以自己加
url = 'http://' url
}
console.log(url)
const $siteList = $('.siteList')
const $li = $(`<li>
<a href="${url}">
<div class="site">
<div class="logo">${url[0]}</div>
<div class="link">${url}</div>
</div>
</a>
</li>`).appendTo($siteList)
})


怎么插入到新增网站的后面了？我们想要插到前面...给新增网站加一个class
代码语言：javascript复制 <li class="last">
<div class="addButton">
<div class="icon-wrapper">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-add"></use>
</svg>
</div>
<div class="text">新增网站</div>
</div>
</li>$('.addButton')
.on('click',()=>{
let url = window.prompt('你要添加啥网址啊？带颜色的不行哦~')
if(url.indexOf('http')!==0){
// alert('请输入http开头的网址') 可以提示一波，但是为了用户体验我们可以自己加
url = 'http://' url
}
console.log(url)
const $siteList = $('.siteList')
const $lastLi = $siteList.find('li.last')
const $li = $(`<li>
<a href="${url}">
<div class="site">
<div class="logo">${url[0]}</div>
<div class="link">${url}</div>
</div>
</a>
</li>`).insertBefore($lastLi)
})


但是页面刷新就没了。所以我们的思路就是，把页面的元素存下来 ，我们学过数据结构，我们使用数组，保存下来所有内容 例如： [{logo:'Z',url:'http://driverzeng.com'}, {logo:'D',url:'http://download.driverzeng.com'}, {logo:'./images/bilibili.png',url:'http://bilibili.com'}]
改造代码：
代码语言：javascript复制const $siteList = $('.siteList')
const $lastLi = $siteList.find('li.last')
const hashMap = [
{logo: 'Z',logoType: 'text',url: 'http://www.driverzeng.com'},
{logo: 'D',logoType: 'text',url: 'http://download.driverzeng.com'},
{logo: './images/bilibili.png',logoType: 'image',url: 'http://bilibili.com'}
]
hashMap.forEach(node=>{
const $li = $(`<li>
<a href="${node.url}">
<div class="site">
<div class="logo">${node.logo[0]}</div>
<div class="link">${node.url}</div>
</div>
</a>
</li>`).insertBefore($lastLi)
})
$('.addButton')
.on('click',()=>{
let url = window.prompt('你要添加啥网址啊？带颜色的不行哦~')
if(url.indexOf('http')!==0){
// alert('请输入http开头的网址') 可以提示一波，但是为了用户体验我们可以自己加
url = 'http://' url
}
const $li = $(`<li>
<a href="${url}">
<div class="site">
<div class="logo">${url[7]}</div>
<div class="link">${url}</div>
</div>
</a>
</li>`).insertBefore($lastLi)
}) <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover">
<title>曾老湿 - 前端导航网站</title>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="globalHeader">
<form class="searchForm" method="get" action="https://www.baidu.com/s" target="_blank">
<input name="wd" type="text">
<button type="submit">搜索</button>
</form>
</header>
<main class="globalMain">
<ul class="siteList">
<li class="last">
<div class="addButton">
<div class="icon-wrapper">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-add"></use>
</svg>
</div>
<div class="text">新增网站</div>
</div>
</li>
</ul>
</main>
<script src="//at.alicdn.com/t/font_1780800_huamza6byi9.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>

代码语言：javascript复制const $siteList = $('.siteList')
const $lastLi = $siteList.find('li.last')
const x= localStorage.getItem('x')
const xObject= JSON.parse(x)
const hashMap = xObject || [
{logo: 'Z',logoType: 'text',url: 'http://www.driverzeng.com'},
{logo: 'D',logoType: 'text',url: 'http://download.driverzeng.com'},
{logo: './images/bilibili.png',logoType: 'image',url: 'http://bilibili.com'}
]
const render = () => {
$siteList.find('li:not(.last)').remove()
hashMap.forEach(node=>{
const $li = $(`<li>
<a href="${node.url}">
<div class="site">
<div class="logo">${node.logo[0].toUpperCase()}</div>
<div class="link">${node.url}</div>
</div>
</a>
</li>`).insertBefore($lastLi)
})
}
render()
$('.addButton')
.on('click',()=>{
let url = window.prompt('你要添加啥网址啊？带颜色的不行哦~')
if(url.indexOf('http')!==0){
// alert('请输入http开头的网址') 可以提示一波，但是为了用户体验我们可以自己加
url = 'http://' url
}
hashMap.push({
logo: url[7],
logoType: "text",
url: url
})
render()
})
window.onbeforeunload = () =>{
const string = JSON.stringify(hashMap)
localStorage.setItem('x',string)
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover">
<title>曾老湿 - 前端导航网站</title>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="globalHeader">
<form class="searchForm" method="get" action="https://www.baidu.com/s" target="_blank">
<input name="wd" type="text">
<button type="submit">搜索</button>
</form>
</header>
<main class="globalMain">
<ul class="siteList">
<li class="last">
<div class="addButton">
<div class="icon-wrapper">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-add"></use>
</svg>
</div>
<div class="text">新增网站</div>
</div>
</li>
</ul>
</main>
<script src="//at.alicdn.com/t/font_1780800_huamza6byi9.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>

修复显示问题只显示一级域名
代码语言：javascript复制const $siteList = $('.siteList')
const $lastLi = $siteList.find('li.last')
const x= localStorage.getItem('x')
const xObject= JSON.parse(x)
const hashMap = xObject || [
{logo: 'Z',logoType: 'text',url: 'http://www.driverzeng.com'},
{logo: 'D',logoType: 'text',url: 'http://download.driverzeng.com'},
{logo: './images/bilibili.png',logoType: 'image',url: 'http://bilibili.com'}
]
const simpifyUrl = (url) => {
return url.replace('https://','').replace('http://','').replace('www.','').replace('download.','').replace(//.*/,'')
}
const render = () => {
$siteList.find('li:not(.last)').remove()
hashMap.forEach(node=>{
const $li = $(`<li>
<a href="${node.url}">
<div class="site">
<div class="logo">${node.logo[0].toUpperCase()}</div>
<div class="link">${simpifyUrl(node.url)}</div>
</div>
</a>
</li>`).insertBefore($lastLi)
})
}
render()
$('.addButton')
.on('click',()=>{
let url = window.prompt('你要添加啥网址啊？带颜色的不行哦~')
if(url.indexOf('http')!==0){
// alert('请输入http开头的网址') 可以提示一波，但是为了用户体验我们可以自己加
url = 'http://' url
}
hashMap.push({
logo: url[7],
logoType: "text",
url: url
})
render()
})
window.onbeforeunload = () =>{
const string = JSON.stringify(hashMap)
localStorage.setItem('x',string)
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover">
<title>曾老湿 - 前端导航网站</title>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="globalHeader">
<form class="searchForm" method="get" action="https://www.baidu.com/s" target="_blank">
<input name="wd" type="text">
<button type="submit">搜索</button>
</form>
</header>
<main class="globalMain">
<ul class="siteList">
<li class="last">
<div class="addButton">
<div class="icon-wrapper">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-add"></use>
</svg>
</div>
<div class="text">新增网站</div>
</div>
</li>
</ul>
</main>
<script src="//at.alicdn.com/t/font_1780800_huamza6byi9.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>/* CSS reset */
*{box-sizing: border-box;}
*:before,*:after{box-sizing: border-box;}
*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
a{color: inherit;text-decoration: none;}
img{max-width: 100%;max-height: 100%;}
/* style */
body{background: #eee;}
.globalHeader{
margin: 20px;
}
.searchForm{
display: flex;
justify-content: space-between;
}
.searchForm > input{
width: 100%;
margin-right: 10px;
height: 40px;
padding: 0 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.searchForm > button{
white-space: nowrap;
padding: 0 28px;
border: none;
border-radius: 4px;
background: #0282b9;
color: white;
font-size: 16px;
}
.globalMain{}
.siteList{
margin: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.siteList > li{
margin-bottom: 10px;
}
.siteList .site{
width: 160px;
height: 123px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
padding: 20px 0;
}
.siteList .site > .logo{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
font-size: 64px;
}
.siteList .site > .link{
font-size: 14px;
margin-top: 4px;
}
.siteList .addButton{
border: 1px solid #ddd;
background: white;
width: 160px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px 0;
}
.siteList .addButton .icon{
width: 200px;
height: 200px;
}
.siteList .addButton .text{
font-size: 14px;
margin-top: 4px;
}
.siteList .addButton .icon-wrapper{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
}

处理 logo
代码语言：javascript复制 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover">
<title>曾老湿 - 前端导航网站</title>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="globalHeader">
<form class="searchForm" method="get" action="https://www.baidu.com/s" target="_blank">
<input name="wd" type="text">
<button type="submit">搜索</button>
</form>
</header>
<main class="globalMain">
<ul class="siteList">
<li class="last">
<div class="addButton">
<div class="icon-wrapper">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-add"></use>
</svg>
</div>
<div class="text">新增网站</div>
</div>
</li>
</ul>
</main>
<script src="//at.alicdn.com/t/font_1780800_huamza6byi9.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>const $siteList = $('.siteList')
const $lastLi = $siteList.find('li.last')
const x= localStorage.getItem('x')
const xObject= JSON.parse(x)
const hashMap = xObject || [
{logo: 'Z',logoType: 'text',url: 'http://www.driverzeng.com'},
{logo: 'D',logoType: 'text',url: 'http://download.driverzeng.com'},
{logo: 'B',logoType: 'image',url: 'http://bilibili.com'}
]
const simpifyUrl = (url) => {
return url.replace('https://','').replace('http://','').replace('www.','').replace('download.','')
}
const render = () => {
$siteList.find('li:not(.last)').remove()
hashMap.forEach(node=>{
const $li = $(`<li>
<a href="${node.url}">
<div class="site">
<div class="logo">${node.logo[0].toUpperCase()}</div>
<div class="link">${simpifyUrl(node.url)}</div>
</div>
</a>
</li>`).insertBefore($lastLi)
})
}
render()
$('.addButton')
.on('click',()=>{
let url = window.prompt('你要添加啥网址啊？带颜色的不行哦~')
if(url.indexOf('http')!==0){
// alert('请输入http开头的网址') 可以提示一波，但是为了用户体验我们可以自己加
url = 'http://' url
}
hashMap.push({
logo: simpifyUrl(url)[0],
logoType: "text",
url: url
})
render()
})
window.onbeforeunload = () =>{
const string = JSON.stringify(hashMap)
localStorage.setItem('x',string)
}/* CSS reset */
*{box-sizing: border-box;}
*:before,*:after{box-sizing: border-box;}
*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
a{color: inherit;text-decoration: none;}
img{max-width: 100%;max-height: 100%;}
/* style */
body{background: #eee;}
.globalHeader{
margin: 20px;
}
.searchForm{
display: flex;
justify-content: space-between;
}
.searchForm > input{
width: 100%;
margin-right: 10px;
height: 40px;
padding: 0 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.searchForm > button{
white-space: nowrap;
padding: 0 28px;
border: none;
border-radius: 4px;
background: #0282b9;
color: white;
font-size: 16px;
}
.globalMain{}
.siteList{
margin: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.siteList > li{
margin-bottom: 10px;
}
.siteList .site{
width: 160px;
height: 123px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
padding: 20px 0;
}
.siteList .site > .logo{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
font-size: 64px;
text-transform: uppercase;
}
.siteList .site > .link{
font-size: 14px;
margin-top: 4px;
}
.siteList .addButton{
border: 1px solid #ddd;
background: white;
width: 160px;
height: 123px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px 0;
}
.siteList .addButton .icon{
width: 200px;
height: 200px;
}
.siteList .addButton .text{
font-size: 14px;
margin-top: 4px;
}
.siteList .addButton .icon-wrapper{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
}
.siteList .site > .logo{
/*渐变背景*/
background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
#ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
color: transparent; /*文字填充色为透明*/
-webkit-text-fill-color: transparent;
-webkit-background-clip: text; /*背景剪裁为文字，只将文字显示为背景*/
background-size: 200% 100%; /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
/* 动画 */
animation: masked-animation 4s infinite linear;
}
@keyframes masked-animation {
0% {
background-position: 0 0; /*background-position 属性设置背景图像的起始位置。*/
}
100% {
background-position: -100% 0;
}
}

实现删除功能
思路，我们需要在每个网站右上角加一个X，然后点击就可以删除了。首先在iconfont上找到一个关闭的按钮
 因为又加入一个，所以我们需要更新代码

复制，然后替换之前的js代码

复制 ，改名
代码语言：javascript复制.siteList .site{
width: 160px;
height: 123px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
padding: 20px 0;
position: relative; /* 加上浮动 */
}
/* 浮动到右上角 */
.siteList .site > .close{
position: absolute;
right: 0;
top: 0;
}

如果觉得叉叉的位置看着不舒服那么就自己调整
代码语言：javascript复制.siteList .site > .close{
position: absolute;
right: 5px;
top: 5px;
}然后监听它的 点击事件，因为这个图标在a标签里，如果点击会跳转，所以我们需要阻止它跳转。
写着写着发现，太坑了，我们不用a标签，用js代替a标签
代码语言：javascript复制const render = () => {
$siteList.find('li:not(.last)').remove()
hashMap.forEach(node=>{
const $li = $(`<li>
<div class="site">
<div class="logo">${node.logo[0].toUpperCase()}</div>
<div class="link">${simpifyUrl(node.url)}</div>
<div class="close">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-close"></use>
</svg>
</div>
</div>
</li>`).insertBefore($lastLi)
$li.on('click',()=>{
window.open(node.url)
})
$li.on('click','.close',(e)=>{
e.stopPropagation() //阻止冒泡
})
})
}最终重新渲染hashMap我们就可以实现删除功能了。
代码语言：javascript复制 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover">
<title>曾老湿 - 前端导航网站</title>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="globalHeader">
<form class="searchForm" method="get" action="https://www.baidu.com/s" target="_blank">
<input name="wd" type="text">
<button type="submit">搜索</button>
</form>
</header>
<main class="globalMain">
<ul class="siteList">
<li class="last">
<div class="addButton">
<div class="icon-wrapper">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-add"></use>
</svg>
</div>
<div class="text">新增网站</div>
</div>
</li>
</ul>
</main>
<script src="//at.alicdn.com/t/font_1780800_xa4mziz1xya.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>/* CSS reset */
*{box-sizing: border-box;}
*:before,*:after{box-sizing: border-box;}
*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
a{color: inherit;text-decoration: none;}
img{max-width: 100%;max-height: 100%;}
/* style */
body{background: #eee;}
.globalHeader{
margin: 20px;
}
.searchForm{
display: flex;
justify-content: space-between;
}
.searchForm > input{
width: 100%;
margin-right: 10px;
height: 40px;
padding: 0 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.searchForm > button{
white-space: nowrap;
padding: 0 28px;
border: none;
border-radius: 4px;
background: #0282b9;
color: white;
font-size: 16px;
}
.globalMain{}
.siteList{
margin: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.siteList > li{
margin-bottom: 10px;
}
.siteList .site{
width: 160px;
height: 123px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
padding: 20px 0;
position: relative;
}
.siteList .site > .logo{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
font-size: 64px;
text-transform: uppercase;
}
.siteList .site > .link{
font-size: 14px;
margin-top: 4px;
}
.siteList .site > .close{
position: absolute;
right: 5px;
top: 5px;
}
.siteList .addButton{
border: 1px solid #ddd;
background: white;
width: 160px;
height: 123px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px 0;
}
.siteList .addButton .icon{
width: 200px;
height: 200px;
}
.siteList .addButton .text{
font-size: 14px;
margin-top: 4px;
}
.siteList .addButton .icon-wrapper{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
}
.siteList .site > .logo{
/*渐变背景*/
background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
#ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
color: transparent; /*文字填充色为透明*/
-webkit-text-fill-color: transparent;
-webkit-background-clip: text; /*背景剪裁为文字，只将文字显示为背景*/
background-size: 200% 100%; /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
/* 动画 */
animation: masked-animation 4s infinite linear;
}
@keyframes masked-animation {
0% {
background-position: 0 0; /*background-position 属性设置背景图像的起始位置。*/
}
100% {
background-position: -100% 0;
}
}const $siteList = $('.siteList')
const $lastLi = $siteList.find('li.last')
const x= localStorage.getItem('x')
const xObject= JSON.parse(x)
const hashMap = xObject || [
{logo: 'Z',logoType: 'text',url: 'http://www.driverzeng.com'},
{logo: 'D',logoType: 'text',url: 'http://download.driverzeng.com'},
{logo: 'B',logoType: 'image',url: 'http://bilibili.com'}
]
const simpifyUrl = (url) => {
return url.replace('https://','').replace('http://','').replace('www.','').replace('download.','').replace(//.*/,'')
}
const render = () => {
$siteList.find('li:not(.last)').remove()
hashMap.forEach((node,index) =>{
const $li = $(`<li>
<div class="site">
<div class="logo">${node.logo[0].toUpperCase()}</div>
<div class="link">${simpifyUrl(node.url)}</div>
<div class="close">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-close"></use>
</svg>
</div>
</div>
</li>`).insertBefore($lastLi)
$li.on('click',()=>{
window.open(node.url)
})
$li.on('click','.close',(e)=>{
e.stopPropagation() //阻止冒泡
console.log(hashMap)
hashMap.splice(index,1)
render()
})
})
}
render()
$('.addButton')
.on('click',()=>{
let url = window.prompt('你要添加啥网址啊？带颜色的不行哦~')
if(url.indexOf('http')!==0){
// alert('请输入http开头的网址') 可以提示一波，但是为了用户体验我们可以自己加
url = 'http://' url
}
hashMap.push({
logo: simpifyUrl(url)[0],
logoType: "text",
url: url
})
render()
})
window.onbeforeunload = () =>{
const string = JSON.stringify(hashMap)
localStorage.setItem('x',string)
}

点击 叉叉 直接删除

实现PC端功能

好丑啊，丑爆了。
代码语言：javascript复制 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover">
<title>曾老湿 - 前端导航网站</title>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="globalHeader">
<form class="searchForm" method="get" action="https://www.baidu.com/s" target="_blank">
<input name="wd" type="text">
<button type="submit">搜索</button>
</form>
</header>
<main class="globalMain">
<ul class="siteList">
<li class="last">
<div class="addButton">
<div class="icon-wrapper">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-add"></use>
</svg>
</div>
<div class="text">新增网站</div>
</div>
</li>
</ul>
</main>
<script src="//at.alicdn.com/t/font_1780800_xa4mziz1xya.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>/* CSS reset */
*{box-sizing: border-box;}
*:before,*:after{box-sizing: border-box;}
*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
a{color: inherit;text-decoration: none;}
img{max-width: 100%;max-height: 100%;}
/* style */
body{background: #eee;}
.globalHeader{
margin: 20px;
}
@media (min-width: 500px){
.globalHeader{
margin: 100px 0;
}
}
.searchForm{
display: flex;
justify-content: space-between;
}
@media (min-width: 500px){
.searchForm {
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 500px){
.searchForm{
background: red;
}
}
.searchForm > input{
width: 100%;
margin-right: 10px;
height: 40px;
padding: 0 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.searchForm > button{
white-space: nowrap;
padding: 0 28px;
border: none;
border-radius: 4px;
background: #0282b9;
color: white;
font-size: 16px;
}
.globalMain{
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.siteList{
margin: 20px;
display: flex;
flex-wrap: wrap;
}
@media (min-width: 500px){
.siteList{
margin-left: 0;
margin-right: -25px;
}
}
.siteList > li{
margin-bottom: 10px;
margin-right: 25px;
}
.siteList .site{
width: 160px;
height: 123px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
padding: 20px 0;
position: relative;
}
.siteList .site > .logo{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
font-size: 64px;
text-transform: uppercase;
}
.siteList .site > .link{
font-size: 14px;
margin-top: 4px;
}
.siteList .site > .close{
position: absolute;
right: 5px;
top: 5px;
}
.siteList .addButton{
border: 1px solid #ddd;
background: white;
width: 160px;
height: 123px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px 0;
}
.siteList .addButton .icon{
width: 200px;
height: 200px;
}
.siteList .addButton .text{
font-size: 14px;
margin-top: 4px;
}
.siteList .addButton .icon-wrapper{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
}
.siteList .site > .logo{
/*渐变背景*/
background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
#ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
color: transparent; /*文字填充色为透明*/
-webkit-text-fill-color: transparent;
-webkit-background-clip: text; /*背景剪裁为文字，只将文字显示为背景*/
background-size: 200% 100%; /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
/* 动画 */
animation: masked-animation 4s infinite linear;
}
@keyframes masked-animation {
0% {
background-position: 0 0; /*background-position 属性设置背景图像的起始位置。*/
}
100% {
background-position: -100% 0;
}
}const $siteList = $('.siteList')
const $lastLi = $siteList.find('li.last')
const x= localStorage.getItem('x')
const xObject= JSON.parse(x)
const hashMap = xObject || [
{logo: 'Z',logoType: 'text',url: 'http://www.driverzeng.com'},
{logo: 'D',logoType: 'text',url: 'http://download.driverzeng.com'},
{logo: 'B',logoType: 'image',url: 'http://bilibili.com'}
]
const simpifyUrl = (url) => {
return url.replace('https://','').replace('http://','').replace('www.','').replace('download.','').replace(//.*/,'')
}
const render = () => {
$siteList.find('li:not(.last)').remove()
hashMap.forEach((node,index) =>{
const $li = $(`<li>
<div class="site">
<div class="logo">${node.logo[0].toUpperCase()}</div>
<div class="link">${simpifyUrl(node.url)}</div>
<div class="close">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-close"></use>
</svg>
</div>
</div>
</li>`).insertBefore($lastLi)
$li.on('click',()=>{
window.open(node.url)
})
$li.on('click','.close',(e)=>{
e.stopPropagation() //阻止冒泡
console.log(hashMap)
hashMap.splice(index,1)
render()
})
})
}
render()
$('.addButton')
.on('click',()=>{
let url = window.prompt('你要添加啥网址啊？带颜色的不行哦~')
if(url.indexOf('http')!==0){
// alert('请输入http开头的网址') 可以提示一波，但是为了用户体验我们可以自己加
url = 'http://' url
}
hashMap.push({
logo: simpifyUrl(url)[0],
logoType: "text",
url: url
})
render()
})
window.onbeforeunload = () =>{
const string = JSON.stringify(hashMap)
localStorage.setItem('x',string)
}

优化PC的样式
把右上角的叉叉隐藏，当鼠标浮动上去，才出现
代码语言：javascript复制 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover">
<title>曾老湿 - 前端导航网站</title>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="globalHeader">
<form class="searchForm" method="get" action="https://www.baidu.com/s" target="_blank">
<input name="wd" type="text">
<button type="submit">搜索</button>
</form>
</header>
<main class="globalMain">
<ul class="siteList">
<li class="last">
<div class="addButton">
<div class="icon-wrapper">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-add"></use>
</svg>
</div>
<div class="text">新增网站</div>
</div>
</li>
</ul>
</main>
<script src="//at.alicdn.com/t/font_1780800_xa4mziz1xya.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>/* CSS reset */
*{box-sizing: border-box;}
*:before,*:after{box-sizing: border-box;}
*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
a{color: inherit;text-decoration: none;}
img{max-width: 100%;max-height: 100%;}
/* style */
body{background: #eee;}
.globalHeader{
margin: 20px;
}
@media (min-width: 500px){
.globalHeader{
margin: 100px 0;
}
}
.searchForm{
display: flex;
justify-content: space-between;
}
@media (min-width: 500px){
.searchForm {
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
}
.searchForm > input{
width: 100%;
margin-right: 10px;
height: 40px;
padding: 0 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.searchForm > button{
white-space: nowrap;
padding: 0 28px;
border: none;
border-radius: 4px;
background: #0282b9;
color: white;
font-size: 16px;
}
.globalMain{
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.siteList{
margin: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media (min-width: 500px){
.siteList{
margin-left: 0;
margin-right: -25px;
justify-content: flex-start;
}
}
.siteList > li{
margin-bottom: 10px;
}
@media (min-width: 500px){
.siteList > li{
margin-right: 25px;
}
}
.siteList .site{
width: 160px;
height: 123px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
padding: 20px 0;
position: relative;
cursor: pointer;
}
.siteList .site > .logo{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
font-size: 64px;
text-transform: uppercase;
}
.siteList .site > .link{
font-size: 14px;
margin-top: 4px;
}
.siteList .site > .close{
position: absolute;
right: 5px;
top: 5px;
}
@media (min-width: 500px){
.siteList .site > .close{
display: none;
cursor: default;
}
}
.siteList .site:hover > .close{
display: block;
}
.siteList .addButton{
border: 1px solid #ddd;
background: white;
width: 160px;
height: 123px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px 0;
}
.siteList .addButton .icon{
width: 200px;
height: 200px;
}
.siteList .addButton .text{
font-size: 14px;
margin-top: 4px;
}
.siteList .addButton .icon-wrapper{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
}
.siteList .site > .logo{
/*渐变背景*/
background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
#ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
color: transparent; /*文字填充色为透明*/
-webkit-text-fill-color: transparent;
-webkit-background-clip: text; /*背景剪裁为文字，只将文字显示为背景*/
background-size: 200% 100%; /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
/* 动画 */
animation: masked-animation 4s infinite linear;
}
@keyframes masked-animation {
0% {
background-position: 0 0; /*background-position 属性设置背景图像的起始位置。*/
}
100% {
background-position: -100% 0;
}
}const $siteList = $('.siteList')
const $lastLi = $siteList.find('li.last')
const x= localStorage.getItem('x')
const xObject= JSON.parse(x)
const hashMap = xObject || [
{logo: 'Z',logoType: 'text',url: 'http://www.driverzeng.com'},
{logo: 'D',logoType: 'text',url: 'http://download.driverzeng.com'},
{logo: 'B',logoType: 'image',url: 'http://bilibili.com'}
]
const simpifyUrl = (url) => {
return url.replace('https://','').replace('http://','').replace('www.','').replace('download.','').replace(//.*/,'')
}
const render = () => {
$siteList.find('li:not(.last)').remove()
hashMap.forEach((node,index) =>{
const $li = $(`<li>
<div class="site">
<div class="logo">${node.logo[0].toUpperCase()}</div>
<div class="link">${simpifyUrl(node.url)}</div>
<div class="close">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-close"></use>
</svg>
</div>
</div>
</li>`).insertBefore($lastLi)
$li.on('click',()=>{
window.open(node.url)
})
$li.on('click','.close',(e)=>{
e.stopPropagation() //阻止冒泡
console.log(hashMap)
hashMap.splice(index,1)
render()
})
})
}
render()
$('.addButton')
.on('click',()=>{
let url = window.prompt('你要添加啥网址啊？带颜色的不行哦~')
if(url.indexOf('http')!==0){
// alert('请输入http开头的网址') 可以提示一波，但是为了用户体验我们可以自己加
url = 'http://' url
}
hashMap.push({
logo: simpifyUrl(url)[0],
logoType: "text",
url: url
})
render()
})
window.onbeforeunload = () =>{
const string = JSON.stringify(hashMap)
localStorage.setItem('x',string)
}


监听键盘事件
当我们按下 Z 或者 D 就进入对应的网页中。
测试键盘监听
代码语言：javascript复制$(document).on('keypress',(e)=>{
console.log(e)
})我在网页上按了个e，在结果中就可以看到code:'keyE'，然后可以看到 ctrlKey:false就是没有按Ctrl键

代码语言：javascript复制const $siteList = $('.siteList')
const $lastLi = $siteList.find('li.last')
const x= localStorage.getItem('x')
const xObject= JSON.parse(x)
const hashMap = xObject || [
{logo: 'Z',logoType: 'text',url: 'http://www.driverzeng.com'},
{logo: 'D',logoType: 'text',url: 'http://download.driverzeng.com'},
{logo: 'B',logoType: 'image',url: 'http://bilibili.com'}
]
const simpifyUrl = (url) => {
return url.replace('https://','').replace('http://','').replace('www.','').replace('download.','').replace(//.*/,'')
}
const render = () => {
$siteList.find('li:not(.last)').remove()
hashMap.forEach((node,index) =>{
const $li = $(`<li>
<div class="site">
<div class="logo">${node.logo[0].toUpperCase()}</div>
<div class="link">${simpifyUrl(node.url)}</div>
<div class="close">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-close"></use>
</svg>
</div>
</div>
</li>`).insertBefore($lastLi)
$li.on('click',()=>{
window.open(node.url)
})
$li.on('click','.close',(e)=>{
e.stopPropagation() //阻止冒泡
console.log(hashMap)
hashMap.splice(index,1)
render()
})
})
}
render()
$('.addButton')
.on('click',()=>{
let url = window.prompt('你要添加啥网址啊？带颜色的不行哦~')
if(url.indexOf('http')!==0){
// alert('请输入http开头的网址') 可以提示一波，但是为了用户体验我们可以自己加
url = 'http://' url
}
hashMap.push({
logo: simpifyUrl(url)[0],
logoType: "text",
url: url
})
render()
})
window.onbeforeunload = () =>{
const string = JSON.stringify(hashMap)
localStorage.setItem('x',string)
}
$(document).on('keypress',(e)=>{
// const key = e.key
const {key} = e
for(let i=0;i<hashMap.length;i ){
if(hashMap[i].logo.toLowerCase() === key){
window.open(hashMap[i].url)
}
}
})但是 ，如果加上了键盘监听事件，就会出现一个bug，，，当你搜索的时候，如果打了URL里面有的字母，那么就会自动跳转，如何解决呢？我自己是加入了Ctrl键配合 URL的字母键即可。
代码语言：javascript复制const $siteList = $('.siteList')
const $lastLi = $siteList.find('li.last')
const x= localStorage.getItem('x')
const xObject= JSON.parse(x)
const hashMap = xObject || [
{logo: 'Z',logoType: 'text',url: 'http://www.driverzeng.com'},
{logo: 'D',logoType: 'text',url: 'http://download.driverzeng.com'},
{logo: 'B',logoType: 'image',url: 'http://bilibili.com'}
]
const simpifyUrl = (url) => {
return url.replace('https://','').replace('http://','').replace('www.','').replace('download.','').replace(//.*/,'')
}
const render = () => {
$siteList.find('li:not(.last)').remove()
hashMap.forEach((node,index) =>{
const $li = $(`<li>
<div class="site">
<div class="logo">${node.logo[0].toUpperCase()}</div>
<div class="link">${simpifyUrl(node.url)}</div>
<div class="close">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-close"></use>
</svg>
</div>
</div>
</li>`).insertBefore($lastLi)
$li.on('click',()=>{
window.open(node.url)
})
$li.on('click','.close',(e)=>{
e.stopPropagation() //阻止冒泡
console.log(hashMap)
hashMap.splice(index,1)
render()
})
})
}
render()
$('.addButton')
.on('click',()=>{
let url = window.prompt('你要添加啥网址啊？带颜色的不行哦~')
if(url.indexOf('http')!==0){
// alert('请输入http开头的网址') 可以提示一波，但是为了用户体验我们可以自己加
url = 'http://' url
}
hashMap.push({
logo: simpifyUrl(url)[0],
logoType: "text",
url: url
})
render()
})
window.onbeforeunload = () =>{
const string = JSON.stringify(hashMap)
localStorage.setItem('x',string)
}
$(document).on('keypress',(e)=>{
// const key = e.key
const {key} = e
const ct = e.ctrlKey
for(let i=0;i<hashMap.length;i ){
if(hashMap[i].logo.toLowerCase() === key && ct){
window.open(hashMap[i].url)
}
}
})完整代码
代码语言：javascript复制 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover">
<title>曾老湿 - 前端导航网站</title>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="globalHeader">
<form class="searchForm" method="get" action="https://www.baidu.com/s" target="_blank">
<input name="wd" type="text">
<button type="submit">搜索</button>
</form>
</header>
<main class="globalMain">
<ul class="siteList">
<li class="last">
<div class="addButton">
<div class="icon-wrapper">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-add"></use>
</svg>
</div>
<div class="text">新增网站</div>
</div>
</li>
</ul>
</main>
<script src="//at.alicdn.com/t/font_1780800_xa4mziz1xya.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>/* CSS reset */
*{box-sizing: border-box;}
*:before,*:after{box-sizing: border-box;}
*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
a{color: inherit;text-decoration: none;}
img{max-width: 100%;max-height: 100%;}
/* style */
body{background: #eee;}
.globalHeader{
margin: 20px;
}
@media (min-width: 500px){
.globalHeader{
margin: 100px 0;
}
}
.searchForm{
display: flex;
justify-content: space-between;
}
@media (min-width: 500px){
.searchForm {
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
}
.searchForm > input{
width: 100%;
margin-right: 10px;
height: 40px;
padding: 0 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.searchForm > button{
white-space: nowrap;
padding: 0 28px;
border: none;
border-radius: 4px;
background: #0282b9;
color: white;
font-size: 16px;
}
.globalMain{
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.siteList{
margin: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media (min-width: 500px){
.siteList{
margin-left: 0;
margin-right: -25px;
justify-content: flex-start;
}
}
.siteList > li{
margin-bottom: 10px;
}
@media (min-width: 500px){
.siteList > li{
margin-right: 25px;
}
}
.siteList .site{
width: 160px;
height: 123px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
padding: 20px 0;
position: relative;
cursor: pointer;
}
.siteList .site > .logo{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
font-size: 64px;
text-transform: uppercase;
}
.siteList .site > .link{
font-size: 14px;
margin-top: 4px;
}
.siteList .site > .close{
position: absolute;
right: 5px;
top: 5px;
}
@media (min-width: 500px){
.siteList .site > .close{
display: none;
cursor: default;
}
}
.siteList .site:hover > .close{
display: block;
}
.siteList .addButton{
border: 1px solid #ddd;
background: white;
width: 160px;
height: 123px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px 0;
}
.siteList .addButton .icon{
width: 200px;
height: 200px;
}
.siteList .addButton .text{
font-size: 14px;
margin-top: 4px;
}
.siteList .addButton .icon-wrapper{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
}
.siteList .site > .logo{
/*渐变背景*/
background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
#ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
color: transparent; /*文字填充色为透明*/
-webkit-text-fill-color: transparent;
-webkit-background-clip: text; /*背景剪裁为文字，只将文字显示为背景*/
background-size: 200% 100%; /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
/* 动画 */
animation: masked-animation 4s infinite linear;
}
@keyframes masked-animation {
0% {
background-position: 0 0; /*background-position 属性设置背景图像的起始位置。*/
}
100% {
background-position: -100% 0;
}
}const $siteList = $('.siteList')
const $lastLi = $siteList.find('li.last')
const x= localStorage.getItem('x')
const xObject= JSON.parse(x)
const hashMap = xObject || [
{logo: 'Z',logoType: 'text',url: 'http://www.driverzeng.com'},
{logo: 'D',logoType: 'text',url: 'http://download.driverzeng.com'},
{logo: 'B',logoType: 'image',url: 'http://bilibili.com'}
]
const simpifyUrl = (url) => {
return url.replace('https://','').replace('http://','').replace('www.','').replace('download.','').replace(//.*/,'')
}
const render = () => {
$siteList.find('li:not(.last)').remove()
hashMap.forEach((node,index) =>{
const $li = $(`<li>
<div class="site">
<div class="logo">${node.logo[0].toUpperCase()}</div>
<div class="link">${simpifyUrl(node.url)}</div>
<div class="close">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-close"></use>
</svg>
</div>
</div>
</li>`).insertBefore($lastLi)
$li.on('click',()=>{
window.open(node.url)
})
$li.on('click','.close',(e)=>{
e.stopPropagation() //阻止冒泡
console.log(hashMap)
hashMap.splice(index,1)
render()
})
})
}
render()
$('.addButton')
.on('click',()=>{
let url = window.prompt('你要添加啥网址啊？带颜色的不行哦~')
if(url.indexOf('http')!==0){
// alert('请输入http开头的网址') 可以提示一波，但是为了用户体验我们可以自己加
url = 'http://' url
}
hashMap.push({
logo: simpifyUrl(url)[0],
logoType: "text",
url: url
})
render()
})
window.onbeforeunload = () =>{
const string = JSON.stringify(hashMap)
localStorage.setItem('x',string)
}
$(document).on('keypress',(e)=>{
// const key = e.key
const {key} = e
const ct = e.ctrlKey
for(let i=0;i<hashMap.length;i ){
if(hashMap[i].logo.toLowerCase() === key && ct){
window.open(hashMap[i].url)
}
}
})使用parcel部署
代码语言：javascript复制MacBook-pro:nav-1 driverzeng$ parcel build src/index.html --no-minify --public-url ./在之前的基础上增加一些内容
代码语言：javascript复制 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover">
<title>曾老湿 - 前端导航网站</title>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="globalHeader">
<div class="headerText">曾老湿前端导航站点</div>
<form class="searchForm" method="get" action="https://www.baidu.com/s" target="_blank">
<input name="wd" type="text">
<button type="submit">百度搜索</button>
</form>
</header>
<main class="globalMain">
<ul class="siteList">
<li class="last">
<div class="addButton">
<div class="icon-wrapper">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-add"></use>
</svg>
</div>
<div class="text">新增网站</div>
</div>
</li>
</ul>
</main>
<script src="//at.alicdn.com/t/font_1780800_xa4mziz1xya.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>/* CSS reset */
*{box-sizing: border-box;}
*:before,*:after{box-sizing: border-box;}
*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
a{color: inherit;text-decoration: none;}
img{max-width: 100%;max-height: 100%;}
/* style */
body{
background:url('images/back11.gif');
background-size: 105%;
background-attachment:fixed;
}
.globalHeader{
margin: 20px;
}
@media (min-width: 500px){
.globalHeader{
margin: 100px 0;
}
}
.globalHeader .headerText{
color: white;
margin-right: 10px;
height: 40px;
padding: 80px 680px;
font-size: 30px;
white-space: nowrap;
}
.searchForm{
display: flex;
justify-content: space-between;
}
@media (min-width: 500px){
.searchForm {
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
}
.searchForm > input{
width: 100%;
margin-right: 10px;
height: 40px;
padding: 0 10px;
border: 1px solid black;
border-radius: 4px;
background: #ff000000;
}
.searchForm > button{
white-space: nowrap;
padding: 0 28px;
border: none;
border-radius: 4px;
background: rgb(241, 50, 82);
color: white;
font-size: 16px;
}
.globalMain{
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.siteList{
margin: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media (min-width: 500px){
.siteList{
margin-left: 0;
margin-right: -25px;
justify-content: flex-start;
}
}
.siteList > li{
margin-bottom: 10px;
color: rgb(241, 12, 127);
}
@media (min-width: 500px){
.siteList > li{
margin-right: 25px;
}
}
.siteList .site{
width: 160px;
height: 123px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #ff000000;
border: 1px solid #ddd;
border-radius: 4px;
padding: 20px 0;
position: relative;
cursor: pointer;
}
.siteList .site > .logo{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
font-size: 64px;
text-transform: uppercase;
}
.siteList .site > .link{
font-size: 14px;
margin-top: 4px;
}
.siteList .site > .close{
position: absolute;
right: 5px;
top: 5px;
}
@media (min-width: 500px){
.siteList .site > .close{
display: none;
cursor: default;
}
}
.siteList .site:hover > .close{
display: block;
}
.siteList .addButton{
border: 1px solid #ddd;
background: #ff000000;
width: 160px;
height: 123px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px 0;
}
.siteList .addButton .icon{
width: 200px;
height: 200px;
}
.siteList .addButton .text{
font-size: 14px;
margin-top: 4px;
}
.siteList .addButton .icon-wrapper{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
}
.siteList .site > .logo ,.globalHeader .headerText{
/*渐变背景*/
background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
#ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
color: transparent; /*文字填充色为透明*/
-webkit-text-fill-color: transparent;
-webkit-background-clip: text; /*背景剪裁为文字，只将文字显示为背景*/
background-size: 200% 100%; /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
/* 动画 */
animation: masked-animation 4s infinite linear;
}
@keyframes masked-animation {
0% {
background-position: 0 0; /*background-position 属性设置背景图像的起始位置。*/
}
100% {
background-position: -100% 0;
}
}const $siteList = $('.siteList')
const $lastLi = $siteList.find('li.last')
const x= localStorage.getItem('x')
const xObject= JSON.parse(x)
const hashMap = xObject || [
{logo: 'Z',url: 'http://www.driverzeng.com'},
{logo: 'D',url: 'http://download.driverzeng.com'},
{logo: 'Y',url: 'http://www.linuxnc.com'},
{logo: 'X',url: 'http://www.xuliangwei.com'},
{logo: 'Q',url: 'http://www.oldqiang.com'},
{logo: 'L',url: 'http://www.mumusir.com'},
{logo: 'I',url: 'http://www.iawk.cn'},
{logo: 'J',url: 'http://www.increase93.com'}
]
const simpifyUrl = (url) => {
return url.replace('https://','').replace('http://','').replace('www.','').replace('download.','').replace(//.*/,'')
}
const render = () => {
$siteList.find('li:not(.last)').remove()
hashMap.forEach((node,index) =>{
const $li = $(`<li>
<div class="site">
<div class="logo">${node.logo[0].toUpperCase()}</div>
<div class="link">${simpifyUrl(node.url)}</div>
<div class="close">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-close"></use>
</svg>
</div>
</div>
</li>`).insertBefore($lastLi)
$li.on('click',()=>{
window.open(node.url)
})
$li.on('click','.close',(e)=>{
e.stopPropagation() //阻止冒泡
console.log(hashMap)
hashMap.splice(index,1)
render()
})
})
}
render()
$('.addButton')
.on('click',()=>{
let url = window.prompt('你要添加啥网址啊？带颜色的不行哦~')
if(url.indexOf('http')!==0){
// alert('请输入http开头的网址') 可以提示一波，但是为了用户体验我们可以自己加
url = 'http://' url
}
hashMap.push({
logo: simpifyUrl(url)[0],
logoType: "text",
url: url
})
render()
})
// window.onbeforeunload = () =>{
// const string = JSON.stringify(hashMap)
// localStorage.setItem('x',string)
// }
$(document).on('keypress',(e)=>{
// const key = e.key
const {key} = e
const ct = e.ctrlKey
for(let i=0;i<hashMap.length;i ){
if(hashMap[i].logo.toLowerCase() === key && ct){
window.open(hashMap[i].url)
}
}
})第二版本代码
index.html
代码语言：javascript复制const $siteList = $('.siteList')
const $lastLi = $siteList.find('li.last')
const x= localStorage.getItem('x')
const xObject= JSON.parse(x)
const hashMap = xObject || [
{logo: '曾',url: 'http://blog.driverzeng.com'},
{logo: '老',url: 'http://download.driverzeng.com'},
{logo: '湿',url: 'http://devops.driverzeng.com'},
{logo: '好',url: 'http://taiji.driverzeng.com'},
{logo: '帅',url: 'http://pikachu.driverzeng.com'},
]
const simpifyUrl = (url) => {
return url.replace('https://','').replace('http://','').replace('www.','').replace(//.*/,'')
}
const render = () => {
$siteList.find('li:not(.last)').remove()
hashMap.forEach((node,index) =>{
const $li = $(`<li>
<div class="site">
<div class="logo">${node.logo[0].toUpperCase()}</div>
<div class="link">${simpifyUrl(node.url)}</div>
<div class="close">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-close"></use>
</svg>
</div>
</div>
</li>`).insertBefore($lastLi)
$li.on('click',()=>{
window.open(node.url)
})
$li.on('click','.close',(e)=>{
e.stopPropagation() //阻止冒泡
console.log(hashMap)
hashMap.splice(index,1)
render()
})
})
}
render()
$('.addButton')
.on('click',()=>{
let url = window.prompt('你要添加啥网址啊？带颜色的不行哦~')
if(url.indexOf('http')!==0){
// alert('请输入http开头的网址') 可以提示一波，但是为了用户体验我们可以自己加
url = 'http://' url
}
hashMap.push({
logo: simpifyUrl(url)[0],
logoType: "text",
url: url
})
render()
})
window.onbeforeunload = () =>{
const string = JSON.stringify(hashMap)
localStorage.setItem('x',string)
}
$(document).on('keypress',(e)=>{
// const key = e.key
const {key} = e
const ct = e.ctrlKey
for(let i=0;i<hashMap.length;i ){
if(hashMap[i].logo.toLowerCase() === key && ct){
window.open(hashMap[i].url)
}
}
})style.css
代码语言：txt复制/* CSS reset */
*{box-sizing: border-box;}
*:before,*:after{box-sizing: border-box;}
*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
a{color: inherit;text-decoration: none;}
img{max-width: 100%;max-height: 100%;}
/* style */
body{
background:url('images/back11.gif');
background-size: 105%;
background-attachment:fixed;
cursor: url(https://blog.driverzeng.com/zenglaoshi/shubiao/cursor_1.png), default;
}
a:hover{
cursor: url(https://blog.driverzeng.com/zenglaoshi/shubiao/cursor_5.png), pointer;
}
.globalHeader{
margin: 20px;
}
@media (min-width: 500px){
.globalHeader{
margin: 100px 0;
}
}
.searchForm{
display: flex;
justify-content: space-between;
}
@media (min-width: 500px){
.searchForm {
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
}
.searchForm > input{
width: 100%;
margin-right: 10px;
height: 40px;
padding: 0 10px;
border: 1px solid black;
border-radius: 4px;
background: #ff000000;
}
.searchForm > button{
white-space: nowrap;
padding: 0 28px;
border: none;
border-radius: 4px;
background: rgb(241, 50, 82);
color: white;
font-size: 16px;
}
.globalMain{
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.siteList{
margin: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media (min-width: 500px){
.siteList{
margin-left: 0;
margin-right: -25px;
justify-content: flex-start;
}
}
.siteList > li{
margin-bottom: 10px;
color: rgb(241, 12, 127);
}
@media (min-width: 500px){
.siteList > li{
margin-right: 25px;
}
}
.siteList .site{
width: 160px;
height: 123px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #ff000000;
border: 1px solid #ddd;
border-radius: 4px;
padding: 20px 0;
position: relative;
cursor: url(https://blog.driverzeng.com/zenglaoshi/shubiao/cursor_2.png), pointer;
}
.siteList .site > .logo{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
font-size: 56px;
text-transform: uppercase;
}
.siteList .site > .link{
font-size: 13px;
margin-top: 4px;
}
.siteList .site > .close{
position: absolute;
right: 5px;
top: 5px;
}
@media (min-width: 500px){
.siteList .site > .close{
display: none;
cursor: url(https://blog.driverzeng.com/zenglaoshi/shubiao/cursor_5.png), pointer;
}
}
.siteList .site:hover > .close{
display: block;
}
.siteList .addButton{
border: 1px solid #ddd;
background: #ff000000;
width: 160px;
height: 123px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px 0;
}
.siteList .addButton .icon{
width: 200px;
height: 200px;
}
.siteList .addButton .text{
font-size: 14px;
margin-top: 4px;
}
.siteList .addButton .icon-wrapper{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
}
.siteList .site > .logo ,.globalHeader .headerText{
/*渐变背景*/
background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
#ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
-笔者QQ：133411023、253097001
-笔者交流群：198571640
-笔者微信：z133411023 color: transparent; /*文字填充色为透明*/
-webkit-text-fill-color: transparent;
-webkit-background-clip: text; /*背景剪裁为文字，只将文字显示为背景*/
background-size: 200% 100%; /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
/* 动画 */
animation: masked-animation 4s infinite linear;
}
@keyframes masked-animation {
0% {
background-position: 0 0; /*background-position 属性设置背景图像的起始位置。*/
}
100% {
background-position: -100% 0;
}
}
.gb .gun{
margin-top: 0;
border: 3px solid red;
border-color: red yellow blue green;
height: 30px;
color: rgb(241, 12, 127);
margin-bottom: 100px;
background: black;
}main.js
代码语言：javascript复制const $siteList = $('.siteList')
const $lastLi = $siteList.find('li.last')
const x= localStorage.getItem('x')
const xObject= JSON.parse(x)
const hashMap = xObject || [
{logo: '曾',url: 'http://blog.driverzeng.com'},
{logo: '老',url: 'http://download.driverzeng.com'},
{logo: '湿',url: 'http://devops.driverzeng.com'},
{logo: '好',url: 'http://taiji.driverzeng.com'},
{logo: '帅',url: 'http://pikachu.driverzeng.com'},
]
const simpifyUrl = (url) => {
return url.replace('https://','').replace('http://','').replace('www.','').replace(//.*/,'')
}
const render = () => {
$siteList.find('li:not(.last)').remove()
hashMap.forEach((node,index) =>{
const $li = $(`<li>
<div class="site">
<div class="logo">${node.logo[0].toUpperCase()}</div>
<div class="link">${simpifyUrl(node.url)}</div>
<div class="close">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-close"></use>
</svg>
</div>
</div>
</li>`).insertBefore($lastLi)
$li.on('click',()=>{
window.open(node.url)
})
$li.on('click','.close',(e)=>{
e.stopPropagation() //阻止冒泡
console.log(hashMap)
hashMap.splice(index,1)
render()
})
})
}
render()
$('.addButton')
.on('click',()=>{
let url = window.prompt('你要添加啥网址啊？带颜色的不行哦~')
if(url.indexOf('http')!==0){
// alert('请输入http开头的网址') 可以提示一波，但是为了用户体验我们可以自己加
url = 'http://' url
}
hashMap.push({
logo: simpifyUrl(url)[0],
logoType: "text",
url: url
})
render()
})
window.onbeforeunload = () =>{
const string = JSON.stringify(hashMap)
localStorage.setItem('x',string)
}
$(document).on('keypress',(e)=>{
// const key = e.key
const {key} = e
const ct = e.ctrlKey
for(let i=0;i<hashMap.length;i ){
if(hashMap[i].logo.toLowerCase() === key && ct){
window.open(hashMap[i].url)
}
}
})
