前端综合练手小项目

导读

本篇文章主要以小项目的方式展开，其中给出的代码中均包含详细地注释，大家可以参照理解。下面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("");// 次数置0count.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()'/>&nbsp;"+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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/109973.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【NVIDIA CUDA】2023 CUDA夏令营编程模型（四）

【NVIDIA CUDA】2023 CUDA夏令营编程模型（四）

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G算力网络技术标准研究。 博客…
阅读更多...
ATF(TF-A) SPMC威胁模型-安全检测与评估

ATF(TF-A) SPMC威胁模型-安全检测与评估

安全之安全(security)博客目录导读 ATF(TF-A) 威胁模型汇总 目录 一、简介 二、评估目标 1、数据流图 三、威胁分析 1、信任边界 2、资产 3、威胁代理 4、威胁类型 5、威胁评估 5.1 端点在直接请求/响应调用中模拟发送方或接收方FF-A ID 5.2 篡改端点和SPMC之间的…
阅读更多...
深入解析 qsort 函数（下），用冒泡排序模拟实现 qsort 函数

深入解析 qsort 函数（下），用冒泡排序模拟实现 qsort 函数

前言&#xff1a;对于库函数有适当了解的朋友们&#xff0c;对于 qsort 函数想必是有认知的&#xff0c;因为他可以对任意数据类型进行排序的功能属实是有点厉害的&#xff0c;本次分享&#xff0c;笔者就给大家带来 qsort 函数的全面的解读 本次知识的分享笔者分为上下俩卷文章…
阅读更多...
Linux中如何执行命令

Linux中如何执行命令

目录 命令格式&#xff1a; 命令分类&#xff1a; 命令帮助&#xff1a; 1、man 2、help 3、--help 4、info命令 终止命令&#xff1a; 补全命令&#xff1a; 1&#xff09;补全命令&#xff1a; 2&#xff09;补全文件名和目录名&#xff1a; 命令格式&#xff1a;…
阅读更多...
034：vue项目利用qrcodejs2生成二维码示例

034：vue项目利用qrcodejs2生成二维码示例

第034个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…
阅读更多...
目标跟踪：Mobile Vision Transformer-based Visual Object Tracking

目标跟踪：Mobile Vision Transformer-based Visual Object Tracking

论文作者&#xff1a;Goutam Yelluru Gopal,Maria A. Amer 作者单位&#xff1a;Concordia University 论文链接&#xff1a;https://arxiv.org/pdf/2309.05829v1.pdf 项目链接&#xff1a;https://github.com/goutamyg/MVT 内容简介&#xff1a; 1&#xff09;方向&#…
阅读更多...
vscode搭建Django自带后台管理系统

vscode搭建Django自带后台管理系统

文章目录 一、django自带的后台管理系统1. 建表2. 后台管理系统2.1 创建账号2.2 运行后台2.3 登录 二、模版渲染1. 直接将数据渲染到页面2. 数据传递给js 三、数据库1. 查看当前数据库2. 创建UserInfo数据表3. Django rest framework配置 四、vue前端搭建1. 在Django项目的根目…
阅读更多...
vue3+ts+uniapp小程序封装获取授权hook函数

vue3+ts+uniapp小程序封装获取授权hook函数

vue3tsuniapp小程序封装获取授权hook函数 小程序授权的时候&#xff0c;如果点击拒绝授权&#xff0c;然后就再也不会出现授权了&#xff0c;除非用户手动去右上角…设置打开 通过uni官方api自己封装一个全局的提示: uni.getSetting :http://uniapp.dcloud.io/api/other/settin…
阅读更多...
数据结构——图(图的存储及基本操作)

数据结构——图(图的存储及基本操作)

文章目录 前言一、邻接矩阵法&#xff08;顺序存储&#xff09;1.无向图存储邻接矩阵算法2.有向图存储邻接矩阵算法 二、邻接表法(图的链式存储结构)总结 前言 邻接矩阵法(图的顺序存储结构) 1.1 无向图邻接矩阵算法 1.2 有向图邻接矩阵算法邻接表法(图的一种链式存储结构) 一…
阅读更多...
matlab 间接平差法拟合二维圆

matlab 间接平差法拟合二维圆

目录 一、算法原理二、代码实现三、结果展示本文由CSDN点云侠原创，原文链接。爬虫自重。 一、算法原理 圆的方程为： ( x － x 0 )
阅读更多...
大范围XSS扫描工具：XSS-Freak，BurpSuite随机用户代理，Hades 静态代码审核系统

大范围XSS扫描工具：XSS-Freak，BurpSuite随机用户代理，Hades 静态代码审核系统

大范围XSS扫描工具&#xff1a;XSS-Freak&#xff0c;BurpSuite随机用户代理&#xff0c;Hades 静态代码审核系统。 #################### 免责声明&#xff1a;工具本身并无好坏&#xff0c;希望大家以遵守《网络安全法》相关法律为前提来使用该工具&#xff0c;支持研究学习…
阅读更多...
文件操作(个人学习笔记黑马学习)

文件操作(个人学习笔记黑马学习)

C中对文件操作需要包含头文件<fstream > 文件类型分为两种: 1.文本文件&#xff1a;文件以文本的ASCII码形式存储在计算机中 2.二进制文件&#xff1a;文件以文本的二进制形式存储在计算机中&#xff0c;用户一般不能直接读懂它们 操作文件的三大类: 1.ofstream: 写操作 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023