导读
本篇文章主要以小项目的方式展开，其中给出的代码中均包含详细地注释，大家可以参照理解。下面4个小项目中均包含有 HTML、CSS、JavaScript 等相关知识，可以拿来练手，系统提升一下自己的前端开发能力。
废话少说，下面直接奉上👇
小项目一：猜数字游戏
效果展示：
源码展示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>猜数字游戏</title> <!-- 引入jquery，这里导入的是在线JQuery地址，也可以选择本地地址进行导入 --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script> </head> <!-- html界面框架 --> <body> <!-- 由于存在输入框，为了对齐美观，采用外嵌表格方式 --> <div> <h2 align="center">猜数字游戏(1-10)</h2> <table align="center"> <tr> <td>请输入你猜的数字:</td> <!-- 点击事件：猜 --> <td><input type="text" name="in" style="width: 50px;" /> <button type="button" onclick="checkResult()">猜</button></td> </tr> <tr> <td>已猜次数:</td> <td align="center"><span id="times">0</span></td> </tr> <tr> <td>结果:</td> <!-- 结果显示的地方 --> <td><span id="result"></span></td> </tr> <tr> <!-- 点击事件：重开 --> <td colspan="2" align="center"><button type="button" onclick="reset()" style="width: 150px;">重开</button></td> <td></td> </tr> </table> </div> <!-- Js操作代码部分--> <script type="text/javascript"> // 生成 1 - 10 之间的随机数 var randomNum = Math.floor(Math.random()*10)+1; // 使用 jQuery 获取元素 var result = jQuery("#result"); var inputContent = jQuery("input"); var count = jQuery("#times"); function checkResult(){ // 修改猜的次数 var times = parseInt(jQuery("#times").text()) + 1; jQuery("#times").html(times); // 比对结果 var guessNum = jQuery("input[name='in']").val(); if(guessNum > randomNum) { // 写入结果 result.html("猜大了！"); // 结果样式 result.css("color","red"); // 为方便下次输入，聚焦输入框 inputContent.focus(); } else if (guessNum < randomNum) { // 写入结果 result.html("猜小了！"); // 结果样式 result.css("color","blue"); // 为方便下次输入，聚焦输入框 inputContent.focus(); } else { // 结果样式 result.html("猜对了！"); // 结果样式 result.css("color","green"); } } function reset(){ // 重新生成随机数 randomNum = Math.floor(Math.random()*10)+1; // 结果置空 result.html(""); // 次数置0 count.html("0"); // 输入框清空 inputContent.val(""); // 重新聚焦输入框 inputContent.focus(); } </script> </body> </html>
小项目二：表白墙
效果展示：
源码展示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表白墙</title> <!-- 引入jquery，这里导入的是在线JQuery地址，也可以选择本地地址进行导入 --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script> <style type="text/css"> /* 全局边距设为0 */ * { margin: 0; padding: 0; } /* 设置input输入框样式 */ input{ height: 30px; width: 250px; } /* 设置单元格样式 */ td{ height: 40px; } /* 设置按钮样式 */ button{ width: 325px; height: 40px; background-color: #f9a100; outline-color: red; border: none; color: white; } /* 设置消息样式 */ #message{ width: 1000px; height: 650px; margin: 0 auto; } </style> </head> <body> <h1 align="center">表白墙</h1> <table align="center"> <tr> <td align="center" colspan="2" style="font-size: 13px;">输入后点击提交，会将信息显示在表格中</td> <td></td> </tr> <tr> <td>谁：</td> <td><input type="text" id="from" /></td> </tr> <tr> <td>对谁：</td> <td><input type="text" id="to"/></td> </tr> <tr> <td>说什么：</td> <td><input type="text" id="what"/></td> </tr> <tr> <!-- 点击事件：提交 --> <td align="center" colspan="2"><button type="button" onclick="submit()">提交</button></td> <td></td> </tr> </table> <div id="message"> <h2 align="center">留言板</h2> <hr/> </div> <!-- Js操作代码 --> <script type="text/javascript"> function submit(){ // 获取DOM元素 var megFrom = jQuery("#from"); var megTo = jQuery("#to"); var meg = jQuery("#what"); // 输入判空 if (megFrom.val().trim() == "" || megTo.val().trim() == "" || meg.val().trim() == "") { alert("信息不全，请重新输入!"); megFrom.val(""); megTo.val(""); meg.val(""); megFrom.focus(); return; } // 构造html消息字符串 var finalMeg ="<p>"+ megFrom.val()+"对"+megTo.val()+"说："+meg.val()+"<p/>"; console.log(megFrom.val()+","+megTo.val()+","+meg.val()); // 信息发送 jQuery(finalMeg).appendTo("#message"); // 清理输入框内容 megFrom.val(""); megTo.val(""); meg.val(""); // 重新聚焦 megFrom.focus(); } </script> </body> </html>
小项目三：待办事项
效果展示：
源码展示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>待办事项</title> <!-- 引入jquery，这里导入的是在线JQuery地址，也可以选择本地地址进行导入 --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script> <style type="text/css"> /* 全局边距设为0 */ *{ margin: 0; padding: 0; } /* 设置整体容器样式 */ #container_1{ top:20px; position: relative; margin: 0 auto; /* border: 1px solid red; */ width: 1000px; height: 900px; } /* 设置新建任务容器样式*/ #container_1_1{ position: absolute; width: 800px; height: 55px; /* border: blue solid 1px; */ right: 110px; top: 20px; } /* 设置新建任务按钮样式*/ #container_1_1 button{ position: absolute; width: 200px; height: 55px; color: white; font-size: 20px; border: none; background-color: #f9a100; right: 0px; } /* 设置新建任务输入框样式*/ #container_1_1 input{ width: 596px; height: 51px; } /* 设置中部分割条样式*/ #container_1_2{ position: absolute; display: flex; width: 800px; height: 50px; right: 110px; top: 110px; align-items: center; } /* 设置中部分隔条子容器样式*/ #container_1_2 div{ color: white; background-color: black; font-size: 20px; font-family: "微软雅黑"; text-align: center; width: 400px; height: 50px; line-height: 50px; } /* 设置任务样式*/ #task{ position: absolute; right: 110px; top: 180px; width: 800px; height: 700px; /* border: 1px red solid; */ display: flex; } /* 设置未完成任务样式*/ #undo{ position: relative; margin: 10px; border: 1px #d3d3d3 solid; width: 380px; height: 680px; } /* 设置已完成任务样式*/ #done{ position: relative; margin: 10px; border: 1px #d3d3d3 solid; width: 380px; height: 680px; } /* 设置任务项样式*/ #undo p,#done p{ /* height: 20px; */ margin: 15px; } /* 设置任务项删除按钮样式*/ #undo button,#done button{ position: absolute; right: 45px; width: 50px; } </style> </head> <body> <div id="container_1"> <div id="container_1_1"> <input type="text" id = "input"/> <!-- 点击事件：新建任务 --> <button type="button" onclick="createTask()"><b>新建任务</b></button> </div> <div id="container_1_2"> <div> <b>未完成</b> </div> <div> <b>已完成</b> </div> </div> <div id="task"> <div id="undo"> </div> <div id="done"> </div> </div> </div> <!-- Js操作代码 --> <script type="text/javascript"> // 添加任务事件功能 function createTask(){ // 获取新任务 var newTask = jQuery("#input"); // 输入判断 if(newTask.val().trim() == ""){ alert("输入无效，请重新输入!"); newTask.val(""); // 重新聚焦输入框 newTask.focus(); return; } // 构造html任务字符串 var strTask = "<p><input type='checkbox' οnclick='transfer()'/> "+newTask.val()+"<button type='button' οnclick='del()'>删除</button></p>"; // 添加任务 jQuery(strTask).appendTo("#undo"); // 清空输入框 newTask.val(""); // 重新聚焦输入框 newTask.focus(); } // checkbox 注册点击事件功能 function transfer() { // 找到触发事件 var row = event.target; // 找到触发事件的父节点 var parent = row.parentNode; // 注意! 是先触发 checked 为 true, 然后再调用 onclick 函数 // 选择任务框 if (row.checked) { var target = "#done"; } else { var target = "#undo"; } // 将任务添加到相应的任务框内 jQuery(parent).appendTo(target); // 重新聚焦输入框 jQuery("#input").focus(); } // 删除事件功能 function del(){ // 找到触发事件 // 当前需要删除结点 var row = event.target.parentNode; // 它的父亲节点 var parent = row.parentNode; // 删除结点 parent.removeChild(row); // 重新聚焦输入框 jQuery("#input").focus(); } </script> </body> </html>
小项目四：网页版三子棋
效果展示：
源码展示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三子棋游戏</title> <!-- 引入jquery，这里导入的是在线JQuery地址，也可以选择本地地址进行导入 --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script> <style type="text/css"> /* 全局边距设为0 */ *{ margin: 0px; padding: 0px; } /* 设置棋盘整体样式 */ #container{ width: 606px; height: 608px; border: black solid 2px; margin: 80px auto; display: flex; flex-wrap: wrap; align-items: center; box-sizing: content-box; } /* 设置棋格样式 */ #container div{ width: 200px; height: 200px; border: 1px black solid; text-align: center; font-size: 80px; line-height: 200px; } /* 设置头部提示信息样式 */ #head{ text-align: center; width: 240px; height: 30px; color: #FF0000; margin:50px auto; } /* 设置底部按钮位置 */ #bottom{ margin: 0px auto; width: 200px; height: 80px; } /* 设置重新开始按钮样式 */ .res{ background-color: #F9A100; font-size: 20px; width: 200px; height: 50px; color: white; } </style> </head> <body> <div id="head"> ATTENTION：默认 "√" 先下棋 </div> <div id="container"> <!-- 为棋格添加点击事件：用来下棋 --> <div id="11" onclick="change()"> </div> <div id="12" onclick="change()"> </div> <div id="13" onclick="change()"> </div> <div id="21" onclick="change()"> </div> <div id="22" onclick="change()"> </div> <div id="23" onclick="change()"> </div> <div id="31" onclick="change()"> </div> <div id="32" onclick="change()"> </div> <div id="33" onclick="change()"> </div> </div> <div id="bottom"> <!-- 点击事件：重开 --> <button type="button" onclick="reset()" class="res"><b>重新开始</b></button> </div> <!-- Js操作代码 --> <script type="text/javascript"> // 一局当中的下棋次数，下面用来分阵营和判断平局 var times = 1; // 一局当中的赢家 var win = ""; // 下棋、判断输赢功能 function change(){ // 获得触发事件的dom元素 var dom = event.target; // times为奇数代表“√”偶数代表“○”。实现交替下棋 if(times%2!=0) { dom.innerHTML="√"; } else { dom.innerHTML="○"; } // 统计下棋次数 times++; // 判断输赢 // 1.防止耍赖 if(win == "○" || win == "√"){ alert("胜负已分，请不要做无用的对抗！"); return; } var num = parseInt(dom.id); var row = Math.floor(num/10); var col = num%10; // 2.横向棋格 var row1 = jQuery("#"+"1"+col).text().trim(); var row2 = jQuery("#"+"2"+col).text().trim(); var row3 = jQuery("#"+"3"+col).text().trim(); // 3.纵向棋格 var col1 = jQuery("#"+row+"1").text().trim(); var col2 = jQuery("#"+row+"2").text().trim(); var col3 = jQuery("#"+row+"3").text().trim(); // 4.对角线棋格 var x1 = jQuery("#11").text().trim(); var x2 = jQuery("#22").text().trim(); var x3 = jQuery("#33").text().trim(); var x4 = jQuery("#31").text().trim(); var x5 = jQuery("#13").text().trim(); if(row1 == row2 && row2 == row3 && row1!=""){ // 5.判断横向 if(row1 == "√") { win = "√"; alert("√ 方胜利!"); } else { win = "○"; alert("○ 方胜利!"); } return; } else if(col1 == col2 && col2 == col3 && col1!="") { // 6.判断纵向 if(col1 == "√") { win = "√"; alert("√ 方胜利!"); } else { win = "○"; alert("○ 方胜利!"); } return; } else if(x1 == x2 && x2 == x3 && x1!="") { // 7.判断左对角线 if(x1 == "√") { win = "√"; alert("√ 方胜利!"); } else { win = "○"; alert("○ 方胜利!"); } return; } else if(x4 == x2 && x2 == x5 && x2!=""){ // 7.判断右对角线 if(x2 == "√") { win = "√"; alert("√ 方胜利!"); } else { win = "○"; alert("○ 方胜利!"); } return; } // 8.判断平局 if(times == 10) { alert("平局!"); return; } } // 重置棋盘功能 function reset(){ // 初始化全局变量 win = ""; times = 1; // 棋盘置空 for(var i = 1;i <= 3;i ++) { var id1 = "#"+i+"1"; var id2 = "#"+i+"2"; var id3 = "#"+i+"3"; jQuery(id1).text(""); jQuery(id2).text(""); jQuery(id3).text(""); } } </script> </body> </html>
