《小白H5成長之路11》通過jQuery更改元素的c

《小白H5成長之路11》通過jQuery更改元素的css樣式

方的風太大，吹得窗戶咚咚作響，小白自從上午用了jQuery事件后，一直沉浸在鼠標控制容器內容的練習里面，周圍無論多大的噪音也干擾不了他。中午太陽很好，低頭族們又來到小白旁邊向陽的窗口扎堆曬太陽。其中一人無意間看到了小白真正擺弄的頁面，感到很好奇，說道：“哇！小白，這是你做的么？”

小白得意的說道：“必須的！”

“小白你真了不起，幾天不見居然都會高科技了！”，“哇！小白，真佩服你，你居然會寫程序！”。。。。。。

正當小白沉浸在贊美聲中無法自拔的時候，小白的身旁響起了老朱的聲音：“小白！醒醒！今天哥再告你個好玩的知識！”

“好玩的知識？”，小白眼里放出了驚喜的目光。

“對，通過jQuery可以改變元素的css樣式，這個好玩吧！你用jQuery實現鼠標移入移出的功能了吧？讓我看看”

“矮油！不錯哦～！現在咱把鼠標以上以后的處理改一下，不要更改它的html內容了，變成更改CSS樣式。更改CSS樣式通過css(樣式屬性名,樣式屬性值進行更改，比如更改main里面文本的顏色，我們可以這樣寫：$("#main").css("color","#F00");”

“現在執行我們看一下效果吧”

“這個效果太棒了，可是鼠標移出以后怎么恢復呢？”

“你在移出的代碼里面增加一個更改文本顏色就可以了！試試看！”

“成功了，是不是所有的樣式都可以更改？”

“那當然，不過有個知識點你得了解一下，在css里面很多樣式屬性的默認值是none，比如容器main的border屬性設置為none的效果跟沒給容器設置border的效果是一樣的。具體哪些css樣式的屬性默認值是none，你可以在一個空網頁中寫一個div標簽，不要給它設置任何css樣式，然后通過console.log($('div').css('屬性名'))在控制臺看看它的默認值。這個工作你有時間了自己測試一下，我就不多說了，現在你做這樣一個功能，鼠標移到main容器上時改變容器的高度、背景色、行高、文字大小，移出后恢復原來的狀態?！?/p>

“好的，我試試！”

二十分鐘后小白找到老朱，“做好了！”

“很好，小白。不過這個方法雖好，可有時需要改變的樣式太多，以至于我們會寫很多行代碼。還有一個方法可以通過添加、刪除class或者直接更改容器的class屬性值進行設置。添加class使用addClass("類名")，刪除class使用removeClass("類名")。我們可以這樣來做！”

“你也可以直接更改div標簽上的class屬性值，更改屬性我近期會跟你說怎么做，你現在會這兩種更改樣式的方法就可以了。添加和刪除class會精簡js代碼的行數，直接更改css樣式的屬性值呢又很方便，在真正使用的時候你要學會靈活運用。好了你可以自己練習了～～”

想學H5的朋友可以關注老爐，您的關注是我持續更新《小白H5成長之路》的動力！

獎和開盲盒性質一樣的都是通過ajax讀取后臺的隨機數據。

圖1 轉輪盤抽獎

圖2 轉輪盤抽獎結果

1、轉輪盤

本來是想直接繪圖實現輪盤，但是沒有找到怎么填充文字，只好把輪盤弄成了背景圖，通常用于游戲抽道具，商城積分抽獎，公司年末員工抽獎

點擊抽獎觸發jquery的click事件；
通過ajax獲取后臺的隨機數；
后臺通過mt_rand得到隨機獎項（角度），返回給前臺；
通過jquery改變css transform、transition屬性，旋轉背景，也就是輪盤；

html代碼

<style>
.box{
    width:500px;height:500px;border:0px solid #DDD;margin:100px;position:relative;
}
.beij{
    background:url(cjbg.jpg) no-repeat center center;width:100%;height:100%;
}
.pointer{
    cursor:pointer;position:absolute;top:50%;left:50%;margin-left:-40px;margin-top:-48px;background:url(c1.png) no-repeat center center;width:80px;height:96px;z-index:21;
}
</style>

<div  class='box' >
    <div  class='beij'></div>
    <div  class='pointer'></div>
</div>

js代碼

<script>
$(document).ready(function() {
	var time=0.4;//轉一圈所需時間 s
	var count=10;//默認多轉幾圈
	/*
	var angle=new Array();
	angle[0]=23;
	angle[1]=53;
	angle[2]=83;
	angle[3]=110;
	angle[4]=133;
	angle[5]=163;
	angle[6]=223;
	*/
	var i=1;
    $(".pointer").click(function(){ 
		$.ajax({
			url: "/public/man/index.php/api/choujiang",
			data:'',
			type: "post",
			dataType: "json",
			success: function(result) {
				//console.log(result.msg);
				$('.beij').css({'transform':"rotate("+(i*count*360+result.angle)+"deg)","transition":" All "+(time*(5+result.angle/360))+"s ease-in-out"});
				//彈窗提示
        //setTimeout("alert('"+result.msg+"');",time*1000*(5+result.angle/360));
        setTimeout("console.log('"+result.msg+"');",time*1000*(5+result.angle/360));
			}
		})
		i++;
	});
});
</script>

說明：

因為改變css進行旋轉，開始的時候，直接執行了彈窗或者是console.log，這并不符合我們的要求，加入了setTimeout，在旋轉完成以后，再給出提示；
time*1000*(5+result.angle/360) 是總得旋轉時間；

后臺接口程序

    public function choujiang(){
		/*
		    id   獎品編號
			title  中獎提示
			prec  中獎概率
			angle  旋轉角度
		*/
		$arr[0]=array('id'=>1,'title'=>'恭喜抽中一等獎：蘋果手機一部！','prec'=>1,'angle'=>23);
		$arr[1]=array('id'=>2,'title'=>'恭喜抽中二等獎：Ipad','prec'=>2,'angle'=>68);
		$arr[2]=array('id'=>3,'title'=>'恭喜抽中三等獎：','prec'=>25,'angle'=>113);
		$arr[3]=array('id'=>4,'title'=>'恭喜抽中四等獎','prec'=>50,'angle'=>155);
		$arr[4]=array('id'=>5,'title'=>'恭喜抽中五等獎','prec'=>80,'angle'=>202);
		$arr[5]=array('id'=>6,'title'=>'恭喜抽中六等獎','prec'=>150,'angle'=>245);
		$arr[6]=array('id'=>7,'title'=>'恭喜抽中七等獎','prec'=>240,'angle'=>290);
		$arr[7]=array('id'=>8,'title'=>'獲得50元優惠券，還需加油哦！','prec'=>380,'angle'=>337);

        //中獎幾率求和
		$cmun=0;
		for($i=0;$i<=count($arr)-1;$i++){
			$cmun+=$arr[$i]['prec'];
		}
        //中獎隨機數
        $smrand=mt_rand(1,$cmun);
        $this->getRand(1,0,$arr,count($arr),$smrand);			
	}

    public function getrand($m,$im,$arr,$count,$smrand){
		/*
		    $m  起始數
			$im  第幾個數組元素
			$count  數組總得元素個數
			$arr  原始數組
			$smrand  中獎隨機數
		*/

        //已經中獎
		if($smrand>=$m&&$smrand<=$arr[$im]['prec']+$m-1){
				//中獎返回
				$msg=array('msg'=>$arr[$im]['title'],'angle'=>$arr[$im]['angle'],'smrand'=>$smrand);
				exit(json_encode($msg,JSON_UNESCAPED_UNICODE));			   
		}else{
		   //最后一個不需要判斷  直接返回
		   if($im+1==$count-1){
				$msg=array('msg'=>$arr[$count-1]['title'],'angle'=>$arr[$count-1]['angle'],'smrand'=>$smrand);
				exit(json_encode($msg,JSON_UNESCAPED_UNICODE));		
		   }else{
		       //起始數字
			   $start=$arr[$im]['prec']+$m;
			   //遞歸  再次調用數組  讀取下一個數組元素
			   $this->getrand($start,$im+1,$arr,$count,$smrand);
		   }
		}
	
	}

說明：

以上概率算法采用的是所有概率求和做分母、出現的概率做分子，如果才有百分比，實現方式是一樣的；
采用遞歸，依次判斷每一次的起始數字和結束數字，中獎的隨機數是否在該范圍內，在，就是中得該獎項，否則沒中，再判斷下一個；
最后一個數組元素是不需要判斷的，前邊的都不是，最后一個一定就是中獎；
記錄誰獲得了什么獎項，應該是在后臺返回數據之前，不能是前臺彈窗以后通過ajax通知后臺中獎信息；

2、隨機抽取一個幸運員工

點擊開始抽獎，單行文本框循環顯示員工，抽獎按鈕文字變為停止，點擊停止的時候，抽中的員工顯示在獲獎名單。

圖3 隨機抽取幸運員工

html代碼

<style>
body{
    background:#DDD;
}
.title{
    height:40px;line-height:40px;font-size:14px;font-weight:bold;margin:100px 0 0 100px;
}
.box{
    width:700px;height:200px;border:1px solid #EEE;border-radius:8px;background:#FFF;margin-left:100px;
}
.box li{height:30px;line-height:30px;}
.cjbtn{
    margin:10px 0 0 100px;
}
#ygname{
    padding:3px 5px;;
}

