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 相关文章推荐
js实现DIV的一些简单控制
Jun 04 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
Node 代理访问的实现
Sep 19 Javascript
原生js实现随机点名
Jul 05 Javascript
Node与Python 双向通信的实现代码
Jul 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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
php简单实现快速排序的方法
2015/04/04 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
JS关键字变色实现思路及代码
2013/02/21 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
Vue基础配置讲解
2019/11/29 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
pytorch构建多模型实例
2020/01/15 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
构建和谐校园倡议书
2015/01/19 职场文书
论文答谢词
2015/01/20 职场文书
四大名著读书笔记
2015/06/25 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
详解nodejs内置模块
2021/05/06 NodeJs
Golang实现可重入锁的示例代码
2022/05/25 Golang
使用Apache Camel表达REST服务的方法
2022/06/10 Servers