JavaScriptに基づいてランダム点呼器を実現します。
本論文の実例は、JavaScriptがランダム出席器を実現する具体的なコードを共有しています。参考にしてください。具体的な内容は以下の通りです。
HTMLコード:
HTMLコード:
<body>
<h1> </h1>
<div id="did">
<input id="rollcall-id" type="button" value=" "><br>
<input id="action-id" type="submit" onclick="doClick()" value=" ">
</div>
</body>
<style>
* {
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);
}
</style>
<script>
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();
}
}
</script>