<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#con{width: 300px; height: 150px; border:5px solid blue;}
</style>
</head>
<body>
<input type="button" value="获取随机彩票" id="btn"/>
<div id="con"></div>
<script type="text/javascript">
//将随机彩票和历史记录关联起来
window.onload = function(){
//定义变量
var oBtn = document.getElementById('btn');
var oCon = document.getElementById('con');
var json = {}; //保存 随机数的每一个数组
//绑定事件
oBtn.onclick = function(){
//随机生成json数据的key
var key = Math.random()*100;
//获取随机数
var numArr = getRandom(7,1,36);
//console.log(numArr);
//将获取到的随机数保存到 json
json[key] = numArr;
//console.log(json);
//将当前随机数保存到hash中
//hash中只能保存字符串或数字
window.location.hash = key;
//将随机数保存 到 con中
oCon.innerHTML = numArr;
}
//触发获取历史记录的事件
//hash值发生改变时才会触发
//使用hash值保存数据,可以用于 框架的url跳转 ,框架的路由
window.onhashchange = function(){
console.log(window.location.hash);//#35.68357723215734
//删除hash的#
var num = window.location.hash.substring(1);//json的key
//升级版? 需要判断是否存在该值,如果不存在,请给出提示
if(json[num] != undefined){
oCon.innerHTML = json[num];
}else{
oCon.innerHTML = '';
}
}
//获取多个随机数的函数 num=7,start= 1,end=36
//升级小函数,让他具备去重的功能
function getRandom(num,start,end){
//定义一个空数组
var numA = [];
for(var i=0;i<num;i++){
var num1 = Math.floor(Math.random()*(end-start)+start);
//将获取的随机数保存到 numA
//去重
if(numA.indexOf(num1) != -1){//重复的处理
i--;
}else{//不重复的处理
numA.push(num1);
}
}
return numA;
}
}
</script>
</body>
</html>
javascript模拟随机彩票,用hash来记录每一组值
最新推荐文章于 2022-05-02 11:20:55 发布