</style>
<div class='title'>獲獎名單</div>
<div  class='box' >
  <ul>
  </ul>
</div>
<div class='cjbtn'><input type='text' id='ygname' /> <button id='choujiang'>開始抽獎</button></div>

js代碼

<script>
    var t;
	var yuangong=new Array();
	$.ajax({
			url: "/public/man/index.php/api/yuangong",
			data:'',
			type: "post",
			dataType: "json",
			success: function(result) {
				yuangong=result.msg

			}
	})

  
$(document).ready(function() {

    $("#choujiang").click(function(){ 
		if($(this).html()=='開始抽獎'){
          if(yuangong.length>=3){
			$(this).html("停止");
			start();
		  }
		}else{
		    $(this).html("開始抽獎");
			stop();
		}
	});
});

function start() {
	num=Math.floor(Math.random() * (yuangong.length-1));
	$('#ygname').val(yuangong[num]['title']);
	t=setTimeout(start, 0);
}
function stop() {
	clearInterval(t);
	//數組中刪除中獎員工信息防止重復中獎
	yuangong.splice($.inArray(yuangong[num], yuangong), 1);
	$(".box  ul").append("<li>"+$('#ygname').val()+"</li>");

}

</script>

說明：

num=Math.floor(Math.random() * (yuangong.length));

