java随机点名器_基于JavaScript实现随机点名器

灰太狼 2022-11-07 15:56 290阅读 0赞

本文实例为大家分享了JavaScript实现随机点名器的具体代码，供大家参考，具体内容如下

![f46872aa473bc95877c4e3ec6875cd15.gif][]

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();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

[f46872aa473bc95877c4e3ec6875cd15.gif]: /images/20221023/ffd5a6571d384540a1b8e541f8653051.png

java随机点名器_基于JavaScript实现随机点名器

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Java实现随机点名器

相关 JavaScript实现随机点名器

相关 js随机点名器（简单）

相关 js随机点名器（简单）

相关随机点名器的实现

相关 js 随机点名器

相关 java随机点名器_基于JavaScript实现随机点名器

相关 JAVA基础随机点名器案例

相关 Java随机点名器案例

相关练习：随机点名器案例