網頁版雙色球號碼生成工具
阿新 • • 發佈：2019-02-08
注：需要自己新增和修改jquery.js的引用路徑。
<!doctype html> <html> <head> <meta charset="utf-8"> <style> .red_ball{ width:30px; height:30px; border-width:1px 0px 1px 1px; border-color:black; border-style:solid; float:left; line-height:30px; text-align:center; color:red; font-weight:bold; } .blue_ball{ width:30px; height:30px; border:1px solid black; float:left; line-height:30px; text-align:center; color:blue; font-weight:bold; } #secDiv{ padding-top:20px; width:100px; height:50px; clear:both; } #thirdDiv{ width:300px; height:100px; border:1px solid balck; } #mybut{ width:60px; height:27px; } </style> <script src="jquery.js"></script> <!--上面這行改為自己本地的jquery.js檔案路徑即可--> <script> //標記變數 var t,s=0; $(function(){ $("#mybut").click( function(){ if(s==0){ t=window.setInterval('changeNum()',30); $(this).html("好"); s=1; }else{ window.clearInterval(t); $(this).html("換一組"); s=0; initDivNum(); } } ); initDivNum(); //$("#thirdDiv").html(getAGroupNumber());//備用程式碼 //window.setInterval('changeNumSingle($("#d1"))',30); //window.setInterval('changeNumSingle($("#d2"))',30); //window.setInterval('changeNumSingle($("#d3"))',30); //window.setInterval('changeNumSingle($("#d4"))',30); //window.setInterval('changeNumSingle($("#d5"))',30); //window.setInterval('changeNumSingle($("#d6"))',30); //t=window.setInterval('changeNum()',30); }); //方法一：一個入口，迴圈更改各個元素 function changeNum(){ for(var i=1;i<=6;i++){ var num=parseInt($("#d"+i).html(),10); if(num>=33){ num=1; }else{ num++; } if(num<10){ $("#d"+i).html('0'+num); }else{ $("#d"+i).html(num); } } var blueNum=parseInt($("#d7").html(),10); if(blueNum>=16){ blueNum=1; }else{ blueNum++; } if(blueNum<10){ $("#d7").html('0'+blueNum); }else{ $("#d7").html(blueNum); } } //方法二：分別呼叫通用方法（備用） function changeNumSingle(obj){ var num=parseInt($(obj).html(),10); if(num>=33){ num=1; }else{ num++; } if(num<10){ $(obj).html('0'+num); }else{ $(obj).html(num); } } //獲得六個紅色球號 function getAGroupNumber(){ var arr=new Array(6); for(var i=0;i<arr.length;i++){ var done=false; do{ var num=Math.ceil(Math.random()*33); if(i>0){ var k=0; for(var j=0;j<i;j++){ if(arr[j]==num){ break; }else{ k++; } } if(k==i){ arr[i]=num; done=true; } }else{ arr[i]=num; done=true; } }while(!done); } arr.sort(function(a,b){ return a>b?1:-1; }); //return arr[0]+"-"+arr[1]+"-"+arr[2]+"-"+arr[3]+"-"+arr[4]+"-"+arr[5]; return arr; } //獲得一個藍色球號 function getBlueNumber(){ return Math.ceil(Math.random()*16); } //產生一個雙色球號碼 function initDivNum(){ var newArr=getAGroupNumber(); for(var i=0;i<6;i++){ if(newArr[i]<10){ $("#d"+(i+1)).html('0'+newArr[i]); }else{ $("#d"+(i+1)).html(newArr[i]); } } var blueNum=getBlueNumber(); if(blueNum<10){ $("#d7").html('0'+blueNum); }else{ $("#d7").html(blueNum); } } </script> </head> <body> <h1>雙色球號碼生成工具</h1> <div> <div id="d1" class="red_ball">01</div> <div id="d2" class="red_ball">02</div> <div id="d3" class="red_ball">03</div> <div id="d4" class="red_ball">04</div> <div id="d5" class="red_ball">05</div> <div id="d6" class="red_ball">06</div> <div id="d7" class="blue_ball">07</div> </div> <div id="secDiv"> <button id="mybut">換一組</button> </div> <div id="thirdDiv"></div> </body> </html>
完全的html+js前端實現。