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 相关文章推荐
javascript cookie解码函数(兼容ff)
Mar 17 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
javascript初学者常用技巧
Sep 02 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 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构造函数实例讲解
2013/11/13 PHP
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
js实现div色块碰撞
2020/01/16 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
python实现按长宽比缩放图片
2018/06/07 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
linux面试题参考答案(1)
2016/01/22 面试题
介绍一下linux的文件系统
2012/03/20 面试题
业务经理岗位职责
2013/11/11 职场文书
企业负责人任命书
2014/06/05 职场文书
军训拉歌口号
2014/06/13 职场文书
反腐倡廉标语
2014/06/24 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
学生犯错保证书
2015/05/09 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
js不常见操作运算符总结
2021/11/20 Javascript