JavaScript(2):JS实现小女孩行走
2021/4/13 22:28:28
本文主要是介绍JavaScript(2):JS实现小女孩行走,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
JS实现小女孩行走
用JS实现小女孩行走,行走的过程实际上就是图片不断移动的过程,把多张图片组合在一起,利用人眼反应速度没有图片更换速度快的原理,实现了小女孩行走。
基本思路是小女孩从浏览器最左边开始出现,每个小女孩出现的高度位置是随机的,速度也是随机的。
实现起来并不难,但用到了js面向对象的思维,下面通过代码方式来分析小女孩行走。
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><style type="text/css">.girl { position: absolute;/* 大小设置为小女孩的大小,不是整张图片的大小 */ width: 79px; height: 108px;/* 设置整张背景图片 */ background-image: url(img/girl.png);/* 定位到小女孩从左往右走的图片 */ background-position: 0px -216px; left: 0px; top: 0px;}</style><body><div class="girl"></div></body></html><script type="text/javascript">function Girl() {//步子为0this.buzi = 0;//步长的随机1-10this.step = parseInt(Math.random() * 8 + 1);this.timer = null;//小女孩都是从最终版出现this.left = 0;this.dom = null;// 浏览器高度this.maxTop = (document.documentElement.clientHeight || document.body.clientHeight) - 108;//小女孩出现的高度this.top = parseInt(Math.random() * this.maxTop);this.dom = null;// 构造函数的调用方法this.init();//再调用行走的方法this.walk();}// 方法绑定到原型上面 Girl.prototype.init = function() {// 添加一个元素,并添加到页面this.dom = document.createElement('div');// 添加类名this.dom.className = 'girl';// 设置不同的top定位this.dom.style.top = this.top + 'px';// 添加到页面 document.body.appendChild(this.dom);}// 行走的方法 Girl.prototype.walk = function() {//桥接,这里的this赋值给一个变量var that = this;// 在定时器中用this是window,所以下把this保留下来,指向问题,每隔100毫秒走一步this.timer = setInterval(function() {//步子累加 that.buzi++;//验证 that.buzi = that.buzi > 7 ? 0 : that.buzi; that.left += that.step;if (that.left > 1200) { that.die();}// 设置当前元素的变化 that.dom.style.backgroundPositionX = -79 * that.buzi + "px"; that.dom.style.left = that.left + 'px';}, 100)}// 死亡的方法 Girl.prototype.die = function() {//停止定时器clearInterval(this.timer);//移除这个div document.body.removeChild(this.dom)}//没隔500毫秒创建一个小女孩对象setInterval(function() {new Girl();}, 500)</script>
效果:
这篇关于JavaScript(2):JS实现小女孩行走的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)