yuangong.length員工數組長度；
Math.random() 0到1的小數，包含0，不包含1；
Math.floor 小數向下取整，可以為0；

綜上：num得到的是0到數組下標的隨機數。

clearInterval(t)：用于停止t=setTimeout(start, 0);

后臺php接口程序

    public function yuangong(){
		$yuangong[0]=array('id'=>1,'title'=>'業務部【張三】');
		$yuangong[1]=array('id'=>2,'title'=>'技術部【李四】');
		$yuangong[2]=array('id'=>3,'title'=>'技術部【逍遙】');
		$yuangong[3]=array('id'=>4,'title'=>'會計部【薛嫣】');
		$yuangong[4]=array('id'=>5,'title'=>'行政部【王五】');
		$yuangong[5]=array('id'=>6,'title'=>'行政部【王天林】');
		$yuangong[6]=array('id'=>7,'title'=>'行政部【李笑和】');

		$msg=array('msg'=>$yuangong);
		exit(json_encode($msg,JSON_UNESCAPED_UNICODE));	
	}

3、隨機抽取多個幸運員工

沒有想到什么效果，只是單純地獲取了隨機數

html代碼

<style>
body{
    background:#DDD;
}
.title{
    height:40px;line-height:40px;font-size:14px;font-weight:bold;margin:100px 0 0 100px;
}
.box{
    width:700px;height:200px;border:1px solid #EEE;border-radius:8px;background:#FFF;margin-left:100px;
}
.box li{height:30px;line-height:30px;}
.cjbtn{
    margin:10px 0 0 100px;
}
#ygname{
    padding:3px 5px;;
}

