前几天一个简单的原因促使我写了一个简单的点名器,过程中的一些想法希望可以和大家分享一下。
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#wrap{
width: 500px;
background-color: antiquewhite;
/*border-radius: 20px;*/
display: flex;
flex-wrap: wrap;
}
.num{
width: 100px;
height: 40px;
border: 1px #d3d3d3 solid;
box-sizing: border-box;
text-align: center;
line-height: 40px;
font-size: 20px;
color: cyan;
font-weight: bold;
}
.btn_wrap{
width: 500px;
display: flex;
justify-content: space-around;
}
.btn{
width: 80px;
height: 40px;
background-color: chartreuse;
border-radius: 10px;
cursor: pointer;
text-align: center;
line-height: 40px;
margin-top: 30px;
}
.btn_start:active{
border: 1px cornflowerblue solid;
}
.choose_num{
background-color: brown;
}
</style>
</head>
<body>
<div id="wrap">
</div>
<div class="btn_wrap">
<div class="btn btn_start">开始</div>
<div class="btn btn_end">结束</div>
</div>
</body>
<script>
let wrap = document.getElementById('wrap')
let num = 30 //点名人数
let r = null
let min_time = 200 //点名的时间间隔
let min_num = 1 //最小数
let max_num = 30 //最大数
//这里动态生成点名的主体html结构
for(let i =1;i<=num;i++){
let nodeNum = document.createElement('div')
nodeNum.classList.add('num',i)
nodeNum.innerText = i
wrap.appendChild(nodeNum)
}
//点名开始
let btn_start = document.getElementsByClassName('btn_start')[0]
btn_start.addEventListener('click',function (event) {
r = setInterval(()=>{
let choose_node = document.getElementsByClassName('choose_num')[0]
if(choose_node){
choose_node.classList.remove('choose_num')
}
let random = getRandom(max_num,min_num)
console.log(random)
let aa = document.getElementsByClassName(random)[0]
aa.classList.add('choose_num')
},min_time)
})
//点名结束
let btn_end = document.getElementsByClassName('btn_end')[0]
btn_end.onclick=function (event) {
clearInterval(r)
}
function getRandom(Max,Min) {
let Range = Max - Min;
let Rand = Math.random();
let random = Min + Math.round(Rand * Range); //四舍五入
return random
}
</script>
</html>
复制代码
很多都在注释里写了,这里就不在赘述了,下面是过程中的一些随想是收获。
随机数
在点名器中最重要的就是一个Math.random()函数了,但是在写的过程中我在想这是惟一的获取随机数的方法吗?这样获取的随机数是真的安全的随机数吗?疑问无疑是进步的开始,在随后的查找中果然找到了一种新的随机数的生成方式:window.crypto.getRandomValues(),下面总结了一下两种随机数的使用。
1.Math.random()
//下舍入
function floor(min,max) {
let range = Math.random()*(max-min)
let value = Math.floor(range)+min
return value
}
//上舍入
function ceil(min,max) {
let range = Math.random()*(max-min)
let value = Math.ceil(range)+min
return value
}
//四舍五入
function round(min,max) {
let range = Math.random()*(max-min)
let value = Math.floor(range)+min
return value
}
//三种方式的集合,参数fn='round' || 'ceil' || 'floor'
function random(max,min=0,fn='round') {
let range = Math.random()*(max-min)
let value = Math[fn](range)+min
return value
}
复制代码
2.window.crypto.getRandomValues()
window.crypto.getRandomValues(typeArray) 方法让你可以获取符合密码学要求的安全的随机值。传入参数的数组被随机值填充(在加密意义上的随机)。
typeArray是类型化数组,相当于是内存的视图,使用Int8Array、Uint8Array、 Int16Array、 Uint16Array、 Int32Array 或者Uint32Array 构造函数创建。
getRandomValues()在生成多个随机数数组时该方法尤为方便。
eg:生成一个8位的随机数数组:
window.crypto.getRandomValues(new Uint16Array(new ArrayBuffer(8)))或者window.crypto.getRandomValues(new Uint16Array(8))
复制代码
当然要生成一个区间的随机数也是可以的:
function getRandom(Max,Min) {
do{
var random = window.crypto.getRandomValues(new Uint8Array(1))[0]
}while (random>Max || random<=Min)
return random
}
复制代码
更多关于typeArray和ArrayBuffer可以查看MDN介绍。
结语
相信读完这篇文章以后,未来如果在实际应用中使用随机数你肯定会有新的选择。当然错误同样进步的开始,所以有什么不足以及交流的地方希望大家评论留言。第一次写文章,后续可能会更多地记录一下工作和学习的问题以及收获,喜欢的朋友可以关注我哦。O(∩_∩)O