！精品网站推荐：一个喜欢开发的小玩意的网站： https://codepen.io/

本篇清单List

1. 页面布局
2. 动态生成代码与皮卡丘style
3. 3.实现速度的控制

上篇中我们已经实现了静态的皮卡丘，我们需要让他动起来。

1.页面的布局

这里我们把屏幕分为上下两块。下面为预览皮卡丘的区域，上面为代码动态生成的区域

<div class="code-wrapper"><pre id="code"></pre></div><div class="preview-wrapper"><div class="preview"><div class="wrapper"><div class="nose"></div><div class="eye left"></div><div class="eye right"></div><div class="face left"></div><div class="face right"></div><div class="upperLip left"></div><div class="upperLip right"></div><div class="lowerLip-wrapper"><div class="lowerLip"><div class="tongue"></div></div></div></div></div>

注意上面的代码动态生成区域的盒子要用到

 标签， 因为我们要把一个字符串动态的添加到展示盒子中，其中的空格也要原样输出，所以用

 标签可以渲染空格。

2.动态生成代码与皮卡丘style

我们利用到setInterval 来进行待输入code 的匹配进去。把code 逐个的输入code展示盒子，和 style标签。

我们尽量把绘制生成的代码放到一个函数中方便下一步的控制速度的调用。

let id = null;
function doIt(speed) {function writeCode(pre, code, fn) {let codeWrapper = document.querySelector("#code");let style = document.querySelector("#styleTag");let n = 0;id = setInterval(() => {n += 1;codeWrapper.innerHTML = code.substring(0, n);style.innerHTML = code.substring(0, n);codeWrapper.scrollTop = codeWrapper.scrollHeight;if (n >= code.length) {window.clearInterval(id);fn && fn();}}, speed);}let code = `/**首先准备皮卡丘的皮*/.wrapper {width: 100%;height: 220px;position: relative;}/**下一步，准备皮卡丘的鼻子*/.nose {width: 0;height: 0;border: 11px solid red;border-radius: 12px;border-color: black transparent transparent transparent;position: absolute;left: 50%;top: 28px;transform: translate(-12px);}/**下一步，准备皮卡丘的眼睛*/.eye {width: 49px;height: 49px;background-color: #2e2e2e;border-radius: 50%;position: absolute;border: 2px solid #000;}.eye::before {content: "";display: block;width: 24px;height: 24px;background-color: white;position: absolute;border-radius: 50%;left: 6px;top: -1px;border: 2px solid #000;}.eye.left {right: 50%;margin-right: 90px;}.eye.right {left: 50%;margin-left: 90px;}/**下一步，准备皮卡丘的脸颊*/.face {width: 65px;height: 68px;background-color: #f92726;border: 2px solid black;border-radius: 50%;position: absolute;top: 85px;}.face.left {right: 50%;margin-right: 116px;}.face.right {left: 50%;margin-left: 116px;}/**下一步，准备皮卡丘的上唇*/.upperLip {height: 20px;width: 80px;border: 3px solid black;position: absolute;top: 52px;background-color: yellow;z-index: 1;}.upperLip.left {border-bottom-left-radius: 40px 20px;border-top: none;border-right: none;transform: rotate(-20deg);right: 50%;}.upperLip.right {left: 50%;border-bottom-right-radius: 40px 20px;border-top: none;border-left: none;transform: rotate(20deg);}/**下一步，准备皮卡丘的下唇*/.lowerLip-wrapper {width: 120px;height: 130px;position: absolute;left: 50%;margin-left: -60px;margin-top: 56px;overflow: hidden;}.lowerLip {height: 1000px;width: 120px;border-radius: 200px/800px;border: 2px solid black;background-color: #971818;position: absolute;bottom: 0;overflow: hidden;}/**下一步，准备皮卡丘的舌头*/.tongue {width: 100px;height: 100px;border-radius: 50px;left: 8px;background-color: #f95364;position: absolute;bottom: 0;z-index: 2;}`;writeCode("", code);
}
doIt(15);
let up = document.querySelector("#speedUp");
let down = document.querySelector("#speedDown");
let reset = document.querySelector("#reset");
up.addEventListener("click", () => {window.clearInterval(id);doIt(2);
});
down.addEventListener("click", () => {window.clearInterval(id);doIt(30);
});
reset.addEventListener("click", () => {window.clearInterval(id);doIt(15);
});

3.实现速度的控制

这一个就很简单了，我们只需要监听事件传入不同的参数就可以了。

画一只会动的皮卡丘（下）相关推荐

