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 相关文章推荐
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 Javascript
js中replace的用法总结
Dec 27 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 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网上调查系统
2006/10/09 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
JavaScript 布尔操作符解析  && || !
2012/08/10 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
扒一扒JavaScript 预解释
2015/01/28 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
Python实现的归并排序算法示例
2017/11/21 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
python微信公众号开发简单流程
2018/03/23 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
Python中qutip用法示例详解
2020/10/02 Python
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
上班迟到检讨书
2014/01/10 职场文书
教学器材管理制度
2014/01/26 职场文书
教师求职自荐信
2014/03/09 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
先进个人推荐材料
2014/12/29 职场文书
中学语文教学反思
2016/02/16 职场文书
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android