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
Feb 02 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
在线竞拍系统的PHP实现框架(二)
2006/10/09 PHP
php一些公用函数的集合
2008/03/27 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
几个高效,简洁的字符处理函数
2007/04/12 Javascript
非主流的textarea自增长实现js代码
2011/12/20 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
Python对切片命名的实现方法
2018/10/16 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
python跨文件使用全局变量的实现
2020/11/17 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
迟到检讨书900字
2014/01/14 职场文书
2014年国庆标语
2014/06/30 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
教你nginx跳转配置的四种方式
2022/07/07 Servers