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方法toggleClass实现隔行换色
Oct 22 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 Javascript
Vant picker 多级联动操作
Nov 02 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
改造一台复古桌面收音机
2021/03/02 无线电
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
return false;和e.preventDefault();的区别
2010/07/11 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
Django组件之cookie与session的使用方法
2019/01/10 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
Python加速程序运行的方法
2020/07/29 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
工商管理自荐书
2014/07/06 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
react 路由Link配置详解
2021/11/11 Javascript
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
python多线程方法详解
2022/01/18 Python
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