javaScript之Math實戰應用-雙色球

時間 2019-12-01

標籤 javascript math 實戰應用色球欄目 JavaScript 简体版

原文原文鏈接

本次的分享呢是對上篇的Math數學對象的一個實戰應用，案例是一個雙色球的小demo，實現效果以下圖。css

在我看來，實現任何一個功能，都有其核心思想，在這個案例中，核心就是 隨機數，咱們要取7個隨機數，並且是限定在1到35之間，不只如此，還要保證紅色球的數字不能重複。有了這樣的認識咱們玖能夠開始了，在本次案例，將主要應用到的Math方法是

Math.random()，而對數字取整的方法是
Math.floor(), Math.ceil(),Math.round()，

這三個方法均可以使用，就看你對限定範圍取數的理解了，下面開始佈局：html

`web

<style>
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.jackpot,.ol{
			width: 700px;
			overflow: hidden;
			margin: auto;
		}
		.jackpot li{
			width: 70px;
			height: 70px;
			float: left;
			border: 2px solid red;
			font-size: 28px;
			text-align: center;
			line-height: 70px;
			color: red;
			margin: 10px;
			border-radius: 35px;
		}
		.jackpot .blue-orb{
			color: dodgerblue;
			border-color: dodgerblue;
		}

		#begin{
			clear: both;
			width: 100px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			margin: auto;
			background-color: blue;
			color: white;
			font-size: 18px;
			cursor: pointer;
			border-radius: 5px;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
		}
		#begin:hover{
			background-color: mediumblue;
			transition: all 0.8;
		}
	</style>
	<body>
	    <ul class="jackpot">
		<li class="red-orb">0</li>
		<li class="red-orb">0</li>
		<li class="red-orb">0</li>
		<li class="red-orb">0</li>
		<li class="red-orb">0</li>
		<li class="red-orb">0</li>
		<li class="blue-orb">0</li>
	</ul>
	<div id="begin">開始</div>
	<ol class="ol"> <--這次的ol是用來作提示頻繁點擊的-->
		
	</ol>
	</body>
複製代碼

`上面是咱們寫好的html結構，和樣式。下面是js代碼：json

`數組

window.onload=function(){
			var redOrb=document.getElementsByClassName("red-orb");
			var begin=document.getElementById("begin");
			var ol=document.querySelector(".ol");
			var time=null;
			
			for(var i=0; i<redOrb.length; i++){
					redOrb[i].innerText=Math.floor(Math.random()*35+1);
				}
			document.querySelector(".blue-orb").innerText=Math.floor(Math.random()*15+1);
			var bool=true;	
			
			begin.onclick=function(){
			
			if(bool){
				 bool=false;
				time=setInterval(function(){//定義一個定時器，默認不停的跳轉來改變裏面的值
				for(var i=0; i<redOrb.length; i++){
					redOrb[i].innerText=Math.floor(Math.random()*35+1);
				}
				document.querySelector(".blue-orb").innerText=Math.floor(Math.random()*15+1);
			},30);
			
			var arr=[];//存儲一個數組
			while(arr.length<6){
				var num=Math.floor(Math.random()*35+1);
				var bol=true;
				for(var j=0; j<arr.length; j++){//判斷是否有重複的值
					if(num==arr[j]){
						bol=false;
					}
				};
				if(bol){
					arr.push(num);
				}
			}
			setTimeout(function(){					
				clearInterval(time);//兩秒鐘之後把這個數組賦值進去
				for(var i=0; i<redOrb.length; i++){
					redOrb[i].innerText=arr[i]
				}
				bool=true;
			},2000)	
			}else{
				var li=document.createElement("li");
					li.innerText="請隔兩秒鐘後在點擊";
					ol.appendChild(li);
					li.style.cssText="color: #999; font-size: 12px;"
					var iHeight=li.offsetHeight;
					li.style.height=0+"px";
					li.style.opacity=0;
					startMove(li,{height:iHeight},function(){
						startMove(li,{opacity:100})
					})
					setTimeout(function(){
						startMove(li,{opacity:0},function(){
							ol.removeChild(li)
						})
					},2000)
			};
			return false		
		}
		}
function getStyle(obj, name) {  
	if(window.currentStyle){
		return obj.currentStyle[name];
	}
	else
	{
		return getComputedStyle(obj, false)[name];
	}
}
		
function startMove(obj, json, fnEnd){// js 動畫方法
clearInterval(obj.timer);
obj.timer=setInterval(function (){
	var bStop=true;		//假設：全部值都已經到了		
	for(var attr in json)
	{
		var cur=0;			
		if(attr=='opacity')
		{
			cur=Math.round(parseFloat(getStyle(obj, attr))*100);
		}
		else
		{
			cur=parseInt(getStyle(obj, attr));
		}			
		var speed=(json[attr]-cur)/6;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		
		if(cur!=json[attr])
			bStop=false;			
		if(attr=='opacity')
		{
			obj.style.filter='alpha(opacity:'+(cur+speed)+')';
			obj.style.opacity=(cur+speed)/100;
		}
		else
		{
			obj.style[attr]=cur+speed+'px';
		}
	}		
	if(bStop)
	{
		clearInterval(obj.timer);
					
		if(fnEnd)fnEnd();
	}
}, 30);
複製代碼

}; `代碼體稍微有點多，這裏寫了個js動畫的方法，想看實際效果的同窗，能夠把代碼拷貝到編輯器裏去，用瀏覽器打開，點一下就能夠看見效果了。這個案例，如我上面所說，任何功能都有其核心思想，這個案例的核心思想就是隨機數。瀏覽器