画一只会动的皮卡丘（上）
实现的皮卡丘样式如下图: 本篇内容List: tip1--全局样式初始化,配置 tip2--实现鼻子 tip3--实现眼睛 tip4--实现脸颊 tip5--嘴巴实现 1.先进行页面整体的样式配置这 ...
html5做一个皮卡丘,画一只会动的皮卡丘（上）
实现的皮卡丘样式以下图: 本篇内容List: tip1--全局样式初始化,配置 tip2--实现鼻子 tip3--实现眼睛 tip4--实现脸颊 tip5--嘴巴实现 1.先进行页面总体的样式配置这 ...
用python画皮卡丘源代码-实现童年宝可梦，教你用Python画一只属于自己的皮卡丘...
原标题:实现童年宝可梦,教你用Python画一只属于自己的皮卡丘大数据文摘出品作者:李雷.蒋宝尚还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗? 还记得和小伙伴拿着精灵球,一起召唤小精灵的中二模 ...
python简单代码画皮卡丘-实现童年宝可梦，教你用Python画一只属于自己的皮卡丘...
原标题:实现童年宝可梦,教你用Python画一只属于自己的皮卡丘大数据文摘出品作者:李雷.蒋宝尚还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗? 还记得和小伙伴拿着精灵球,一起召唤小精灵的中二模 ...
python画卡通皮卡丘_实现童年Pokémon，教你用Python画一只属于自己的皮卡丘
原标题:实现童年Pokémon,教你用Python画一只属于自己的皮卡丘大数据文摘出品作者:李雷.蒋宝尚还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗? 还记得和小伙伴拿着精灵球,一起召唤小精灵 ...
怎么用python画皮卡丘_实现童年宝可梦，教你用Python画一只属于自己的皮卡丘
原标题:实现童年宝可梦,教你用Python画一只属于自己的皮卡丘大数据文摘出品作者:李雷.蒋宝尚还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗? 还记得和小伙伴拿着精灵球,一起召唤小精灵的中二模 ...
用python画皮卡丘画法-实现童年宝可梦，教你用Python画一只属于自己的皮卡丘
皮卡丘脸颊两边有着小小的电力袋,因此他独有的能力就是可以放电.在动画片中,小智的皮卡丘性格十分害羞,稍有不满就乱放电电人. 小时候也想拥有一只会放电的皮卡丘,长大后渐渐明白,这种高度智能会放电的&qu ...
用python画皮卡丘代码-实现童年宝可梦，教你用Python画一只属于自己的皮卡丘
大数据文摘出品作者:李雷.蒋宝尚还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗? 还记得和小伙伴拿着精灵球,一起召唤小精灵的中二模样吗? 最近上映的<大侦探皮卡丘>,是否会让你秒回童年 ...
用python画皮卡丘-教你用Python画一只属于自己的皮卡丘
还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗?还记得和小伙伴拿着精灵球,一起召唤小精灵的中二模样吗? 最近上映的<大侦探皮卡丘>,是否会让你秒回童年,进入那个充满神奇宝贝的世界,和小智一 ...

画一只会动的皮卡丘（下）

！精品网站推荐：一个喜欢开发的小玩意的网站： https://codepen.io/

本篇清单List

上篇中我们已经实现了静态的皮卡丘，我们需要让他动起来。

1.页面的布局

这里我们把屏幕分为上下两块。下面为预览皮卡丘的区域，上面为代码动态生成的区域

注意上面的代码动态生成区域的盒子要用到

2.动态生成代码与皮卡丘style

我们利用到setInterval 来进行待输入code 的匹配进去。把code 逐个的输入code展示盒子，和 style标签。

我们尽量把绘制生成的代码放到一个函数中方便下一步的控制速度的调用。

3.实现速度的控制

这一个就很简单了，我们只需要监听事件传入不同的参数就可以了。

画一只会动的皮卡丘（下）相关推荐

最新文章

热门文章

画一只会动的皮卡丘（下）

！精品网站推荐： 一个喜欢开发的小玩意的网站： https://codepen.io/

本篇清单List

上篇中我们已经实现了静态的皮卡丘，我们需要让他动起来。

1.页面的布局

这里我们把屏幕分为上下两块。下面为预览皮卡丘的区域，上面为代码动态生成的区域

注意上面的代码动态生成区域的盒子要用到

2.动态生成代码与皮卡丘style

我们利用到setInterval 来进行待输入code 的匹配进去。把code 逐个的输入code展示盒子， 和 style标签。

我们尽量把绘制生成的代码放到一个函数中方便下一步的控制速度的调用。

3.实现速度的控制

这一个就很简单了，我们只需要监听事件传入不同的参数就可以了。

画一只会动的皮卡丘（下）相关推荐

最新文章

热门文章

！精品网站推荐：一个喜欢开发的小玩意的网站： https://codepen.io/

我们利用到setInterval 来进行待输入code 的匹配进去。把code 逐个的输入code展示盒子，和 style标签。