HTML+CSS+JavaScript小例题

最新推荐文章于 2023-06-04 16:54:30 发布
最新推荐文章于 2023-06-04 16:54:30 发布
阅读量799 收藏 3
点赞数
分类专栏： java学习技术 文章标签： javascript html css 存储 分页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l4432321/article/details/78341531
版权

声明：本栏目所使用的素材都是凯哥学堂VIP学员所写，学员有权匿名，对文章有最终解释权；凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。

这个例题主要是做一个表格，一个存储学生资料的表格，能够完成以下功能：
1.添加学生
2.删除学生
3.修改学生
4.分页查询学生
html代码：

image

image

image

image

CSS代码：

image

image

image

JavaScript代码：

image

image

image

image

image

image

image

image

运行结果：

image

凯哥资料
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html+css+js新手练习项目
10-08
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用
html+css+JavaScript例题
weixin_34122548的博客
10-30 237
这个例题主要是做一个表格，一个存储学生资料的表格，能够完成以下功能：添加学生删除学生修改学生分页查询学生html代码：<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <title></title> ...
HTML+CSS+JS 简单应用小案例
Emperor10的博客
02-22 2963
猜数字 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
html+css+js实现的web小案例
最新发布
weixin_46671666的博客
06-04 3460
上完了Web开发基础的课程之后，做了这么一个小案例作为课程的大作业。这个案例是静态页面，使用的技术有html+css+js，主要的知识点有页面的打开关闭、页面跳转、超链接、图片和音频的使用、轮播图、js函数等等。本案例的主要内容是注册、登陆之后进入首页，首页里面可以跳转向另外三个页面。 一、注册页面： 页面html代码： 二、登陆页面（账号密码的验证均在本地进行）： 部分代码如下： 1、页面布局与样式 2、js部分判断账号密码并进行跳转 三、首页(游戏专题的部分可以进行点击跳转)： 实现轮播图的代码
HTML+CSS 测试题部分 150
Liu_wen_wen的博客
06-26 746
HTML+CSS 测试题
1+X Web前端开发例题 实操题2
04-30
内容为1+X Web前端开发例题 题目类型为实操题 包含11题(与我的其他资源有一二重复例题) 内容不含答案解析(答案可以来我的博客找喔，有题目分析 https://blog.csdn.net/weixin_53231455?spm=1011.2124.3001.5343 题目...
三级菜单例题html.zip
03-30
是一个包含HTML相关示例和资源的压缩包，主要涉及HTML、JavaScript以及可能的CSS和jQuery技术。这个压缩包可能是为了展示如何创建具有多级导航菜单的网页设计。 【描述】"html"表明这个压缩包的内容是关于HTML（超...
JavaScript实现的简单的计算器（web）
04-29
JavaScript实现的简单的计算器，这是参考我同学的代码实现，希望能够帮助到你
xml例题+代码+图片
12-14
在本压缩包中，“xml例题+代码+图片”暗示了我们将探讨XML的基本概念、使用CSS（Cascading Style Sheets）和DIV元素来格式化XML数据，以及可能包含的一些示例图像，帮助我们更好地理解这些概念。 首先，XML文档由一...
JavaScript经典例题
07-20
在"JavaScript经典例题"这个资源中，我们可以深入学习和掌握JavaScript的各种核心概念和技术。以下是对其中可能包含的知识点的详细阐述： 1. **时间显示**：JavaScript提供了Date对象来处理日期和时间。你可以学习...
CSS+DIV练习题
05-07
这是我自己整理出来的CSS+DIV练习题，非常全面，里面有单选、多选、判断、填空、问答、编程题。
html+css+js实例
12-18
用html+css+js做的一个简单小网页，可以作为初学者的参考资料。
html,css,javascript实现的选择题考试小程序
08-24
一个简单的程序，文件中含有css样式,javascript，类似于网上选择题考试的代码实现，可记录每一题的选择，上一题、下一题。最后统计分数。代码比较简单并且有注释。
某培训微专业WEB前端开发作业 html,css,js作业适合练手的项目
07-14
前端开发，js,css, html ,H5课程作业，练习题
JavaScript结合html,css的简单小例子
hello_cmy的博客
09-20 1067
先看效果： <html> <head> <meta charset="utf-8"> <style> table { border-collapse: collapse; } td { border...
一、前端学习之HTML+CSS编写静态页面-欧莱雅首页
Serven
04-04 1563
本人也是前端入门小白 先从HTML开始进阶到Css 注:使用Css重点的思路是 将页面大体分成多个盒子,在每个盒子内调节边距、添加相应的样式、最后用div去调用定义的样式组成相应的页面 对于没有学习Css的同学这样说可能是有点迷 但是学完Css后 写一个Demo就会明白其中的奥秘. 下面就是我实际编写的案例: 注:此案例也是我从CSDN中去找的 1....
HTML+CSS+JS练手小玩意
BIG橙橙滴
03-24 1924
HTML+CSS+JS练手小玩意今天准备给我的小组员布置任务时，找到这个网页，很适合学了JS用来练手。 在这里，分享给大家实例索引
Web前端面试题——HTML/CSS部分理解题
热门推荐
u012194956的博客
09-14 2万+
1.盒子模型 （1）是什么：每个元素被表示为一个矩形的盒子，由四部分组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。它在页面中所占的实际大小（宽高）是content+padding+border+margin之和。 （2）盒模型有两种：标准盒模型（W3C盒模型）、IE盒模型。 （3）两种盒模型的区别：标准盒模型内容大小就是conten...
HTML+css+JavaScript小游戏
05-30
这里提供一个基于 HTML、CSS 和 JavaScript 的小游戏，是一个打地鼠的游戏： HTML 部分： ```html <!DOCTYPE html> <html> <head> <title>打地鼠游戏</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>打地鼠游戏</h1> <div class="game-box"> <div class="hole"></div> <div class="hole"></div> <div class="hole"></div> <div class="hole"></div> <div class="hole"></div> <div class="hole"></div> </div> <button onclick="startGame()">开始游戏</button> <script src="script.js"></script> </body> </html> ``` CSS 部分： ```css .game-box { display: flex; flex-wrap: wrap; width: 300px; margin: 20px auto; } .hole { width: 80px; height: 80px; background-image: url('mole.png'); background-size: contain; background-repeat: no-repeat; background-position: center; margin: 10px; cursor: pointer; opacity: 0; transition: opacity 0.3s; } .hole.up { opacity: 1; } ``` JavaScript 部分： ```javascript var holes = document.querySelectorAll('.hole'); var score = 0; var isPlaying = false; function startGame() { if (isPlaying) { return; } isPlaying = true; score = 0; // 清除所有地鼠的状态 holes.forEach(hole => hole.classList.remove('up')); // 开始游戏 playGame(); } function playGame() { var time = Math.round(Math.random() * (1500 - 500) + 500); var hole = holes[Math.floor(Math.random() * holes.length)]; hole.classList.add('up'); setTimeout(function() { hole.classList.remove('up'); if (isPlaying) { playGame(); } }, time); } function whack(e) { if (!e.isTrusted) { return; } score++; this.classList.remove('up'); // 更新分数 document.getElementById('score').textContent = score; } holes.forEach(hole => hole.addEventListener('click', whack)); ``` 这个游戏的原理是随机在 6 个洞里面弹出地鼠，玩家需要在规定时间内点击地鼠，每次点击得分加 1 分。游戏结束后可以重新开始。其中，`mole.png` 是地鼠的图片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值