小tip:CSS計數器+僞類實現數值動態計算與呈現【轉】

【原文】http://www.zhangxinxu.com/wordpress/2014/12/css-counters-pseudo-class-checked-numbers/

 

1、CSS計數器爲哪樣？

要想理解本文內容，你須要首先了解什麼是CSS計數器，您能夠查看前不久我寫的文章「CSS計數器(序列數字字符自動遞增)詳解」，至關地詳盡與深刻。

下面的動態行爲所有由HTML與CSS觸發，沒有任何JavaScript的參與，不過使用諸多CSS3功能，所以只在現代瀏覽器中有效果。OK，放下手中的工做，一塊兒來感覺下CSS的潛力吧~

2、CSS計數器與動態計數呈現

您能夠狠狠地點擊這裏：使用CSS計數器動態得到選中元素個數demo

demo中的複選框，你選中幾個，就是告訴你對應選中的個數，以下截圖，本人土鱉，只吃過3種：

CSS代碼很簡單，以下：

body {
  counter-reset: icecream;
}
input:checked {
  counter-increment: icecream;
}
.total::after {
  content: counter(icecream);
}

解釋下就是，有個全局計數器icecream，每有一個複選框選中，計數值就會加1, .total就是呈現選中個數的那個標籤，其任務很簡單，呈現當前計數器值就能夠了。

3、CSS計數器與數值計算小遊戲

您能夠狠狠地點擊這裏：CSS計數器實現數值計算小遊戲demo

默認進入看到是這樣樣子：

選擇對應的計算值後面就會呈現對應的結果：

當最後計算的值是72時候，就會反饋你成功了！

其實現主要藉助CSS3選擇器以及CSS計數器以及單複選框僞類技術。

CSS核心代碼以下：

body {
  counter-reset: sum;
}

input {
  position: absolute;
  clip: rect(0 0 0 0);	
}

#number1:checked { counter-increment: sum 64; }
#number2:checked { counter-increment: sum 16; }
#number3:checked { counter-increment: sum -32; }
#number4:checked { counter-increment: sum 128; }
#number5:checked { counter-increment: sum 4; }
#number6:checked { counter-increment: sum -8; }

.sum::before {
  content: '= ' counter(sum);
}

#number1:checked ~ 
#number2:checked ~ 
#number3:not(:checked) ~ 
#number4:not(:checked) ~ 
#number5:not(:checked) ~ 
#number6:checked ~ 
.sum::after {
  content: ' (萬歲！)';
}

其實原理跟上面的計算選中個數是同樣的，不過這裏呢，每一個複選框計數值這裏都是具體值（不是默認的1），最後，經過相鄰兄弟選擇器以及:checked狀態判斷最後結果是否是72，仍是挺巧妙的。

你們有興趣能夠多多斟酌斟酌。

參考文章

• Fun Times with CSS Counters

大熱書籍 《CSS世界》簽名版限量獨家發售， 顯示個人專屬購買碼

（本篇完）