js实战案例
关注
分享
扫一扫
crazy的蓝色梦想
小柒 爱前端
展开
-
原生js做打地鼠游戏
学原生js的语法其实是容易的，最主要的练习逻辑思维。对于刚刚学完js的语法的我来说，写这个打地鼠游戏真的花费了我一整天的时间。整体感觉写出来的js代码，其实就是平时练习的一些小案例的代码拼起来的，js代码量比较少，最难的还是逻辑思维。练习逻辑思维是每个初学js都必备的。建议：在写一些逻辑思维较强的程序时，建议画思维脑图。可帮助写代码是思路清晰，避免混乱。白线框是每个老鼠出现的位置&l...原创 2019-03-11 17:53:28 · 3037 阅读 · 3 评论 -
原生JS实现拼图游戏
前面的话练习了10几个原生js小游戏的案例，刚开始是无从下手，而现在有了自己的思路，不再觉得那么的难了。总结起来，还是那句话，“好的代码是时间熬出来的，多练是硬道理！”，这篇文章来分析一下拼图游戏实现的过程。整体思路自己的理解画了一个思维导图，帮助分析。效果图：用面向对象的方式来写这个代码：做准备工作：1： 创建一个配置对象：包括父盒子的宽高、需要的图片、以及划分的行列 va...原创 2019-05-21 20:04:56 · 3717 阅读 · 5 评论 -
js仿饿了吗？谁去拿外卖小游戏(锻炼布局思想、逻辑思维)
小小案例 直接上代码 js部分有注释<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...原创 2019-04-19 22:14:09 · 929 阅读 · 0 评论 -
原生js实现贪吃蛇小游戏 +背景音乐(包含对象、构造函数、this等知识点)+超详细注释
●锻炼逻辑思维●加强对象、构造函数、this等知识点的应用●html5中音乐播放器的应用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini...原创 2019-04-18 20:07:03 · 1258 阅读 · 0 评论 -
两个简单原生js小案例(点击弹出图层 + 全屏弹幕效果)
点击弹出图层最主要的知识：防止冒泡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2019-04-17 21:47:13 · 1104 阅读 · 0 评论 -
原生js模拟滚动条效果
巩固一下js基础知识:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...原创 2019-04-17 21:32:43 · 749 阅读 · 0 评论 -
原生js实现随机点名
原生js实现随机点名，js部分有注释<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2019-03-28 19:21:59 · 2299 阅读 · 2 评论 -
js键盘事件 、显示键码、字符编码 + 案例(键盘控制盒子运动)
键盘事件： keydown、keypress、keyup<script> /* 对鼠标事件的支持主要遵循是DOM0级 keydown:当用户按下键盘的任意键时触发，而且如果按下不放，会重复触发此事件 keypress:当用户按下键盘的字符键时触发，而且如果按住不放的话，会重复触发字事件 keyup:当用户释放键...原创 2019-03-31 14:27:06 · 752 阅读 · 0 评论 -
原生js实现三级联动
简单的三级联动，锻炼逻辑思维js部分有注释<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2019-03-30 17:33:55 · 4045 阅读 · 0 评论 -
原生js实现（别踩白块小游戏）
原生js实现简单的小游戏，巩固原生js基础知识js部分有详细注释<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1....原创 2019-03-26 16:39:21 · 2159 阅读 · 0 评论 -
原生js拖拽效果（图形的伸缩）
点击矩形的四个角和四个边实现不同的效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...原创 2019-03-25 17:41:42 · 1692 阅读 · 0 评论 -
仿淘宝轮播图(左右滑动，自动滑动，点击小圆点滑动)
尝试三种形式的轮播图一起实现，直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...原创 2019-03-25 17:17:01 · 3336 阅读 · 1 评论 -
原生js (面向对象版) --- 小羊肖恩动画(可拖拽)
这个案例，js部分分两个大块：1：创建小羊2: 小羊运动其中小羊运动部分分3块：1）小羊在初始位置运动起来2）小羊在从屏幕右边，运动到屏幕左边3) 小羊拖拽到屏幕的任意地方，拖拽时小羊停止运动&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;me原创 2019-03-16 11:10:53 · 853 阅读 · 1 评论 -
原生js + css3 仿渡一首页（轮播图 + 炫酷导航栏 ）
大致是效果图（录屏鼠标位置可能有点错位）这个首页原版是用jQuery写的，小柒用原生js仿写这个首页（涉及简单的ES6箭头函数语法），例如jQuery里的淡入淡出语法转为原生js的实现过程等。整个js代码是由简单的函数模块实现导航栏用到主要涉及到css3的animation、关键帧、transition轮播图就是分为 点击小圆点切换 ，以及自动播放代码都有详细注释：html部分：&l...原创 2019-05-23 10:38:15 · 2432 阅读 · 0 评论