前端综合练手小项目

导读

本篇文章主要以小项目的方式展开，其中给出的代码中均包含详细地注释，大家可以参照理解。下面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.rhkb.cn/news/133666.html

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

相关文章

《Envoy 代理：云原生时代的流量管理》

《Envoy 代理：云原生时代的流量管理》

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f405;&#x1f43e;猫头虎建议程序员必备技术栈一览表&#x1f4d6;&#xff1a; &#x1f6e0;️ 全栈技术 Full Stack: &#x1f4da…
阅读更多...
SCRUM产品负责人（CSPO）认证培训课程

SCRUM产品负责人（CSPO）认证培训课程

课程简介 Scrum是目前运用最为广泛的敏捷开发方法&#xff0c;是一个轻量级的项目管理和产品研发管理框架。产品负责人是Scrum的三个角色之一&#xff0c;产品负责人在Scrum产品开发当中扮演舵手的角色&#xff0c;他决定产品的愿景、路线图以及投资回报&#xff0c;他需要回答…
阅读更多...
微服务如何改变软件开发：实战经验与最佳实践分享

微服务如何改变软件开发：实战经验与最佳实践分享

文章目录 什么是微服务&#xff1f;微服务实战经验1. 定义明确的服务边界2. 使用API网关3. 自动化部署和持续集成4. 监控和日志记录 微服务最佳实践1. 文档和通信2. 弹性设计3. 安全性4. 版本控制5. 监控和警报 微服务的未来 &#x1f389;欢迎来到架构设计专栏~微服务如何改变…
阅读更多...
C++版本的OpenCV实现二维图像的卷积定理(通过傅里叶变换实现二维图像的卷积过程，附代码！！)

C++版本的OpenCV实现二维图像的卷积定理(通过傅里叶变换实现二维图像的卷积过程，附代码！！)

C版本的OpenCV库实现二维图像的卷积定理过程详解 前言一、卷积定理简单介绍二、不同卷积过程对应的傅里叶变换过程1、“Same”卷积2、“Full”卷积3、“Valid”卷积 三、基于OpenCV库实现的二维图像卷积定理四、基于FFTW库实现的二维图像卷积定理五、总结与讨论 前言 工作中用…
阅读更多...
计算机视觉--距离变换算法的实战应用

计算机视觉--距离变换算法的实战应用

前言&#xff1a; Hello大家好&#xff0c;我是Dream。 计算机视觉CV是人工智能一个非常重要的领域。 在本次的距离变换任务中&#xff0c;我们将使用D4距离度量方法来对图像进行处理。通过这次实验&#xff0c;我们可以更好地理解距离度量在计算机视觉中的应用。希望大家对计算…
阅读更多...
QML android 采集手机传感器数据 并通过udp 发送

QML android 采集手机传感器数据 并通过udp 发送

利用 qt 开发 安卓 app &#xff0c;采集手机传感器数据 并通过udp 发送 #ifndef UDPLINK_H #define UDPLINK_H#include <QObject> #include <QUdpSocket> #include <QHostAddress>class UdpLink : public QObject {Q_OBJECT public:explicit UdpLink(QObjec…
阅读更多...
C#，数值计算——Hashfn1的计算方法与源程序

C#，数值计算——Hashfn1的计算方法与源程序

1 文本格式 using System; using System.Collections; using System.Collections.Generic; namespace Legalsoft.Truffer { public class Hashfn1 { private Ranhash hasher { get; set; } new Ranhash(); private int n { get; set; } public Hash…
阅读更多...
【C++11保姆级教程】列表初始化(Literal types)和委派构造函数(delegating))

【C++11保姆级教程】列表初始化(Literal types)和委派构造函数(delegating))

文章目录 前言一、列表初始化 (List Initialization)1.1数组初始化1.2结构体初始化1.3容器初始化1.4列表初始化的优势 二、委派构造函数 (Delegating Constructors)2.1委派构造函数是什么&#xff1f;2.2委派构造函数示例代码2.3调用顺序2.3委派构造函数优势 总结 前言 C11引入…
阅读更多...
SpringCLoud——Nacos配置中心

SpringCLoud——Nacos配置中心

Nacos实现配置管理 统一配置管理 配置更新热更新 统一配置的创建是在UI界面中完成的&#xff1a; 首先我们点击【配置管理】然后点击【配置列表】&#xff1a; 然后我们就看到了配置管理界面&#xff0c;但是此时这里是空的&#xff0c;我们可以创建一些配置文件&#xff1a…
阅读更多...
Springboot 实践（17）spring boot整合Nacos配置中心

Springboot 实践（17）spring boot整合Nacos配置中心

