css图片计数器的问题

Question

如上图，279为十秒中点击屏幕的次数

这个数字怎么按图片中的样式控制？

10s中点击的次数不固定，点击一下就加一

Answer 1

数字可以引入字体（这种液晶字体，比如http://www.52z.com/soft/89683...）来做；

Answer 2

说下我的思路：首先弄个变量保存你点击的 次数，也就是说你每次 点击后 都是在这变量的基础上累加，然后把这个数字 分成个数组 ，比如你 279，就是[2,7,9];然后在次之前 你定义了个 对象保存 1到9的图片

{
    1：img_1.png,
    2: img_2.png,
    ...
    9： img_9.png
} 

至此 你后面需要做的就是 每次 点击之后 ，遍历 那个数字里的值 ，取出这个 图片对象对应的 值的属性。
连贯起来的说就是，每次点击 数值变量加一，然后对这个 数值变量split 成数组。再遍历数组的到 图片对象的对应数值属性,作为img标签的src属性值。在页面显示 可以给每张图片定义个 标签 <img>，而标签的个数 来自 数组的 length值，依次append到 某个dom里面。

Answer 3

字体，或者图片

Answer 4

直接用字体的话底下的阴影估计不太好弄，还是建议用图片来弄，大体思路是把黑色背景（带右栏文字）切出来，液晶数字（字符加底下阴影，0~9）切出素材做精灵图；然后黑色背景加到父元素上，三个字符每个字符一个标签，做个.num样式放基础样式和background-image精灵图背景，然后做从.num0~.num9一共10个样式，分别放数字的偏移（background-positon），最后js挂事件直接切换类就好了。