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 相关文章推荐
html下载本地
Jun 19 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
利用JavaScript写一个简单计算器
Nov 27 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 字符串替换的方法
2012/01/10 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
django连接mysql配置方法总结(推荐)
2018/08/18 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
python 写一个文件分发小程序
2020/12/05 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
公务员平时考核实施方案
2014/03/11 职场文书
社会实践的活动方案
2014/08/22 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
个人先进事迹总结
2015/02/26 职场文书
个人欠条范本
2015/07/03 职场文书
家长会感言
2015/08/01 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
为什么node.js不适合大型项目
2021/04/28 Javascript
redis 查看所有的key方式
2021/05/07 Redis
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android