20 个使用原生 JavaScript 实现的 Web 项目
<h1 id="20-个使用原生-javascript-实现的-web-项目">20 个使用原生 JavaScript 实现的 Web 项目</h1><blockquote>
<p>20 vanilla JavaScript Web Projects</p>
</blockquote>
<p><img src="https://img2020.cnblogs.com/blog/740516/202012/740516-20201203145412867-1813165403.png" alt="" loading="lazy"></p>
<p>https://github.com/learning-js-by-reading-source-codes/vanillawebprojects</p>
<h2 id="目录">目录</h2>
<table>
<thead>
<tr>
<th style="text-align: center">#</th>
<th style="text-align: center">项目</th>
<th style="text-align: center">在线演示</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">01</td>
<td style="text-align: center">Form Validator / 表单验证器</td>
<td style="text-align: center">在线演示</td>
</tr>
<tr>
<td style="text-align: center">02</td>
<td style="text-align: center">Movie Seat Booking / 电影座位预订</td>
<td style="text-align: center">在线演示</td>
</tr>
<tr>
<td style="text-align: center">03</td>
<td style="text-align: center">Custom Video Player / 自定义视频播放器</td>
<td style="text-align: center">在线演示</td>
</tr>
<tr>
<td style="text-align: center">04</td>
<td style="text-align: center">Exchange Rate Calculator / 汇率计算器</td>
<td style="text-align: center">在线演示</td>
</tr>
<tr>
<td style="text-align: center">05</td>
<td style="text-align: center">DOM Array Methods Project / DOM 数组方法项目</td>
<td style="text-align: center">在线演示</td>
</tr>
<tr>
<td style="text-align: center">06</td>
<td style="text-align: center">Menu Slider & Modal / 滑块菜单栏和模态框</td>
<td style="text-align: center">在线演示</td>
</tr>
<tr>
<td style="text-align: center">07</td>
<td style="text-align: center">Hangman Game / Hangman 游戏</td>
<td style="text-align: center">在线演示</td>
</tr>
<tr>
<td style="text-align: center">08</td>
<td style="text-align: center">Mealfinder App / 餐食查找器应用程序</td>
<td style="text-align: center">在线演示</td>
</tr>
<tr>
<td style="text-align: center">09</td>
<td style="text-align: center">Expense Tracker / 支出追踪器</td>
<td style="text-align: center">在线演示</td>
</tr>
<tr>
<td style="text-align: center">10</td>
<td style="text-align: center">Music Player / 音乐播放器</td>
<td style="text-align: center">在线演示</td>
</tr>
<tr>
<td style="text-align: center">11</td>
<td style="text-align: center">Infinite Scrolling / 无限滚动</td>
<td style="text-align: center">在线演示</td>
</tr>
<tr>
<td style="text-align: center">12</td>
<td style="text-align: center">Typing Game / 打字游戏</td>
<td style="text-align: center">在线演示</td>
</tr>
<tr>
<td style="text-align: center">13</td>
<td style="text-align: center">Speech Text Reader / 语音文字阅读器</td>
<td style="text-align: center">在线演示</td>
</tr>
<tr>
<td style="text-align: center">14</td>
<td style="text-align: center">Memory Cards / 记忆卡</td>
<td style="text-align: center">在线演示</td>
</tr>
<tr>
<td style="text-align: center">15</td>
<td style="text-align: center">LyricsSearch App / 歌词搜索应用程序</td>
<td style="text-align: center">在线演示</td>
</tr>
<tr>
<td style="text-align: center">16</td>
<td style="text-align: center">Relaxer App / 休闲应用程序</td>
<td style="text-align: center">在线演示</td>
</tr>
<tr>
<td style="text-align: center">17</td>
<td style="text-align: center">Breakout Game / 突围游戏</td>
<td style="text-align: center">在线演示</td>
</tr>
<tr>
<td style="text-align: center">18</td>
<td style="text-align: center">New Year Countdown / 新年倒计时</td>
<td style="text-align: center">在线演示</td>
</tr>
<tr>
<td style="text-align: center">19</td>
<td style="text-align: center">Sortable List / 可排序列表</td>
<td style="text-align: center">在线演示</td>
</tr>
<tr>
<td style="text-align: center">20</td>
<td style="text-align: center">Speak Number Guessing Game / 讲数字猜谜游戏</td>
<td style="text-align: center">在线演示</td>
</tr>
</tbody>
</table>
<h2 id="源码分析">源码分析</h2>
<pre><code class="language-js">
</code></pre>
<pre><code class="language-js">
</code></pre>
<pre><code class="language-js">
</code></pre>
<pre><code class="language-js">
</code></pre>
<h2 id="tags">tags</h2>
<p>https://github.com/learning-js-by-reading-source-codes/vanillawebprojects/tags</p>
<h2 id="actions">actions</h2>
<p>https://github.com/learning-js-by-reading-source-codes/vanillawebprojects/actions</p>
<h2 id="refs">refs</h2>
<p>https://vanillawebprojects.com/projects/</p>
<p><img src="https://img2020.cnblogs.com/blog/740516/202012/740516-20201203145444098-933094075.png" alt="" loading="lazy"></p>
<pre><code class="language-js">
</code></pre>
<hr>
<div>
</div>
<hr>
<blockquote style="display: flex; flex-flow: column; align-items: center; justify-content: center; text-align: center; border: none">
<h3><strong><span style="font-size: 16pt; color: rgba(0, 255, 0, 1)">©xgqfrms 2012-<span data-uid="copyright-aside">2020</span></span></strong>
<p><span style="font-size: 18pt; color: rgba(0, 255, 0, 1)"><strong>www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！</strong></span></p>
</h3></blockquote>
<hr>
</div>
<div id="MySignature" role="contentinfo">
<div style="display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;">
<p>本文首发于博客园，作者：xgqfrms，原文链接：https://www.cnblogs.com/xgqfrms/p/14079448.html</p>
<p style="color: red; font-size: 23px; margin-top: 5px; margin-botom: 5px;">未经授权禁止转载，违者必究！</P>
</div>
<hr/><br><br>
来源：https://www.cnblogs.com/xgqfrms/p/14079448.html
頁:
[1]