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下弹出窗口的变通
Apr 18 Javascript
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
javascript实现异形滚动轮播
Nov 28 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的FTP学习(一)
2006/10/09 PHP
php object转数组示例
2014/01/15 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
js 表单验证方法(实用)
2009/04/28 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
Python中的两个内置模块介绍
2015/04/05 Python
python WindowsError的错误代码详解
2017/07/23 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
基于Python实现天天酷跑功能
2021/01/06 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
个人自荐书
2013/12/20 职场文书
员工培训邀请函
2014/01/11 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
业务员的岗位职责
2014/03/15 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
工伤调解协议书
2016/03/21 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server