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 相关文章推荐
围观tangram js库
Dec 28 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 Javascript
VUE递归树形实现多级列表
Jul 15 Vue.js
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初学者头疼问题总结
2006/07/08 PHP
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
javascript实现拖放效果
2015/12/16 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
Python变量访问权限控制详解
2019/06/29 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
python基于property()函数定义属性
2020/01/22 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
计算机大学生的自我评价
2013/10/15 职场文书
结构工程个人自荐信范文
2013/11/30 职场文书
厂区绿化方案
2014/05/08 职场文书
教师考核评语大全
2014/12/31 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
解析MySQL索引的作用
2022/03/03 MySQL
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android