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+Ajax+Json的高效分页实现代码
Oct 29 Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
AJAX实现省市县三级联动效果
Oct 16 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
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
python插入数据到列表的方法
2015/04/30 Python
python&MongoDB爬取图书馆借阅记录
2016/02/05 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
SQL注入攻击的种类有哪些
2013/12/30 面试题
中专毕业生自我鉴定
2014/02/02 职场文书
装饰活动策划方案
2014/02/11 职场文书
民主生活会剖析材料
2014/09/30 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP