- 博客(17)
- 收藏
- 关注
RSS订阅原创 javaScript实战——贪吃蛇
功能实现：地图map，我们通过在map类里面用二维数组建立行和列，实现网格状容器地图 食物food，功能一是蛇吃掉食物后食物消失，功能二重新生成新的食物，我们通过设置容器背景图的方式绘制食物，并获取食物和蛇头在map中的位置，如果蛇头与食物坐标一致，删除该位置容器的食物背景图。通过随机数的方式生成新的随机坐标，并将此位置的容器背景图更换为食物。 障碍物block，一样通过背景图绘制在地图上，功能一蛇碰到障碍物游戏结束，与蛇吃食物的方法类似，也是通过比较蛇头与障碍物的位置，坐标一致则游戏结束，功能二蛇
2022-04-16 15:55:48
3795
2
原创 JavaScript实战——打气球游戏
源码：<!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&
2022-04-03 19:49:21
3764
原创 JavaScript实战练习——图片裁剪
源码：<!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&
2022-03-28 22:17:39
1908
原创 JavaScript实现放大器
demo介绍：咱们今天做的放大器来源于京东（想看效果的直接去京东商城随便点开一个商品就可以看到）。为了方便，咱们直接把效果图进行了标记，在我们没有将鼠标移入app中，mask和big都是不可见的，当我们将鼠标移入app时，mask和big可见，且我们在app中移动鼠标时，mask对应的区域将在big中显示。（mask区域的宽高是相对固定的哈，就是app宽高的一半，本来想做一个鼠标动态划定mask大小的，但是我学识尚浅，还没办法完成）。思路：html部分我们只需要写一个id="app"
2022-03-26 18:30:15
1444
原创 jQuery实现简易选项卡
源码：<!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&
2022-03-19 21:30:32
250
原创 jQuery篮球计分器
源码：<!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&
2022-03-19 20:21:58
285
原创 jQuery实现异形轮播图
思路：异形轮播图与普通轮播图不同的一点，是异形轮播图一次性展示多个图片，且图片大小的位置会动态变化。 以往我的处理办法都是直接给要展示的图片动态的添加一个class类，简单粗暴。这次我在很多地方都使用了数组思想和对象思想，比如arr中我放了正在展示的图片的索引值，并通过数组的pop()、push()、shift()、unshift()方法实现arr数组中储存的图片索引值的动态删减，实现点击按钮就可以控制正在展示的图片的索引值。又比如在给每个li设置背景颜色backg...
2022-03-19 15:35:43
2041
原创 jQuery实现碎片轮播图
碎片轮播图： 碎片轮播图顾名思义就是像碎片拼接而成的轮播图，若干个小方块碎片通过动画效果拼接成一张完整的图片。实现原理： 轮播图的通常功能，都包括这几个部分，核心就是通过图片的索引值控制页面切换：1.点击上一页切换到上一页（index++），点击下一页切换到下一页（index--）；2.小圆点与图片绑定，点击小圆点，跳转至对应的图片；跳转至对应的图片，小圆点样式改变（index）；3.定时轮播(setInterval方法)； 碎片轮播图在...
2022-03-17 18:15:34
1112
原创 Vue小demo—美团注册页面
一、目标效果效果图展示实现原理1.输入框聚焦时边框变色使用CSS的:focus选择器，轻松实现元素聚焦时改变样式。//用法示例<!DOCTYPE html><html><head><style>input:focus{background-color:yellow;}</style></head><body><p>在文本框中点击，您会看到黄色的背景：<
2022-02-12 12:36:22
1468
5
原创 HTML+CSS+JavaScript实战——美团首页
前端学习是一个漫长且艰辛的过程，我们很容易因为急于求成而迷失方向。所以，建议初入前端的小伙伴们，最开始就要去花一些时间了解一下什么是前端、前端可以做什么、前端需要掌握哪些知识，然后就是制定计划去学习这些知识，每一阶段的学习完成之后要记得独立的完成几个实战项目，这样才能更好的了解所学的新知识到底能完成什么效果。学习完HTML和CSS就可以试着写一个静态网页，学习完JavaScript就可以试着写一个动态网页了，这几天我自己写了一下美团首页，感觉收获很多，想跟大家分享一下。1.列表（ul、ol、dl）.
2022-01-28 22:16:04
11111
15
原创 什么是AJAX？
AJAX简介AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。特点：在网页不刷新的情况下，向服务端发送http请求，得到http响应。（简单来说，就是用户想看网页就加载，用户不想看就不加载）应用：1.浏览器搜索关键字提示 2.注册页面检测用户名是否存在 3.电商平台二级菜单 4.新闻网站滚动加载XML简介XML是可扩展标记语言，我们熟悉的HTML是超文本标记语言，标记语言嘛，简单来说，XML和HTML都是写标签的，它
2022-01-19 22:21:32
1750
原创 HTML+CSS+JS实现京东轮播图——Bootstrap篇（最简单的轮播图）
BootstrapBootstrap是基于HTML、CSS、JavaScript的前端开发框架，简单来说就是已经写好的样式和函数，我们直接通过在HTML元素中添加对应的class类就可以轻松调用这些写好的css样式和JS函数（个人理解，有错误的话欢迎指出，菜鸟在此表示感谢）。Bootstrap提供了大量的网页框架，包括导航栏、轮播图、登录页等，可以新手快速搭建一个漂亮的网页。Bootstrap教程：1.Bootstrap中文网2.菜鸟教程实现方法1.下载bootstrap包，引入
2022-01-13 21:56:18
3348
原创 HTML+CSS+JS实现京东轮播图——z-index篇
轮播图功能1.点击上一页按钮，返回上一页；点击下一页按钮，进入下一页；2.图片每隔3秒自动轮播，鼠标移入时轮播停止3.小圆点和图片保持动态联系，点击小圆点可跳转到指定页。涉及的知识点HTML1.列表2.按钮3.data-自定义类CSS1.相对定位和绝对定位2.z-indexJS1.for循环2.if语句3.定时器和清除定时器4.onmouseover和onmouseleave5.onclick绑定事件代码展示HTML文件代码&
2022-01-13 17:22:13
1671
原创 HTML+CSS+JS生成随机验证码
昨天在小破站看到一个前端生成随机验证码的视频，感觉很有意思，就跟着操作了一下，成功了。后来自己又想给它加一个提交按钮，输入并判断验证码的正确性，也可以正常运行，但是我的代码好像还是存在一些bug：1.canvas标签是绘图容器，自带属性使它是一个默认300*150的容器，缩小canvs容器时，里面的绘图也会变小，我没有找到合适的方法去调整它的大小。2.对于输入框input，我使用了float浮动，为了使input输入框和canvas里面的验证码并排，但是被vscod...
2022-01-11 15:21:49
3237
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人