JavaScript实现班级随机点名小应用需求的具体分析


Posted in Javascript onMay 12, 2014

需求如下:

1.在网页中显示,班级所有人员的名字。

2.点击开始按钮,人员的颜色开始变化,当停止的时候,会有一个颜色不同的位置,那么这个位置就是被点到的同学了。

大致的图形界面如下:

JavaScript实现班级随机点名小应用需求的具体分析

下面是对上面的需求分析的具体分析如下:

1.初始化这样一个页面,并设置统一颜色-green。

a.同学的名字,用数组存储

b.在页面用div块显示

2.随机选择一个位置让其颜色变化成-red

a.颜色的变化用css样式去控制

b.随机的位置用随机函数去生成

3.为了让其有动画的效果,设置间隔时间让其颜色变化的位置向后移动。并且将上一个位置的颜色,恢复成绿色。

a.需要设计一个方法,让div的颜色产生变化,同时向后移动应该调用一个间隔时间调用的方法,那么js中有settimeout,setinterval方法可供选择使用

4.动画的效果,应该在指定的时间内停止,停止的位置仍然是红色。

a.动画效果在指定的时间内停止,实际上就是停止上述方法。在js中使用不同的方法,有不同的实现形式

5.当停止在某个位置以后,弹出一个对话框,显示谁是被选中的同学。

a.Alert函数弹出最终的结果就ok了

在下一节中,将对这个小应用进行javascript代码的实现哦。

Javascript 相关文章推荐
简单的JS多重继承示例
Mar 13 Javascript
javascript中setInterval的用法
Jul 19 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 #Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 #Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 #Javascript
JavaScript中对象属性的添加和删除示例
May 12 #Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 #Javascript
Javascript中对象继承的实现小例
May 12 #Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
May 12 #Javascript
You might like
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
JQuery 文本框使用小结
2010/05/22 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
vue实现购物车小案例
2019/09/27 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
Python命名空间详解
2014/08/18 Python
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
Python错误处理操作示例
2018/07/18 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
500行python代码实现飞机大战
2020/04/24 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
优秀毕业生自我鉴定
2014/02/11 职场文书
趣味比赛活动方案
2014/02/15 职场文书
廉政教育的心得体会
2014/09/01 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
2014年副班长工作总结
2014/12/10 职场文书
赔偿协议书
2015/01/27 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
教你用Python matplotlib库制作简单的动画
2021/06/11 Python
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android
mysql幻读详解实例以及解决办法
2022/06/16 MySQL