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拖拽组件
Jul 28 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 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
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
js和as的稳定传值问题解决
2013/07/14 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
跟老齐学Python之永远强大的函数
2014/09/14 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
详谈python http长连接客户端
2017/06/12 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
详解Python绘图Turtle库
2019/10/12 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
打架检讨书50字
2014/01/11 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
办公设备采购方案
2014/03/16 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
初中同学会活动方案
2014/08/22 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
文明单位汇报材料
2014/12/24 职场文书
节水倡议书
2015/01/19 职场文书
初中同学会致辞
2015/08/01 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
django 认证类配置实现
2021/11/11 Python