專案 星星評分

2021-10-05 07:49:58 字數 914 閱讀 8134

demo

任務描述:

1.滑鼠移過星星的顏色會跟著改變(評分),並且評價的內容文字依照星星級數跟著改變

2.滑鼠移開,所有東西取消

3點選星星以後星星顏色固定並不會隨著滑鼠移開取消,並且顯示評價的內容

4.滑鼠再次移入時可以更換星星評價,只要沒有點選再次移開滑鼠即回到點選時的狀態

這次練習是透過大神分享的專案來練習的!!(點選這裡)所有的程式碼可以從以上的dem裡檢視這次也是先自己敲完以後,實在有問題再來看一下大神是如何敲的,這次新學到很多東西特別是簡寫方面的用法!!

star = over || overstar;

整個部分最困難的地方是顯示星星的部分,要先能夠判斷星星是滑過的狀態?還是移出的狀態?或是已經被點選過的狀態? 而以上這句程式碼很好的幫我們分辨了星星的狀態。

這句程式碼的意思是如果over為真則start=over如果為非則start=overstar(我在這裡整理了更詳細的說明),先把over設定為了形參,並且在滑鼠移入時給予實參,但在滑鼠移出時並沒有給予引數,這樣一來,當滑鼠移入時start=over(over為真),則區分了是滑鼠移入還是移出的狀態。

在沒有型參的狀態下,start=overstart,此時再判斷是否是點選狀態,也就是說在點選的時候賦予overstart數值(點了幾個星星),如果沒有點選則沒有數值(回到原本狀態)。

這次學到的內容很龐大,並且需要重複複習,在此我另外寫了幾篇文章(match的用法,js各種簡寫)來更詳細的做紀錄!!以上,望能持之以恆!!

Android星星評分控制項RatingBar的使用

在android的開發中,有乙個叫做評分控制項ratingbar,我們可以使用該控制項做等級劃分 評分等作用,星星形狀顯示,也可以半星級別,我們來看一下評分控制項如何使用。布局檔案中定義控制項以及屬性,這裡主要需要指定的是總星星數量,和當前的值,也就是總級別跟當前級別的量。評分控制項中兩個比較重要的...

vue 星星評分元件

評分外掛程式在購物的應用中經常可以看得到,但是用著別人的總是沒有自己寫的順手,正好趁著這段時間做乙個移動端應用的時候寫了乙個基於vue的評分元件,功能沒有寫全 主體結構 scorelayer v show isshowscore click hidescorelayer event center b...

JS 實現簡單星星評分功能

呼叫onmouseover將經過的星星和之前的設定成紅色 之後的設定成黑色 lang en charset utf 8 document示例title head onload test id czy td td td td td tr table type button id ok value 打分...