</style>
<div class='title'>獲獎名單</div>
<div  class='box' >
  <ul>
  </ul>
</div>
<div class='cjbtn'> <button id='choujiang'>開始抽獎</button></div>

js代碼

<script>
var yuangong=new Array();
var ygstr='';//存取獲獎員工
var ygrs=5;//一次抽幾個
var t;
$.ajax({
			url: "/public/man/index.php/api/yuangong",
			data:'',
			type: "post",
			dataType: "json",
			success: function(result) {
				yuangong=result.msg

			}
})

$(document).ready(function() {
    $("#choujiang").click(function(){ 
		if(yuangong.length>=ygrs){
		    start(1);
		}
	});
});

function start(ms) {
   //ms  第幾次獲取員工信息
   num=Math.floor(Math.random() * (yuangong.length));
   console.log(num);
   ygstr+="<li>"+yuangong[num]['title']+"</li>";
   if(ms>=ygrs){
	   $(".box  ul").html(ygstr);
	   ygstr="";
   }else{
	   yuangong.splice($.inArray(yuangong[num], yuangong), 1);
       start(ms+1);
   }
    	
}
</script>

4、在線開盲盒

需要我們點擊抽獎的時候通過ajax讀取后臺獲得的盲盒信息，直接顯示到前臺，前臺顯示同上邊的，都是一樣，說一下后臺程序。

使用array_rand().隨機獲取幾個數組元素

array_rand($arr,$count).用法

$arr目標數組；
$count隨機的個數;

返回值是原數組的下標。

    public function manghe(){
	
		$goods[0]=array('id'=>1,'title'=>'手機');
		$goods[1]=array('id'=>2,'title'=>'毛絨玩具');
		$goods[2]=array('id'=>3,'title'=>'化妝品');
		$goods[3]=array('id'=>4,'title'=>'啫喱水');
		$goods[4]=array('id'=>5,'title'=>'面膜');
		$goods[5]=array('id'=>6,'title'=>'學習用品');
		$goods[6]=array('id'=>7,'title'=>'電腦');

		$getarr=array_rand($goods,3);
		$i=0;
		foreach($getarr as $k){
		    $rearr[$i]=$goods[$k];
			$i++;
		}

		$msg=array('msg'=>$rearr);
		exit(json_encode($msg,JSON_UNESCAPED_UNICODE));	
	}

如果包含特殊獎項，需要滿足抽獎多少次，一定抽中，可以達到抽獎次數以后在array_rand內隨機數減一，然后把大獎塞進該次抽獎的返回信息。

array_push($rearr,$a)用法：

$rearr目標數組；
$a追加的元素或者是數組

    $tebie[999]=array('id'=>999,'title'=>'特別大獎');
		$goods[0]=array('id'=>1,'title'=>'手機');
		$goods[1]=array('id'=>2,'title'=>'毛絨玩具');
		$goods[2]=array('id'=>3,'title'=>'化妝品');
		$goods[3]=array('id'=>4,'title'=>'啫喱水');
		$goods[4]=array('id'=>5,'title'=>'面膜');
		$goods[5]=array('id'=>6,'title'=>'學習用品');
		$goods[6]=array('id'=>7,'title'=>'電腦');

		$getarr=array_rand($goods,3);
		$i=0;
		foreach($getarr as $k){
		    $rearr[$i]=$goods[$k];
			$i++;
		}
        array_push($rearr,$tebie[999]);

        dump($rearr);

        exit;

輸出結果：

前面一篇文章：「高頻面試題」瀏覽器從輸入url到頁面展示中間發生了什么中，我們有對瀏覽器的渲染流程做了一個概括性的介紹，今天這篇文章我們將深入學習這部分內容。

對于很多前端開發來說，平常做工主要專注于業務開發，對瀏覽器的渲染階段可能不是很了解。實際上這個階段很重要，了解瀏覽器的渲染過程，能讓我們知道我們寫的HTML、CSS、JS代碼是如何被解析，并最終渲染成一個頁面的，在頁面性能優化的時候有相應的解決思路。

我們先來看一個問題：

HTML、CSS、JS文件在瀏覽器中是如何轉化成頁面的？

