java随机点名器_基于JavaScript实现随机点名器
本文实例为大家分享了JavaScript实现随机点名器的具体代码,供大家参考,具体内容如下
HTML代码:
点名啦
CSS代码:
* {
margin: 0px;
padding: 0px;
}
body {
background-color: rgb(255, 249, 249);
}
h1 {
text-align: center;
padding-top: 100px;
color: rgba(250, 54, 129, 0.562);
}
#did {
position: relative;
width: 200px;
margin: 60px auto;
}
#did input:first-child {
width: 200px;
height: 60px;
background-color: rgba(250, 54, 129, 0.562);
/* 不要边框或设边框为透明 */
border: none;
border-radius: 20px;
font-size: 25px;
color: #fff;
box-shadow: 0px 0px 3px 3px rgba(250, 54, 129, 0.158);
/* 点击时边框消失 */
outline: 0;
}
#did input:nth-last-child(1) {
width: 100px;
height: 40px;
margin: 40px 50px;
background-color: rgba(250, 54, 129, 0.562);
border: 1px solid transparent;
background-color: rgba(255, 68, 177, 0.432);
border-radius: 15px;
box-shadow: 0px 0px 2px 2px rgba(250, 54, 129, 0.158);
font-size: 17px;
color: #333;
outline: 0;
transition: color 0.2s ease-out;
transition: box-shadow 0.2s ease-out;
}
#did input:nth-last-child(1):hover {
color: #fff;
cursor: pointer;
box-shadow: 0px 0px 4px 4px rgba(250, 54, 129, 0.158);
}
JavaScript代码:
var rollcall = document.getElementById("rollcall-id");
var action = document.getElementById("action-id");
var h1 = document.getElementsByTagName("h1");
//不能用name,用name只会取得一个字符
var allName = ["张柳菲", "高颖影", "赵温言", "李颖", "邓辰希", "莫若邻", "秦橙",
"吴筱宇", "赵希", "马素滢", "吕沁雅", "罗鸿哲", "夏素芸", "谢焱之",
"曹梦朦", "李允书", "周枫桥", "孙浩", "江雁菁", "杨振凯", "林舒言",
"钱妙妙", "郭景", "杜贝贝", "童闵然", "钟小凌", "韩云韵", "白然之"];
//随机产生一个名字
function stringRandom() {
return parseInt(Math.random() * allName.length);
}
var time = null;
var luckName;
//开始
function doStart() {
if (time == null) {
time = setInterval(function () {
//获取随机点名的值
luckName = allName[stringRandom()];
rollcall.setAttribute("value", luckName);
}, 100);
}
}
//停止
function doStop() {
if (time != null) {
clearInterval(time);
time = null;
}
}
//点击事件
function doClick() {
if (action.value == "开始") {
//改变样式
action.style.backgroundColor = "#cecece";
action.style.boxShadow = "0px 0px 2px 2px rgba(100, 100, 100, 0.4)";
action.value = "停止";
h1[0].innerHTML = "点名啦";
//开始随机点名
doStart();
} else if (action.value == "停止") {
action.style.backgroundColor = "rgba(255, 68, 177, 0.432)";
action.style.boxShadow = "0px 0px 2px 2px rgba(250, 54, 129, 0.158)";
action.value = "开始";
h1[0].innerHTML = "恭喜" + luckName + "同学获得一次发言机会";
//停止
doStop();
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
java随机点名器_基于JavaScript实现随机点名器相关推荐
- 基于java的随机森林算法_基于Spark实现随机森林代码
本文实例为大家分享了基于Spark实现随机森林的具体代码,供大家参考,具体内容如下 public class RandomForestClassficationTest extends TestCas ...
- android随机抽奖代码_基于JavaScript实现抽奖系统
用JavaScript实现一个简单的抽奖系统,有[开始]按钮和[停止]按钮. 功能: - 点开始按钮开始抽奖,随机出现奖品名称: - 点停止按钮即可停止抽奖: - 按下回车键可切换开始抽奖和停止抽奖. ...
- java闪光的星星_基于JavaScript实现飘落星星特效
本文实例为大家分享了js飘落星星特效的具体代码,供大家参考,具体内容如下 1.效果图 2.代码 Title img{ position: absolute; } body { background-i ...
- java项目----教务管理系统_基于Java的教务管理系统
java项目----教务管理系统_基于Java的教务管理系统 2022-04-22 18:18·java基础 最近为客户开发了一套学校用教务管理系统,主要实现学生.课程.老师.选课等相关的信息化管理功 ...
- 曼哈顿距离java实现_基于javascript实现获取最短路径算法代码实例
这篇文章主要介绍了基于javascript实现获取最短路径算法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 //A算法 自动寻路 ...
- html页面文字随机效果,教你用javascript实现随机标签云效果_附代码
标签云是一套相关的标签以及与此相应的权重.典型的标签云有30至150个标签.权重影响使用的字体大小或其他视觉效果.同时,直方图或饼图表是最常用的代表约12种不同的权数.因此,标签云彩能代表更多的权,尽 ...
- js微信抢红包脚本代码_基于JavaScript实现微信抢红包功能
金额随机:额度在0.01和(剩余平均值*2)之间. 0){ let num = scramble(remainAmount,remainPeople); remainAmount = remainAm ...
- javascript官方文档_基于Javascript编写的开源Markdown和HTML相互转换器——showdown
介绍 showdown是一个基于Javascript编写的开源Markdown和HTML相互转换器,showdown可以用在客户端(浏览器)或者服务端(nodejs).shodown还支持原始规范中未 ...
- jquery打99乘法表_基于javascript实现九九乘法表
基于javascript实现九九乘法表 本文实例为大家分享了javascript实现九九乘法表的相关代码,具体内容如下 var sum=0; var wite; for (var i = 1; i & ...
- html在线随机抽取,利用纯html+javascript实现随机抽取显示
求助:利用纯html+javascript实现随机抽取显示 1 一个智力问答页面,每次显示一个判断题,最多可以连续答10题.题目从固定的10个问题中随机抽出一个且不能重复. 2 问题只有两种答案,对或 ...
最新文章
- MATLAB中plot()画图的颜色线型和希腊字母参数设置
- shiro教程(1)-基于url权限管理
- 【Java数据库】使用JDBC操作MySQL数据库、Batch批处理 、事务的概念
- 最全!最完整的设计词法分析程序的代码!!!
- Reporting Area and Available Characteristics
- 如何区分网线是几类的_小移课堂 | 网线这样选,网速才能嗖嗖的!
- C语言基础教程读书笔记2(第二章常量、变量、类型转换)
- 大数据之-Hadoop3.x_MapReduce_WordCount编写_Reducer---大数据之hadoop3.x工作笔记0090
- wordpress 表格文字对齐_掌握Word对齐技巧,排版又快又美观
- ev3编程 越野机器人_乐高机器人EV3,让机器人动起来
- OSS文件存储方案-阿里云
- 如何使用KEIL5快速建立FreeRTOS项目(附建立成功的源代码以及问题解析)
- 第九届CDA数据分析师认证考试报考指南
- 柳传志:古稀人生最后一个大弯
- Vue实现顶部导航栏设计
- JqGrid实现水平滚动条
- 武汉东西湖区小进规市场主体奖励申报条件、材料及流程梳理
- PyCharm - Optimizing Imports (优化导入)
- 结合实际问题的 Bitcode 适配指南 (一)
- Leetcode.789.逃脱阻碍者---贪心+数学