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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
详解Vue中watch对象内属性的方法
Feb 01 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 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
ASP和PHP都是可以删除自身的
2007/04/09 PHP
php下通过POST还是GET来传值
2008/06/05 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
php的socket编程详解
2016/11/20 PHP
日期 时间js控件
2009/05/07 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
python处理大数字的方法
2015/05/27 Python
Python实现将xml导入至excel
2015/11/20 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
大学毕业通用个人的求职信
2013/12/08 职场文书
电子银行营销方案
2014/02/22 职场文书
社区植树节活动总结
2015/02/06 职场文书
公司市场部岗位职责
2015/04/15 职场文书
中学总务处工作总结
2015/08/12 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
nginx中proxy_pass各种用法详解
2021/11/07 Servers