前端练习demo
关注
分享
扫一扫
文章平均质量分 71
Web前端好玩的前端练习demo
海拥✘
CSDN 内容合伙人，全栈领域优质创作者，华为云享专家，阿里云专家博主，InfoQ、蓝桥云课签约作者，HDZ核心组成员，全网粉丝20万+。一枚爱好计算机科学，乐于分享技术与快乐的博主。
展开
-
TypeScript 实用程序类型：选择和省略
作者主页：海拥作者简介：CSDN全栈领域优质创作者、HDZ核心组成员粉丝福利：粉丝群 每周送13本书，不定期送各种小礼品直接跳到末尾 去评论区领书我们将在本文中深入探讨 PickOmit它们都用于创建一个新类型，只有原始类型的一组选项。但是，它们的工作方式略有不同。我们来看看高层的区别。Pick只拿你定义你想要的物品Omit将选择你未定义的所有项目以省略所以两者的结果非常相似，这取决于你的需要你可能喜欢哪一个。TypeScript Pick原创 2022-02-22 09:08:12 · 31490 阅读 · 3 评论 -
JavaScript 中的 7 个杀手级单行代码
JavaScript 是 Web 开发最重要的支柱。洗牌阵列在使用需要一定程度随机化的算法时，你经常会发现洗牌数组是一项非常必要的技能。以下代码段以复杂的方式对数组进行混洗。O(n log n)const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5);// Testingconst arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];console.log(shuffleArray(a原创 2022-02-16 08:23:58 · 9083 阅读 · 5 评论 -
如何使用 JavaScript 制作待办事项列表
作者主页：海拥作者简介：CSDN全栈领域优质创作者、HDZ核心组成员粉丝福利：粉丝群 每周送六本书，不定期送各种小礼品在本文中，您将学习如何使用 JavaScript 创建待办事项列表。Todo List JavaScript 是一个不错的项目，可以帮助初学者增加对 JavaScript 的了解。这种类型的JavaScript Todo List主要用于组织您的任何信息。在这里，您可以创建一个包含许多稍后要执行的文本的列表。完成后，您可以删除它们。它基本...原创 2022-01-27 16:17:16 · 7119 阅读 · 10 评论 -
基于HTML5+CSS+JS的响应式圣诞老人过悬崖小游戏
基于HTML5/CSS/JS响应式圣诞老人过悬崖小游戏，拉杆子跨越悬崖小游戏，拉杆子过关小游戏非常火爆，并且非常好玩受欢迎，游戏玩法:按住鼠标伸出一根棍子。免费下载地址：https://download.csdn.net/download/qq_44273429/14156656游戏截图：Html代码：<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title&原创 2021-12-24 16:58:54 · 5556 阅读 · 9 评论 -
跟小海一起看下雪——用HTML、CSS和JS实现简单的下雪特效
作者主页：http://haiyong.site作者简介：CSDN全栈领域优质创作者、HDZ核心组成员粉丝福利：粉丝群送6-9本书，不定期送各种小礼品往期获奖记录(http://haiyong.site/choujiang）很多南方的小伙伴可能没怎么见过或者从来没见过下雪，今天我给大家带来一个小Demo，模拟了下雪场景，首先让我们看一下运行效果原创 2021-12-15 09:35:14 · 17907 阅读 · 38 评论 -
使用 HTML、CSS 和 JavaScript 制作模拟时钟(初学者教程)
在本文中，您将学习如何使用 HTML、CSS 和 JavaScript 编程代码制作模拟时钟。在这里我将向您展示如何制作一个简单的模拟时钟。 正如您在上图中所看到的，这是一个非常简单很基础的设计，你可以在这里延伸扩展。这里有时针、分针和秒针，可以查看时间。时钟脉冲中有1 到 12 的数字。时间取决于您设备的时间，即时间将与您设备的时间相同。最初使用 HTML 编程代码来构造这款手表。CSS 代码已用于设计它。最引人注目的工作是 JavaScript 编程代码。当然，要制作这款手表，您需要对HTML、CS原创 2021-06-17 10:20:13 · 4907 阅读 · 41 评论 -
基于HTML/CSS的响应式俄罗斯套娃ʕ •ᴥ•ʔ小游戏
演示效果：如下所示，您可以看到我创建的演示：一个基于HTML，CSS的响应式俄罗斯套娃ʕ •ᴥ•ʔ小游戏，文章末尾给出了完整的源码截图演示地址http://haiyongcsdn.gitee.io/eluositaowa/项目地址https://gitee.com/haiyongcsdn/eluositaowa代码展示HTML(Pug)mixin bear() svg(viewbox='0 0 300 550' preserveaspectratio='xMinYMin'.原创 2021-03-09 22:26:00 · 7738 阅读 · 3 评论 -
基于HTML/CSS/JS的动态元素周期表
基于HTML/CSS/JS的动态元素周期表一个基于HTML，CSS，JS的动态元素周期表，文章中给出了完整的源码演示效果演示地址https://wanghao221.github.io/game/yuansuzhouqibiao/（打不开的话刷新一下试试）代码展示HTML<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Wanghao | 元素周.原创 2021-03-02 22:48:00 · 6533 阅读 · 1 评论 -
基于HTML/CSS/JS的十一个情人节表白可爱小游戏、小动画【情人节主题征文】
情人节表白可爱小游戏、小动画我要悄悄学习，做一个浪漫的程序员1.小鹿亲嘴2.变成小猫3.爱心表白4.爱心溢出5.思念如马6.霓虹灯爱心7.3D旋转相册8.用不同的语言说“爱”9.愿意做我女朋友吗10.我被你所深深吸引11.想对你说的话都在抽屉里总结1.演示地址2.代码下载1.CSDN积分下载2.关注公众号免费获取相关内容我要悄悄学习，做一个浪漫的程序员本来想赶在前几天在情人节之前把这篇文章写完，结果又是过年，又是走亲戚，情人节这天我又和女朋友看电影去了，所以一直到今天，白天忙完了事情，这才给大家带来这原创 2021-02-17 21:32:24 · 4207 阅读 · 0 评论 -
基于HTML/CSS/JS的爱吹风的狮子小游戏
爱吹风的狮子一个基于HTML，CSS，Javascript的爱吹风的狮子小游戏。演示效果演示地址https://wanghao221.github.io/game/Lion-Game.html（打不开的话刷新一下试试）截图代码展示HTML<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>Wanghao | Chill原创 2021-02-12 00:41:49 · 5047 阅读 · 7 评论 -
基于HTML/CSS/JS微信公众号展示页面模板
首先看一下成品演示页面https://pai-daxing1.github.io/weixin/项目结构：HTML代码：<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="viewport" con原创 2021-01-31 22:26:16 · 10899 阅读 · 4 评论 -
响应式2048小游戏(支持手机端)
项目演示地址：https://wanghao221.github.io/game/2048-Responsive.html先看一下手机端运行效果，拖黑色地方会移动窗口，但拖白色没事。HTML代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Wanghao | 2048 Responsive</title> <link rel="sty原创 2021-01-31 02:26:34 · 9582 阅读 · 0 评论 -
勇猛的兔子的疯狂奔跑小游戏
勇猛的兔子的疯狂奔跑小游戏1.运行效果2.游戏玩法3.游戏截图4.代码展示5.项目下载地址相关内容原创 2021-01-23 11:27:41 · 9383 阅读 · 0 评论 -
基于HTML的消灭方块小游戏
基于HTML的消灭方块小游戏一个基于HTML，Javascript的消灭方块小游戏-> view online demoscreenshot:原创 2021-01-05 21:19:17 · 6903 阅读 · 0 评论 -
一个基于HTML，Javascript的消除游戏
消除游戏-消消乐一个基于HTML，Javascript的消除游戏。使用了createjs框架。-> view online demoscreenshot:Example 1:Example “hint()”:Example [col&row]:{col:20, //set 20 columnsrow:16, //set 16 rows}usage:<div class="game-container"> <canva原创 2021-01-05 00:34:23 · 9462 阅读 · 2 评论 -
HTML5汽车赛道飙车游戏免费源码下载
HTML5汽车赛道飙车游戏 HTML5汽车赛道飙车游戏代码免费下载：https://download.csdn.net/download/qq_44273429/14017244简介：H5精品短跑赛车俱乐部游戏，赛车游戏源代码。游戏介绍：鼠标,键盘左右键，控制赛车方向，让我们开始赛车比赛游戏吧。兼容手机移动端（横屏模式效果更好，左右晃动控制方向），带背景音效。项目虽简易，供大家学习和...原创 2021-01-03 20:58:17 · 10377 阅读 · 0 评论 -
HTML5 canvas鼠标经过星星连线
HTML5 canvas鼠标经过星星连线，鼠标经过星空可将星星一颗颗连成直线，页面背景有变色效果。HTML代码：<!doctype html><html><head><meta charset="utf-8"><title>互动星空</title><style>html,body { margin:0; overflow:hidden; width:100%; height:100%; curso原创 2021-01-03 20:08:16 · 4476 阅读 · 0 评论 -
基于HTML的3D立方体相册下载
基于HTML的3D立方体相册 免费代码下载地址：https://download.csdn.net/download/qq_44273429/13996508(粉丝可免费下载，点个关注呗)HTML代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><...原创 2021-01-01 01:37:09 · 5011 阅读 · 0 评论 -
一个LED圣诞装饰灯网站首页及产品分类页代码
网站首页效果图：HTML代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta na原创 2020-12-22 17:29:41 · 12052 阅读 · 1 评论 -
HTML5拉杆子过关小游戏代码免费下载
HTML5拉杆子过关小游戏代码免费下载源码简介 相关最新源码HTML5拉杆子过关小游戏代码，拉杆子跨越悬崖小游戏，拉杆子过关小游戏非常火爆，并且非常好玩受欢迎，游戏玩法:按住鼠标伸出一根棍子。游戏截图：HTML代码：<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>HTML5拉杆子过关小游戏代码 - 海拥</title><原创 2020-12-16 17:13:08 · 10089 阅读 · 1 评论 -
2048小游戏HTML网页版源码共享
上下左右键控制游戏截图如下：HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" conte原创 2020-12-15 23:52:13 · 9076 阅读 · 4 评论 -
一个好玩的辞职信HTML版
当你想点不同意时他就会自动爬开。话不多说，直接上代码。原创 2020-12-06 13:26:01 · 8349 阅读 · 11 评论