JavaScript花式点名
简单的HTML+CSS+JavaScript小练手
运行展示
一、初始界面
二、随机排号
可以连续的单击，多次按人头随机排号，下图中点了三次
三、顺序排号
顺序排号，一次就好，点多少次排号结果都是一样的
四、水平点名
单击水平点名，其它的点名按钮被禁用，沿着水平方向，一行一行地向下跑，跑到终点后回头重新跑，再次单击水平点名就停下，下图中跑了两轮，停在65
五、垂直点名
单击垂直点名，其它的点名按钮被禁用，沿着垂直方向，一列一列地从左向右跑，跑到终点后回头重新跑，再次单击垂直点名就停下，下图中跑了两轮，停在2
六、水平S型点名
单击水平S型点名，其它的点名按钮被禁用，沿着水平S型方向，一行一行地由上向下跑，跑到终点后回头重新跑，再次单击水平S型点名就停下，下图中跑了两轮，停在6
七、竖直S型点名
单击竖直S型点名，其它的点名按钮被禁用，沿着竖直S型方向，一列一列地从左向右跑，跑到终点后回头重新跑，再次单击水平S型点名就停下，下图中跑了两轮，停在32
八、一边点名一边随机排号
点名按钮可任选，随机排号可以在点名过程一直单击
下图按80个人先顺序排号，其次水平点名，再多次随机排号，最后结束水平点名
运行代码
一、html和css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>newborn</title>
<link rel="stylesheet" href="./css/newborn.css">
</head>
<body>
<div id="outcome"></div>
<div id="container">
<div id="controlBar">
<input type="number" id="numberInput" min="10" max="100" placeholder="pepole's number" autofocus>
<button id="randomNumberingButton" onmousedown="randomNumbering()">随机排号</button>
<button id="orderlyNumberingButton" onmousedown="orderlyNumbering()">顺序排号</button>
<button id="horizontalCallingButton" onmousedown="horizontalCalling()">水平点名</button>
<button id="verticalCallingButton" onmousedown="verticalCalling()">垂直点名</button>
<button id="bendCallingButton1" onmousedown="bendCalling1()">水平S型点名</button>
<button id="bendCallingButton2" onmousedown="bendCalling2()">竖直S型点名</button>
</div>
<div id="veil">
</div>
</div>
<script src="./js/newborn.js"></script>
</body>
</html>
body
{
background-image: url("../image/1.jpg");
background-size: cover;
}
#outcome
{
width: 1000px;
height:90px;
/*border: dotted 1px mediumpurple;*/
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 30px;
color: ghostwhite;
line-height: 90px;
visibility: hidden;
}
#container
{
width: 1000px;
height: 600px;
/*border: dotted 1px mediumpurple;*/
margin-left: auto;
margin-right: auto;
/*margin-top: 5%;*/
}
#controlBar
{
width: 280px;
height: 600px;
border: orange 1px solid;
float:left;
text-align: center;
}
#numberInput
{
display: inline-block;
width: 200px;
height: 36px;
border-radius: 18px;
/*border: 3px white solid;*/
border: none;
outline: none;
margin-top: 30px;
/*opacity: 0.3;*/
background: orange;
font-size: 18px;
}
#numberInput:hover
{
background:#E4C6A5;
width: 206px;
height: 42px;
}
button:hover
{
background:#E4C6A5;
width: 206px;
height: 42px;
}
button{
display: inline-block;
width: 200px;
height: 36px;
border-radius: 18px;
border: none;
outline: none;
margin-top: 30px;
background-color: orange;
font-size: 18px;
}
#veil
{
width: 700px;
height: 600px;
border: red 1px dotted;
border-radius: 3%;
float:right;
}
.row
{
width: 100%;
height: 60px;
/*边界线同样占据空间*/
/*border: blue 1px solid;*/
text-align: center;
}
.column
{
width:50px;
height: 50px;
border: silver 1px solid;
display: inline-block;
border-radius: 20%;
margin-left: 10px;
line-height: 50px;
font-size: 25px;
color: yellow;
}
二、JavaScript
function createRow() //创建行div并设置class属性值
{
var row;
var veil = window.document.getElementById("veil");
for (var i = 0; i < 10; i++) {
row = window.document.createElement("div");
row.setAttribute("class", "row");
veil.appendChild(row);
}
}
function createColumn() //在行的基础上，创建列div并设置class和id属性值
{
var rowArray = window.document.getElementsByClassName("row");
var length = rowArray.length;
var column;
var textNode;
var number = 0;
for (var rowIndex = 0; rowIndex < length; rowIndex++) {
for (var k = 0; k < 10; k++) {
column = window.document.createElement("div");
column.setAttribute("class", "column");
column.setAttribute("id", number + "");
// column.style.visibility="hidden";
textNode = window.document.createTextNode(number + "")
column.appendChild(textNode);
rowArray[rowIndex].appendChild(column);
number++;
}
}
}
function setVisibility(array, value, begin, length)
{
for (; begin < length; begin++) {
array[begin].style.visibility = value;
}
}
function getDataInput() //从输入框里获取用户输入的人数
{
var numberInput = window.document.getElementById("numberInput");
var maxNumber = numberInput.value;
if (maxNumber === null || maxNumber.trim()=="") {
alert("请正确输入");
return null;
}
if (maxNumber < 10 || maxNumber > 100) {
alert("人数不得少于10或者大于100");
return null;
}
return maxNumber;
}
function numbering(numberArray) //根据已存入编号的数组，将数组每个元素的值(即编号)显现在div小方格上
{
var column;
var number;
for (var i = 0; i < numberArray.length; i++) {
column = window.document.getElementById(i.toString());
number = numberArray[i];//div小方格上所需的编号都存储在numberArray中
column.innerText = number.toString();//div小方格上显现的编号
column.style.visibility = "visible";//显现div小方格
}
}
var length = 100;
//length为函数randomNumbering、orderlyNumbering所共用的全局变量
//存储人数，也是存储div小方格的数量，最大为100
var columnArray = window.document.getElementsByClassName("column");
//所有的div小方格对象数组，所有div小方格的class属性均为column
//所有的div小方格均有唯一的id属性值，id从零开始编号
function randomNumbering() //随机编号函数
{
var maxNumber = getDataInput();
if(maxNumber==null)
{
return;
}
setVisibility(columnArray, "hidden", 0, length);//隐藏所有div小方格
length = maxNumber;//用户输入的人数，也就是"编号数组"的长度
abolishOutcome();//清除上次点名的结果
var numberArray = [];
for (var i = 0; i < length; i++)//把生成的随机数存入"编号数组"
{
numberArray[i] = Math.round((Math.random() * 1000) % maxNumber)+1;
}
numbering(numberArray);
}
function orderlyNumbering()//顺序编号函数
{
var maxNumber = getDataInput();
if(maxNumber==null)
{
return;
}
setVisibility(columnArray, "hidden", 0, length);//隐藏所有div小方格
length = getDataInput();
abolishOutcome();
var numberArray = [];
for (var i = 0; i < length; i++) {
numberArray[i] = i + 1;
}
numbering(numberArray);
}
function setBackgroundColor(id, color) {
var element = window.document.getElementById(id);
element.style.backgroundColor = color;
}
var counter = 0;//全局变量counter为数组下标，数组内存储div小方格的id属性值
//在函数vitalize运行之后，counter只会在函数内部取到零，外部取不到零
function vitalize(array)//整体代码运行的核心思想，
{
// 把一群div小方格的id属性值存入数组，
// 不管是在div小方格们上水平走，竖直走，水平S型走，竖直S型走
//在数组上都是直着走，div小方格们上的走法全是直着存入数组中
if (counter === array.length) {
setBackgroundColor(array[counter - 1], "");
counter = 0;
}
setBackgroundColor(array[counter], "#E4C6A5");//某一个div小方格有背景色
for (var i = 0; i < counter; i++)//那它前面的小方格们就没有背景色
{
setBackgroundColor(array[i], "");
}
counter++;
}
function abolishOutcome() //褪去上一次点名选中div小方格的背景色及结果信息展示
{
var outcome = window.document.getElementById("outcome");
if (outcome.style.visibility == "visible")//显现点名结果div,id为outcome,若可见
{
outcome.style.visibility = "hidden";//则让其不可见
if (counter > 0)//同时，若"编号数组"下标counter大于0,则说明已经进行过一次点名了
{
setBackgroundColor(identifierArray[counter - 1], "");//让选中的div小方格褪去背景色
}
}
}
function manifestOutcome()
{
var column = window.document.getElementById(identifierArray[counter - 1] + "");
var outcome = window.document.getElementById("outcome");
outcome.style.visibility = "visible";
outcome.innerText = "Congratulation!" + column.innerText;//将选中div小方格的信息显现出来
}
function enableCallingButton(id) //启用某一个点名按钮
{
var button = window.document.getElementById(id);
button.removeAttribute("disabled");
button.style.backgroundColor = "orange";
}
function enableCallingButtons(idArray)//同时启用一连串点名按钮
{
var button;
for (var i = 0; i < idArray.length; i++) {
button = window.document.getElementById(idArray[i]);
button.removeAttribute("disabled");
button.style.backgroundColor = "orange";
}
}
function disableCallingButtons(idArray) 同时禁用一连串点名按钮
{
var button;
for (var i = 0; i < idArray.length; i++) {
button = window.document.getElementById(idArray[i]);
button.setAttribute("disabled", "disabled");
button.style.backgroundColor = "#27231F";
}
}
function validateData(maxNumber)
{
if (maxNumber == null)
return false;
if(maxNumber>length || maxNumber<length)//length为上次的人数，也是上次div小方格的数量
{
alert("请先排号");
return false;
}
return true;
}
var identifierArray;
var timeout = 50;
var horizontalInterval = null;
var verticalInterval = null;
var bendCalling1Interval = null;
var bendCalling2Interval = null;
var buttonIdArray = ["horizontalCallingButton", "verticalCallingButton", "bendCallingButton1", "bendCallingButton2"];
function horizontalCalling() {
var maxNumber = getDataInput();
if(validateData(maxNumber)==false)
return;
if (horizontalInterval == null)
{
disableCallingButtons(buttonIdArray);//禁用所有点名按钮
enableCallingButton("horizontalCallingButton");//启用当前已单击过的点名按钮
abolishOutcome();//清除上次点名留下的数据
counter = 0;//"编号数组"下标归零，重头开始点名
// -------------------------------------------水平点名行走坐标id
var array = [];
for (var i = 0; i < maxNumber; i++) {
array[i] = i;
}
identifierArray = array;
// -------------------------------------------水平点名行走坐标id
horizontalInterval = window.setInterval(function () {
vitalize(array)
}, timeout);
} else {
window.clearInterval(horizontalInterval);
horizontalInterval = null;
manifestOutcome();
enableCallingButtons(buttonIdArray);
}
}
function verticalCalling() {
var maxNumber = getDataInput();
if(validateData(maxNumber)==false)
return;
if (verticalInterval == null) {
disableCallingButtons(buttonIdArray);
enableCallingButton("verticalCallingButton");
abolishOutcome();
counter = 0;//数组下标归零，重头开始点名
// -------------------------------------------垂直点名行走坐标id
var row = Math.ceil(maxNumber / 10);
var index = 0
var array = [];
var id = 0;//id为行走下标，存储div的id属性值,从零开始计算，最大值为maxNumber-1
for (var column = 0; column < 10; column++) {
for (var i = 0; i < row; i++) {
id = column + i * 10;
array[index++] = id;
if (id == maxNumber - 1)
row = row - 1;
}
}
identifierArray = array;
// -------------------------------------------垂直点名行走坐标id
verticalInterval = window.setInterval(function () {
vitalize(array)
}, timeout);
} else {
window.clearInterval(verticalInterval);
verticalInterval = null;
manifestOutcome();
enableCallingButtons(buttonIdArray);
}
}
function bendCalling1() {
var maxNumber = getDataInput();
if(validateData(maxNumber)==false)
return;
if (bendCalling1Interval == null) {
disableCallingButtons(buttonIdArray);
enableCallingButton("bendCallingButton1");
abolishOutcome();
counter = 0;//数组下标归零，重头开始点名
// -------------------------------------------水平S型点名行走坐标id
var array = [];
var symbol = 0;
var row = Math.ceil(maxNumber / 10);
console.log("maxNumber" + maxNumber);
var id = 0;///id为"行走下标"，存储div小方格的id属性值,从零开始计算，最大值为maxNumber-1
for (var i = 0; i < row; i++)//行下标 从零开始计算
{
if (i % 2 == 0) {
id = i * 10;
symbol = 1;
} else {
id = i * 10 + 9;
symbol = -1;
}
for (var j = 0; j < 10; j++) //列下标 从零开始计算
{
if (id >= maxNumber)//最后一个奇数行，行走初始id
{
id = maxNumber - 1;
}
array[i * 10 + j] = id
if ((symbol == 1 && id == maxNumber - 1) || (symbol == -1 && id == (row - 1) * 10))//"偶数行"和"奇数行"行走坐标结束标志
{
break;
}
id = id + symbol;
}
}
identifierArray = array;
// -------------------------------------------水平S型点名行走坐标id
bendCalling1Interval = window.setInterval(function () {
vitalize(array)
}, timeout);
} else {
window.clearInterval(bendCalling1Interval);
bendCalling1Interval = null;
manifestOutcome();
enableCallingButtons(buttonIdArray);
}
}
function bendCalling2() {
var maxNumber = getDataInput();
if(validateData(maxNumber)==false)
return;
if (bendCalling2Interval == null) {
disableCallingButtons(buttonIdArray);
enableCallingButton("bendCallingButton2");
abolishOutcome();
counter = 0;//数组下标归零，重头开始点名
// -------------------------------------------竖直S型点名行走坐标id
var array = [];
var symbol = 1;//行下标进行加/减运算标志，1是加，-1是减
var row = Math.ceil(maxNumber / 10);//总行数
var begin;//行起始下标
var index = 0;//数组下标
for (var column = 0; column < 10; column++) //列下标
{
if (column % 2 == 0) {
begin = 0;
symbol = 1;
} else {
begin = row - 1;//下标从零开始，所以最后一行的下标等于总行数减一
symbol = -1;
}
for (var i = begin; i >= 0 && i < row; i = i + symbol) //行下标
{
if (i * 10 + column == maxNumber)//竖直S型行走到最大编号处，行数减一
{
row = row - 1;
continue;
}
array[index] = i * 10 + column;
index++;
}
}
identifierArray = array;
// -------------------------------------------竖直S型点名行走坐标id
bendCalling2Interval = window.setInterval(function () {
vitalize(array)
}, timeout);
} else {
window.clearInterval(bendCalling2Interval);
bendCalling2Interval = null;
manifestOutcome();
enableCallingButtons(buttonIdArray);
}
}
createRow();
createColumn();
想说的话
写代码很容易，写出让自己满意的代码则需要耗费巨大的心血和苦苦的思索，而写出让别人满意的代码需要学科学的套路并学以致用。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
