1、在進(jìn)度條寬度變化的時候，計算蓋過每一個文字的50%，如果超過，設(shè)置文字相反顏色。當(dāng)然css也有對應(yīng)的方案，也就是 mix-blend-mode，我并沒有接觸過。對應(yīng)html也有對應(yīng)方案，也就設(shè)置兩個相同位置但是顏色相反的dom結(jié)構(gòu)在重疊在一起，頂層覆蓋底層，最頂層的進(jìn)度條取overflow為hidden，其寬度就為進(jìn)度。
2、
image.png
- vue 響應(yīng)式原理：
es5里面新增了一個叫 object.defineproperty的api 他可以對對象進(jìn)行操作，帶有一個set 和 get 方法，來進(jìn)行數(shù)據(jù)的獲取和設(shè)置，那在這里我們就可以插入一些觸發(fā)更新的方法，
使用 發(fā)布訂閱模式 來闡述一下這個部分：
多個訂閱者可以向同一個發(fā)布者訂閱一個事件，那么等有新的訂閱者的時候，我們就把這個訂閱者加入到發(fā)布者創(chuàng)建的隊列里邊，當(dāng)發(fā)布者的事件有變化的時候我們就通知所有的訂閱者更新事件，由此訂閱者就能看到最新的事件。 以下發(fā)出一段代碼能有效理解這段話：
注： subs 數(shù)組是訂閱者隊列；
image.png
https://www.cnblogs.com/chenjg/p/9541291.html
4.
image.png
5.
image.png
