javascript实现的一个随机点名功能
这个其实是对JS随机数的一个练习方式,先把所有人得名字预先写好在一个数组里,然后让数组里的值快速的显示在区域内,当你按停的时候滚动就会停止达到随机效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS写的随机点名 - 琼台博客</title>
<script type="text/javascript">
var isRun=true;
var a = ["张三","李四","王五","赵六"];
var a2 = new Array();
function action(str){
var s = document.getElementById("bt").value;
if(s=="开始"){
isRun=true;
run();
document.getElementById("bt").value="结束";
}else{
isRun=false;
document.getElementById("bt").value="开始";
}
}
function run(){
var i = Math.floor(Math.random() * a.length+ 1)-1;
document.getElementById("show").innerHTML=a[i];
if(isRun==false){
var b =true;
for(var j in a2){
if(a2[j]==i){
b=false;
}
}
if(b){
a2[a2.length]=i;
return;
}
}
setTimeout("run()",10);
}
</script>
</head>
<body>
<div style="text-align:center; margin-top:100px;width:100%;">
<div id="show" style="margin:auto;font-size:50px;width:100px;height:50px; background:#FFEEFF"></div>
<div style="margin-top:20px;">
<input id="bt" type="button" onclick="action()" value="开始"/>
</div>
</div>
</body>
</html>
相关推荐
-
JavaScript实现班级随机点名小应用需求的具体分析
需求如下: 1.在网页中显示,班级所有人员的名字. 2.点击开始按钮,人员的颜色开始变化,当停止的时候,会有一个颜色不同的位置,那么这个位置就是被点到的同学了. 大致的图形界面如下: 下面是对上面的需求分析的具体分析如下: 1.初始化这样一个页面,并设置统一颜色-green. a.同学的名字,用数组存储 b.在页面用div块显示 2.随机选择一个位置让其颜色变化成-red a.颜色的变化用css样式去控制 b.随机的位置用随机函数去生成 3.为了让其有动画的效果,设置间隔时间让其颜色变化的位置向
-
使用javascript做的一个随机点名程序
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"
-
JS实现课堂随机点名和顺序点名
1. 效果: 2. Html代码: <body> <form> <div align="center"> <input type="button" value="开始点名" onclick="students()" class="ks"/> <input type="button" value="停止点名" onc
-
js实现随机点名系统(实例讲解)
废话不多说,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>随机点名</title> <style type="text/css"> td{ text-align: center; } </style> </head> <body
-
javascript实现的一个随机点名功能
这个其实是对JS随机数的一个练习方式,先把所有人得名字预先写好在一个数组里,然后让数组里的值快速的显示在区域内,当你按停的时候滚动就会停止达到随机效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS写的随机点名 - 琼台博客</title> <script type="text/javascript">
-
python写一个随机点名软件的实例
最近有个随机点名软件的需求,故写了一个,上代码:github地址 # -*- coding: utf-8 -*- # @Time : 18-12-31 下午4:21 # @Author : Felix Wang from tkinter import * import tkinter.font as tkFont import random import gc import os, sys import chardet import copy from threading import Thre
-
python实战练习做一个随机点名的程序
用python做一个简单的随机点名程序(不重复点名) 这是我来到csdn的第一篇文章,内容如果有瑕疵的地方或者代码可以进一步改善,请大家对我指点一二.谢谢!废话不多说,上代码! import random #导入随机模块 import pyttsx3 #导入第三方语音模块 listen = pyttsx3.init() #初始化一个变量 txt_path = input('请输入txt文件的path:') #使用者输入名单文件的路径(名单文件为txt,一行只能有一个姓名,姓名必须在行首不能有空格
-
原生js实现随机点名功能
本文实例为大家分享了js实现随机点名的具体代码,供大家参考,具体内容如下 原生js实现随机点名,js部分有注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
-
js实现随机点名功能
本文实例为大家分享了js实现随机点名的具体代码,供大家参考,具体内容如下 效果: PS:在原来的效果中很快的,但是不知怎么的录下来就变得这么慢了 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
-
js实现随机点名小功能
本文实例为大家分享了js实现随机点名功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="name1"></div> <button id="btn"
-
JavaScript实现随机点名网页
JavaScript写一个随机点名网页,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } #box { border: 1px solid black;/*设置盒子的边框和颜色*/ width: 500
-
JS实现随机点名系统
用JS实现一个随机点名系统,供大家参考,具体内容如下 每次上课前10分钟,老师都会叫我们回答问题,奈何每次都是点学号,好像每次我都能中奖,我直接跟老师提议,老师,我用来JS来帮你写个随机点名的系统吧!这样就不会每次都抽到我了,哈哈 先看效果: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=
-
基于Python实现随机点名系统的示例代码
目录 效果展示 代码展示 导入模块 子线程调用 应用初始化信息 姓名信息布局 开始信息布局 数据信息布局 整体布局 运行 大家好,我是了不起! 在某些难以抉择得时候,我们经常要用外力来帮助我们做出选择 比如,梁山出征方腊前沙场点兵,挑选先锋的场景 这个时候,有一个随机点名系统就非常好啦,毕竟我水泊梁山的名号~ 效果展示 创建一个这样的文件夹,然后把要随机点名的名字写在里面 导入后,这里就显示你导入了多少人员信息 点击开始点名后,会随机从导入名字里挑选一位幸运儿~ 效果大概就是这样,下面我们来看看
随机推荐
- AngularJS入门教程之MVC架构实例分析
- 基于vue2.0+vuex+localStorage开发的本地记事本示例
- Linux内存描述符mm_struct实例详解
- 实例讲解设计模式中的命令模式在iOS App开发中的运用
- Oracle查询最近几天每小时归档日志产生数量的脚本写法
- ADO.NET 连接数据库字符串小结(Oracle、SqlServer、Access、ODBC)
- sql format()函数的用法及简单实例
- Mysql 服务 1067 错误 的解决方法:修改mysql可执行文件路径
- 解决PhpMyAdmin中导入2M以上大文件限制的方法分享
- Eclipse插件开发之新手入门
- RAID制作教程图文详解
- JavaScript数据结构和算法之图和图算法
- Ubuntu与windows双系统下共用MySQL数据库的方法
- 实例详解Java中如何对方法进行调用
- 学习iOS开关按钮UISwitch控件
- Python实现图片尺寸缩放脚本
- ubuntu上安装python的实例方法
- Android使用HBuilder的缓存方法
- Android页面中可编辑与不可编辑切换的实现
- Python 最大概率法进行汉语切分的方法