如果你回答不上來，那就往下看吧。

按照渲染的時間順序，渲染過程可以分為下面幾個子階段：構建DOM樹、樣式計算、布局階段、分層、柵格化和合成顯示。

下面詳細看下每個階段都做了哪些事情。

1. 構建DOM樹

HTML文檔描述一個頁面的結構，但是瀏覽器無法直接理解和使用HTML，所以需要通過HTML解析器將HTML轉換成瀏覽器能夠理解的結構——DOM樹。

HTML文檔中所有內容皆為節點，各節點之間有層級關系，彼此相連，構成DOM樹。

構建過程：讀取HTML文檔的字節(Bytes)，將字節轉換成字符(Chars)，依據字符確定標簽(Tokens)，將標簽轉換成節點(Nodes)，以節點為基準構建DOM樹。參考下圖：

打開Chrome的開發者工具，在控制臺輸入 document 后回車，就能看到一個完整的DOM樹結構，如下圖所示：

在控制臺打印出來的DOM結構和HTML內容幾乎一樣，但和HTML不同的是，DOM是保存在內存中的樹狀結構，可以通過JavaScript來查詢或修改其內容。

2. 樣式計算

樣式計算這個階段，是為了計算出DOM節點中每個元素的表現樣式。

2.1 解析CSS

CSS樣式可以通過下面三種方式引入：

通過link引用外部的CSS文件
style 標簽內的CSS
元素的style屬性內嵌的CSS

和HTML一樣，瀏覽器無法直接理解純文本的CSS樣式，需要通過CSS解析器將CSS解析成 styleSheets 結構，也就是我們常說的 CSSOM樹。

styleSheets結構同樣具備查詢和修改功能：

document.styleSheets

2.2 屬性值標準化

屬性值標準化看字面意思有點不好理解，我們通過下面一個例子來看看什么是屬性值標準化：

在寫CSS樣式的時候，我們在設置color屬性值的時候，經常會用white、red等，但是這種值瀏覽器的渲染引擎不容易理解，所以需要將所有值轉換成渲染引擎容易理解的、標準化的計算值，這個過程就是屬性值標準化。

white標準化后的值為 rgb(255, 255, 255)

2.3 計算DOM樹中每個節點的樣式

完成樣式的屬性值標準化后，就需要計算每個節點的樣式屬性，這個階段CSS有兩個規則我們需要清楚：

繼承規則：每個DOM節點都包含有父節點的樣式
層疊規則：層疊是CSS的一個基本特征，是一個定義了如何合并來自多個源的屬性值的算法。

樣式計算階段是為了計算出DOM節點中每個元素的具體樣式，在計算過程中需要遵守CSS的繼承和層疊兩個規則。

該階段最終輸出的內容是每個DOM節點的樣式，并被保存在 ComputedStyle 的結構中。

3. 布局階段

經過上面的兩個步驟，我們已經拿到了DOM樹和DOM樹中元素的樣式，接下來需要計算DOM樹中可見元素的幾何位置，這個計算過程就是布局。

3.1 創建布局樹

在DOM樹中包含了一些不可見的元素，例如 head 標簽，設置了 display:none 屬性的元素，所以我們需要額外構建一棵只包含可見元素的布局樹。

構建過程：從DOM樹的根節點開始遍歷，將所有可見的節點加到布局樹中，忽略不可見的節點。

3.2 布局計算

到這里我們就有了一棵構建好的布局樹，就可以開始計算布局樹節點的坐標位置了。從根節點開始遍歷，結合上面計算得到的樣式，確定每個節點對象在頁面上的具體大小和位置，將這些信息保存在布局樹中。

布局階段的輸出是一個盒子模型，它會精確地捕獲每個元素在屏幕內的確切位置與大小。

4. 分層

現在我們已經有了布局樹，也知道了每個元素的具體位置信息，但是還不能開始繪制頁面，因為頁面中會有像3D變換、頁面滾動、或者用 z-index 進行z軸排序等復雜效果，為了更方便實現這些效果，渲染引擎還需要為特定的節點生成專用的圖層，并生成一棵對應的圖層樹(LayerTree)。

