JavaScript实现班级随机点名小应用需求的具体分析
更新时间：2014年05月12日 10:48:25 作者：
班级随机点名小应用，点击开始按钮，人员的颜色开始变化，当停止的时候，会有一个颜色不同的位置，那么这个位置就是被点到的同学了
需求如下：
1.在网页中显示，班级所有人员的名字。
2.点击开始按钮，人员的颜色开始变化，当停止的时候，会有一个颜色不同的位置，那么这个位置就是被点到的同学了。
大致的图形界面如下：
下面是对上面的需求分析的具体分析如下：
1.初始化这样一个页面，并设置统一颜色-green。
a.同学的名字，用数组存储
b.在页面用div块显示
2.随机选择一个位置让其颜色变化成-red
a.颜色的变化用css样式去控制
b.随机的位置用随机函数去生成
3.为了让其有动画的效果，设置间隔时间让其颜色变化的位置向后移动。并且将上一个位置的颜色，恢复成绿色。
a.需要设计一个方法，让div的颜色产生变化，同时向后移动应该调用一个间隔时间调用的方法，那么js中有settimeout，setinterval方法可供选择使用
4.动画的效果，应该在指定的时间内停止，停止的位置仍然是红色。
a.动画效果在指定的时间内停止，实际上就是停止上述方法。在js中使用不同的方法，有不同的实现形式
5.当停止在某个位置以后，弹出一个对话框，显示谁是被选中的同学。
a.Alert函数弹出最终的结果就ok了
在下一节中，将对这个小应用进行javascript代码的实现哦。
1.在网页中显示，班级所有人员的名字。
2.点击开始按钮，人员的颜色开始变化，当停止的时候，会有一个颜色不同的位置，那么这个位置就是被点到的同学了。
大致的图形界面如下：
下面是对上面的需求分析的具体分析如下：
1.初始化这样一个页面，并设置统一颜色-green。
a.同学的名字，用数组存储
b.在页面用div块显示
2.随机选择一个位置让其颜色变化成-red
a.颜色的变化用css样式去控制
b.随机的位置用随机函数去生成
3.为了让其有动画的效果，设置间隔时间让其颜色变化的位置向后移动。并且将上一个位置的颜色，恢复成绿色。
a.需要设计一个方法，让div的颜色产生变化，同时向后移动应该调用一个间隔时间调用的方法，那么js中有settimeout，setinterval方法可供选择使用
4.动画的效果，应该在指定的时间内停止，停止的位置仍然是红色。
a.动画效果在指定的时间内停止，实际上就是停止上述方法。在js中使用不同的方法，有不同的实现形式
5.当停止在某个位置以后，弹出一个对话框，显示谁是被选中的同学。
a.Alert函数弹出最终的结果就ok了
在下一节中，将对这个小应用进行javascript代码的实现哦。
相关文章
这篇文章主要介绍了如何用JS模拟实现数组的map方法，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
在 JavaScript 编程中,相等运算符和类型转换是理解语言行为的关键部分,虽然这些概念看似简单,但它们的细节可能会导致意想不到的结果,本文将深入探讨 == 和 === 运算符的区别、对象比较、以及 JavaScript 中的显式和隐式类型转换,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了帝国cms首页列表页实现点赞功能的相关资料,需要的朋友可以参考下2017-10-10
JavaScript之appendChild、insertBefore和insertAfter使用说明
这几天需要用到对HTML节点元素的删/插操作，由于用到insertBefore方法的时候遇到了一些麻烦，现在作为知识的整理，分别对appendChild、insertBefore和insertAfter做个总结2010-12-12
这篇文章主要介绍了JavaScript框架特性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了使用js绘制几何图形教程，本文主要是教大家绘制圆、弧、扇形,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了JS实现同时搜索百度和必应的方法,可实现在底部的两个框架中同时显示两个搜索引擎的搜索结果,是非常实用的技巧,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了详解babel升级到7.X采坑总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为他可以和主页面并行加载，不会阻塞主页面。2011-07-07
这篇文章主要为大家详细介绍了js实现多张图片延迟加载效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
最新评论