本文介绍如何使用HTML、CSS3和JavaScript创建一个动态记忆卡片项目，涉及DOM操作、事件处理和localStorage存储。项目包括创建项目目录、添加删除图标、构建HTML结构、编写样式和主要函数，实现卡片翻转、页面跳转和数据存储等功能。
Web前端开发项目(记忆卡片)
项目目录
前言
用html+css3+js制作一个可以动态添加卡片的记忆卡片网页,其中需熟练掌握Dom操作,window,innerText等
最终效果如下图
一、创建项目目录
在项目文件夹内创建index.html / style.css / script.js 文件，打开index.html，生产网页模板，更改网页标题。
将样式表style.css 和script.js 链接到index.html 中。
访问jsdelivr.com，搜索font-awesome ，找到并选中需要用到的css 文件，生成CDN 链接，并将生成的 复制到网页中。
二、创建添加图标和删除图标
1.添加+图标,来表示添加卡片
代码如下：
<div class="header">
<h2>Memory card</h2>
<button class="create">
<i class="fas fa-plus"></i>add card
</button>
</div>
2.添加垃圾桶图标,来表示删除卡片
代码如下：
<button class="clear">
<span ><i class="fas fa-trash"></i>Delete card</span>
</button>
三、构架HTML结构
代码如下:
<body>
<!-- the icon of the add -->
<div class="header">
<h2>Memory card</h2>
<button class="create" ><i class="fas fa-plus"></i>add card</button>
</div>
<div class="footer">
<!-- the card of the control structure -->
<div class="pageNums-box">
<!-- the icon of the turn to prev card -->
<button class="btn">
<span class="prevCardToView" ><i class="fas fa-arrow-left"></i></span>
</button>
<span id="pageNums"></span>
<!-- the icon of the turn to next card -->
<button class="btn">
<span
最低0.47元/天 解锁文章
3380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
