HTML 

  1. <p class="caipiao_p"><span class="caipiao35">*</span><span class="caipiao35">*</span><span class="caipiao35">*</span><span class="caipiao35">*</span><span class="caipiao35">*</span><span>+</span><span class="caipiao12">*</span><span class="caipiao12">*</span></p>
  2. <button type="button" onClick="creat_caipiao_nums('caipiao35',arr_front,arr_front_cache)">抽选一个前区</button>&nbsp;&nbsp;
  3. <button type="button" onClick="creat_caipiao_nums('caipiao12',arr_back,arr_back_cache)">抽选一个后区</button>&nbsp;&nbsp;
  4. <button type="button" onClick="clear_nums()">清空</button>


CSS 

  1. .caipiao_p span{
  2. 	padding-right:5px;
  3. }



JS 

  1. function generate_randomx(count,nums_length) {
  2.   //初始化数组
  3.   var generated = new Array();
  4.   //生成数组数
  5.   var generatedCount = generated.length;
  6.   //生成nums_length个随机数
  7.   for(var i = 0 ; i < nums_length; i++){
  8.     var candidate = Math.floor(Math.random() * count)+1;
  9.     //如果生成一样的数字则重新生成
  10.     for(var j = 0; j < generatedCount; j++) {
  11.       if(candidate == generated[j]){
  12.         candidate = Math.floor(Math.random() * count)+1;
  13.         j= -1;
  14.       }
  15.     }
  16.     generated[i] = candidate;  
  17.     generatedCount++;
  18.   }
  19.   return generated;  
  20. }
  21. function creat_nums(caipiao_span,arr){
  22. 	//写入数字
  23. 	var caipiao_span = document.getElementsByClassName(caipiao_span);
  24. 	//获取HTML
  25. 	for(var i = 0 ; i < arr.length; i++){
  26. 		var arr_nums = arr[i];
  27. 		if(arr_nums<10){
  28. 			arr_nums = '0'+String(arr[i]);
  29. 			//如果数字小于10，自动前面部0
  30. 		}else{
  31. 			arr_nums = String(arr[i])
  32. 		}
  33. 		caipiao_span[i].innerText = arr_nums;
  34. 	}
  35. }
  36. function sortNumber(a, b){
  37. 	//数组从小到大排列
  38. 	return a - b
  39. }
  40. var arr_front = generate_randomx(35,35);
  41. var arr_back = generate_randomx(12,12);
  42. var arr_front_cache = [];
  43. var arr_back_cache = [];
  44. //初始化数据
  45. function creat_caipiao_nums(caipiao_span,arr_type,arr_type_cache){
  46. 	//每次点击随机从上面的数组中抽选一个数添加到缓存数组中，并剔除掉选中的数组。
  47. 	var length_nums = arr_type.length;
  48. 	if(arr_type_cache.length<document.getElementsByClassName(caipiao_span).length){
  49. 		var t = Math.floor(Math.random() * length_nums);
  50. 		arr_type_cache.push(arr_type[t]);
  51. 		arr_type_cache.sort(sortNumber);
  52. 		arr_type.splice(t,1);
  53. 		creat_nums(caipiao_span,arr_type_cache);
  54. 		console.log(arr_type_cache);
  55. 		console.log(arr_type);
  56. 		console.log(t);
  57. 	}
  58. }
  59. function clear_html(caipiao_span){
  60. 	//清空HTML内容
  61. 	for(var i = 0 ; i < caipiao_span.length; i++){
  62. 		caipiao_span[i].innerText = '*';
  63. 	}
  64. }
  65. function clear_nums(){
  66. 	//重置HTML与数组
  67. 	arr_front = generate_randomx(35,35);
  68. 	arr_back = generate_randomx(12,12);
  69. 	arr_front_cache = [];
  70. 	arr_back_cache = [];
  71. 	clear_html(document.getElementsByClassName('caipiao35'));
  72. 	clear_html(document.getElementsByClassName('caipiao12'));
  73. 	console.log(arr_front);
  74. 	console.log(arr_back);
  75. 	console.log(arr_front_cache);
  76. 	console.log(arr_back_cache);
  77. }