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编程起步(第六课)
Feb 27 Javascript
javascript数组组合成字符串的脚本
Jan 06 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
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 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
php中常用的预定义变量小结
2012/05/09 PHP
php发送post请求的三种方法
2014/02/11 PHP
PHP 读取和编写 XML
2014/11/19 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
记录一次完整的react hooks实践
2019/03/11 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
python网络编程之读取网站根目录实例
2014/09/30 Python
如何通过python画loss曲线的方法
2019/06/26 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
浅析python函数式编程
2020/09/26 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
瑞典度假品牌:OAS
2019/05/28 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
铁路工务反思材料
2014/02/07 职场文书
授权委托书协议书
2014/10/16 职场文书
2015毕业寄语大全
2015/02/26 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
物业保洁员管理制度
2015/08/05 职场文书