在Chrome瀏覽器中，我們可以打開開發者工具，選擇 Elements-Layers 標簽，就可以看到頁面的分層情況，如下圖所示：

瀏覽器的頁面實際上被分成了很多圖層，這些圖層疊加后合成了最終的頁面。

到這里，我們構建了兩棵樹：布局樹和圖層樹。下面我們來看下這兩棵樹之間的關系：

正常情況下，并不是布局樹的每個節點都包含一個圖層，如果一個節點沒有對應的圖層，那么這個節點就從屬于父節點的圖層。

那節點要滿足什么條件才會被提升為一個單獨的圖層？只要滿足下面其中一個條件即可：

擁有層疊上下文屬性的元素會被提升為單獨的一個圖層
需要剪裁(clip)的地方也會被創建為圖層。

5. 圖層繪制

構建好圖層樹之后，渲染引擎就會對圖層樹中的每個圖層進行繪制。

渲染引擎實現圖層繪制，會把一個圖層的繪制拆分成很多小的繪制指令，然后將這些指令按照順序組成一個繪制列表。

6. 柵格化(raster)操作

繪制一個圖層時會生成一個繪制列表，這只是用來記錄繪制順序和繪制指令的列表，實際上繪制操作是由渲染引擎中的合成線程來完成的。

通過下圖來看下渲染主線程和合成線程之間的關系：

當圖層的繪制列表準備好后，主線程會把該繪制列表提交給合成線程，合成線程開始工作。

首先合成線程會將圖層劃分為圖塊(tile)，圖塊大小通常是 256256 或者 512512。

然后合成線程會按照視口附近的圖塊來優先生成位圖，實際生成位圖的操作是由柵格化來執行的。所謂柵格化，是指將圖塊轉換為位圖。而圖塊是柵格化執行的最小單位。渲染進程維護了一個柵格化的線程池，所有的圖塊柵格化都是在線程池內執行的，運行方式如下圖所示：

7. 合成和顯示

一旦所有圖塊都被光柵化，合成線程就會生成一個繪制圖塊的命令——“DrawQuad”，然后將該命令提交給瀏覽器進程。

瀏覽器進程里面有一個名字叫做 viz 的組件，用來接收合成線程發過來的 DrawQuad 命令，然后根據命令執行。 DrawQuad 命令，將其頁面內容繪制到內存中，最后再將內存顯示在屏幕上。

多年開發老碼農福利贈送：網頁制作，網站開發，web前端開發，從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Vue、React、Ajax，node，angular框架等到移動端小程序項目實戰【視頻＋工具＋電子書＋系統路線圖】都有整理，需要的伙伴可以私信我，發送“前端”等3秒后就可以獲取領取地址，送給每一位對編程感興趣的小伙伴

8. 總結

一個完整的渲染流程可以總結如下：

1、渲染進程將HTML內容轉換為瀏覽器能夠讀懂的DOM樹結構。
2、渲染引擎將CSS樣式表轉化為瀏覽器可以理解的styleSheets，計算出DOM節點的樣式。
3、創建布局樹，并計算所需元素的布局信息。
4、對布局樹進行分層，并生成分層樹。
5、為每個圖層生成繪制列表，并將其提交到合成線程。
6、合成線程將圖層分圖塊，并柵格化將圖塊轉換成位圖。
7、合成線程發送繪制圖塊命令給瀏覽器進程。瀏覽器進程根據指令生成頁面，并顯示到顯示器上。

渲染過程中還有兩個我們經常聽到的概念：重排和重繪。在這篇文章中就不細說了，下一篇文章再詳細介紹。

在線咨詢

上一篇：年度照片投票最后一天！票數膠著！
下一篇：Ruby on Rails 作者的 WYSIWYG

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

《小白H5成長之路11》通過jQuery更改元素的c

1. 構建DOM樹

2. 樣式計算

2.1 解析CSS

2.2 屬性值標準化

2.3 計算DOM樹中每個節點的樣式

3. 布局階段

3.1 創建布局樹

3.2 布局計算

4. 分層

5. 圖層繪制

6. 柵格化(raster)操作

7. 合成和顯示

8. 總結

您的項目需求