网页点名数字版

Html

Css

    * {
	margin:0;
	padding:0;
}
body {
	margin:0 auto;
	width:810px;
	height:620px;
}
#number {
	font-size:490px;
	text-align:center;
	width:600px;
	height:600px;
	float:left;
	line-height:600px;
	border:1px solid red;
}
#button {
	float:right;
	width:200px;
	height:600px;
	font-size:50px;
	color:white;
	cursor:pointer;
}
#button .button {
	width:200px;
	height:200px;
	line-height:200px;
	text-align:center;
}
#button #start {
	background-color:#AAA;
}
#button #reset {
	background-color:#CCC;
}
#button #ok {
	background-color:green;
}

var config = {
    "min": 1,
    "max": 50,
    "random_rate": 10,
    "random_time": 500,
}
var min = config.min;
var max = config.max;
var random_rate = config.random_rate;
var random_time = config.random_time;
var current_timer_id;

function shuffle(array) {
    var currentIndex = array.length,
        temporaryValue, randomIndex;

// 当还剩有元素未洗牌时
    while (0 !== currentIndex) {

// 选取剩下的元素
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

// 并与当前元素交换
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }

return array;
}

function number_change(change_array, element_id, random_time) {
    var timer_id;
    let index = 0;
    timer_id = setInterval(() => {
        let dom = document.getElementById(element_id);
        dom.textContent = change_array[index];
        index = (index + 1) % change_array.length;
    }, random_time);
    return timer_id;
}

var start = document.getElementById('start');
start.addEventListener('click', function() {
    var students = get_students(min, max, random_rate);
    var s = shuffle(students);
    if (!current_timer_id) {
        current_timer_id = number_change(s, 'number', random_time);
    }

});

var reset = document.getElementById('reset');
reset.addEventListener('click', function() {
    clearInterval(current_timer_id);
    let dom = document.getElementById('number');
    dom.textContent = 0;
    current_timer_id = 0;
});

var ok = document.getElementById('ok');
ok.addEventListener('click', function() {
    clearInterval(current_timer_id);
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

网页点名数字版



代码描述：js随机数,点名数字版

更新时间：2023-11-13 08:08:04
## 简易网页点名程序，数字版
- 配置参数：路径 ./config.js
var config = { "min":1, # 编号最小值 "max":50, # 编号最大值 "random_rate":10, # 倍率，提高随机性 "random_time":500, # 序号改变间隔，单位：毫秒 }
- @todo：使用 jquery

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

琴诗酒剑

相关代码

网页点名数字版

最新