东阳网站建设报价,网站建设使用什么软件,南通房产网,沈阳企业建站模板导读
本篇文章主要以小项目的方式展开#xff0c;其中给出的代码中均包含详细地注释#xff0c;大家可以参照理解。下面4个小项目中均包含有 HTML、CSS、JavaScript 等相关知识#xff0c;可以拿来练手#xff0c;系统提升一下自己的前端开发能力。
废话少说#xff0c;…导读
本篇文章主要以小项目的方式展开其中给出的代码中均包含详细地注释大家可以参照理解。下面4个小项目中均包含有 HTML、CSS、JavaScript 等相关知识可以拿来练手系统提升一下自己的前端开发能力。
废话少说下面直接奉上
小项目一猜数字游戏
效果展示
源码展示
!DOCTYPE html
htmlheadmeta charsetutf-8title猜数字游戏/title!-- 引入jquery这里导入的是在线JQuery地址也可以选择本地地址进行导入 --script srchttps://cdn.jsdelivr.net/npm/jquery3.7.0/dist/jquery.min.js/script/head!-- html界面框架 --body!-- 由于存在输入框为了对齐美观采用外嵌表格方式 --divh2 aligncenter猜数字游戏(1-10)/h2table aligncentertrtd请输入你猜的数字:/td!-- 点击事件猜 --tdinput typetext namein stylewidth: 50px; / button typebutton onclickcheckResult()猜/button/td/trtrtd已猜次数:/tdtd aligncenterspan idtimes0/span/td/trtrtd结果:/td!-- 结果显示的地方 --tdspan idresult/span/td/trtr!-- 点击事件重开 --td colspan2 aligncenterbutton typebutton onclickreset() stylewidth: 150px;重开/button/tdtd/td/tr/table/div!-- Js操作代码部分--script typetext/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[namein]).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
htmlheadmeta charsetutf-8title表白墙/title!-- 引入jquery这里导入的是在线JQuery地址也可以选择本地地址进行导入 --script srchttps://cdn.jsdelivr.net/npm/jquery3.7.0/dist/jquery.min.js/scriptstyle typetext/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/headbodyh1 aligncenter表白墙/h1table aligncentertrtd aligncenter colspan2 stylefont-size: 13px;输入后点击提交会将信息显示在表格中/tdtd/td/trtrtd谁/tdtdinput typetext idfrom //td/trtrtd对谁/tdtdinput typetext idto//td/trtrtd说什么/tdtdinput typetext idwhat//td/trtr!-- 点击事件提交 --td aligncenter colspan2button typebutton onclicksubmit()提交/button/tdtd/td/tr/tablediv idmessageh2 aligncenter留言板/h2hr//div!-- Js操作代码 --script typetext/javascriptfunction 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
htmlheadmeta charsetutf-8title待办事项/title!-- 引入jquery这里导入的是在线JQuery地址也可以选择本地地址进行导入 --script srchttps://cdn.jsdelivr.net/npm/jquery3.7.0/dist/jquery.min.js/scriptstyle typetext/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/headbodydiv idcontainer_1div idcontainer_1_1input typetext id input/!-- 点击事件新建任务 --button typebutton onclickcreateTask()b新建任务/b/button/divdiv idcontainer_1_2divb未完成/b/divdivb已完成/b/div/divdiv idtaskdiv idundo/divdiv iddone/div/div/div!-- Js操作代码 --script typetext/javascript// 添加任务事件功能function createTask(){// 获取新任务var newTask jQuery(#input);// 输入判断if(newTask.val().trim() ){alert(输入无效请重新输入!);newTask.val();// 重新聚焦输入框newTask.focus();return;}// 构造html任务字符串var strTask pinput typecheckbox οnclicktransfer()/nbsp;newTask.val()button typebutton οnclickdel()删除/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
htmlheadmeta charsetutf-8title三子棋游戏/title!-- 引入jquery这里导入的是在线JQuery地址也可以选择本地地址进行导入 --script srchttps://cdn.jsdelivr.net/npm/jquery3.7.0/dist/jquery.min.js/scriptstyle typetext/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/headbodydiv idheadATTENTION默认 √ 先下棋/divdiv idcontainer!-- 为棋格添加点击事件用来下棋 --div id11 onclickchange()/divdiv id12 onclickchange()/divdiv id13 onclickchange()/divdiv id21 onclickchange()/divdiv id22 onclickchange()/divdiv id23 onclickchange()/divdiv id31 onclickchange()/divdiv id32 onclickchange()/divdiv id33 onclickchange()/div/divdiv idbottom!-- 点击事件重开 --button typebutton onclickreset() classresb重新开始/b/button/div!-- Js操作代码 --script typetext/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(#1col).text().trim();var row2 jQuery(#2col).text().trim();var row3 jQuery(#3col).text().trim();// 3.纵向棋格var col1 jQuery(#row1).text().trim();var col2 jQuery(#row2).text().trim();var col3 jQuery(#row3).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 #i1;var id2 #i2;var id3 #i3;jQuery(id1).text();jQuery(id2).text();jQuery(id3).text();}}/script/body
/html