前文我们讲解了Nacos服务端的下载安装&#xff0c;本文我们降价spring boot整合nacos&#xff0c;实现Nacos服务器配置参数的访问。 一、启动Nacos服务&#xff0c;创建三个配置文件&#xff0c;如下所示 Springboot-Nacos-Client-dev.yaml文件配置参数 Springboot-Nacos-Clie…
阅读更多...
微信小程序自动化发布

微信小程序自动化发布

参考:https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html 参考:https://www.npmjs.com/package/miniprogram-ci npm install miniprogram-ci -S上传文件 xx.js const isNodeJs typeof process ! undefined && process.release ! null &&…
阅读更多...
智能文本纠错API的应用与工作原理解析

智能文本纠错API的应用与工作原理解析

引言 在数字时代&#xff0c;文本撰写和传播变得日益重要&#xff0c;无论是在学校里写论文、在职场中发送邮件&#xff0c;还是在社交媒体上发表观点。然而&#xff0c;文字错误、标点符号错误、语法问题和不当的表达常常会削弱文本的质量&#xff0c;降低信息传达的效果。为…
阅读更多...
数据结构-leetcode-数组形式的整数加法

数据结构-leetcode-数组形式的整数加法

解题图解&#xff1a; 下面是代码&#xff1a; /*** Note: The returned array must be malloced, assume caller calls free().*/ int* addToArrayForm(int* num, int numSize, int k, int* returnSize){int k_tem k;int klen0;while(k_tem){//看看k有几位k_tem /10;klen;}i…
阅读更多...
第三节：在WORD为应用主窗口下关闭EXCEL的操作（2）

第三节：在WORD为应用主窗口下关闭EXCEL的操作（2）

【分享成果&#xff0c;随喜正能量】凡事好坏&#xff0c;多半自作自受&#xff0c;既不是神为我们安排&#xff0c;也不是天意偏私袒护。业力之前&#xff0c;机会均等&#xff0c;毫无特殊例外&#xff1b;好坏与否&#xff0c;端看自己是否能应机把握&#xff0c;随缘得度。…
阅读更多...
免费和开源的机器翻译软件LibreTranslate

免费和开源的机器翻译软件LibreTranslate

什么是 LibreTranslate &#xff1f; LibreTranslate 免费开源机器翻译 API&#xff0c;完全自托管。与其他 API 不同&#xff0c;它不依赖于 Google 或 Azure 等专有提供商来执行翻译。它的翻译引擎由开源 Argos Translate 库提供支持。 这个软件在 2022 年 3 月的时候折腾过&…
阅读更多...
Python浪漫星空

Python浪漫星空

系列文章 序号文章目录直达链接1浪漫520表白代码https://want595.blog.csdn.net/article/details/1306668812满屏表白代码https://want595.blog.csdn.net/article/details/1297945183跳动的爱心https://want595.blog.csdn.net/article/details/1295031234漂浮爱心https://wan…
阅读更多...
卫星物联网生态建设全面加速，如何抓住机遇？

卫星物联网生态建设全面加速，如何抓住机遇？

当前&#xff0c;卫星通信无疑是行业最热门的话题之一。近期发布的华为Mate 60 Pro“向上捅破天”技术再次升级&#xff0c;成为全球首款支持卫星通话的大众智能手机&#xff0c;支持拨打和接听卫星电话&#xff0c;还可自由编辑卫星消息。 据悉&#xff0c;华为手机的卫星通话…
阅读更多...
Linux运维基础知识大全

Linux运维基础知识大全

一. Linux组成 1. 内核 内核&#xff1a;系统空间的代码和数据的集合称为内核&#xff08;Kernel&#xff09;&#xff1b;kernel是操作系统内部最核心的软件&#xff0c;和硬件打交道的 1.对cpu进行管理&#xff0c;进程调度到cpu里进行管理 2.对内存进行空间的分配&#xff0…
阅读更多...
3D视觉测量：复现Gocator的间隙面差

3D视觉测量：复现Gocator的间隙面差

文章目录 0. 测试效果1. Gocator实现基本内容1.1 实现步骤1.2 参数说明 2. 未作 or TODO3. 开发说明 目标&#xff1a;使用C PCL复现Gocator中的间隙面差前置说明&#xff1a;因为没有拿到Gocator中用到的原始数据&#xff0c;仅是拿到与之类似的数据&#xff0c;因此最后测试的…
阅读更多...
408强化（番外）文件管理

408强化（番外）文件管理

有点看不下去书&#xff0c;408&#xff0c;哎好久没看了&#xff0c;死磕数学时完全不想看其他科目&#xff0c;数学分数也尚未质变。 突然想到一个好点子&#xff0c;只看大纲尝试回忆一下这章的内容。 文件就是为了方便用户使用&#xff0c;按名访问而提出的&#xff0c;从…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发