How to increment Hex number

Question

I am trying to implement css counter in javascript. Till now i have seen that most of the counter has some intial hex value and increments by 1 accordingly. For cycle counters it repeats itself. but cjk-decimal is also type of number counter which has below hex values.

 symbols: \3007  \4E00  \4E8C  \4E09  \56DB  \4E94  \516D  \4E03  \516B  \4E5D;

So is there any way to increment "\3007" to "\4E00" upto n in javascript to produce same characters in sequence.

Thanks in advance.

I don't think this is available natively. I think you may need to map those characters and implement the counter yourself. I do see that `cjk-decimal` is an available [list-style-type](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type) though. — zero298, Apr 18 '18 at 19:00
Not sure I understand the question, so please correct me if I'm wrong. You have a CSS counter with `list-style-type: cjk-decimal` that works fine, and now you want a counter in JavaScript to be represented by the same symbols, right? Would a simple array-based solution be OK for you? `var getSymbol = i => ["\u3007", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D", "\u4E03", "\u516B", "\u4E5D"][i];` — Ruud Helderman, Apr 18 '18 at 19:32
It looks like the counter styles are little-implemented so far: https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style#Browser_compatibility — Scott Sauyet, Apr 18 '18 at 20:14
@RuudHelderman I am trying to implement counter for some application which doesn't have support for pseudo selectors. Having the codes in array will be a limited solution, what if number goes beyond the range of array? — Pavan Tiwari, Apr 19 '18 at 09:48
@PavanTiwari Based on this example found on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type): 一, 二, 三, ..., 九八, 九九, 一〇〇, is it safe for me to assume decimal digits map one on one? That would allow for a straightforward mapping: `var toCjkDecimal = n => (''+n).split('').map(getSymbol).join('');` — Ruud Helderman, Apr 19 '18 at 12:03

score 0 · Answer 1 · answered Apr 18 '18 at 19:20

Unfortunately, I don't think that there is a direct way to do this.

It looks like <ul> and <li> have support for the symbol set with cjk-decimal.

ul {
  list-style-type: cjk-decimal;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

However, I think you'll have to map symbols to numbers directly if you want to use it outside of lists. Maybe something like this:

const mappings = [
  "zero",
  "one",
  "two",
  "three",
  "four",
  "five",
  "six",
  "seven",
  "eight",
  "nine"
];

setInterval(() => {
  const cjk = document.querySelectorAll("[data-cjk]");
  for (let el of cjk) {
    let i = el.dataset.cjk;
    el.className = `cjk ${mappings[i++]}`;
    if (i >= mappings.length) {
      i = 0;
    }
    el.dataset.cjk = i;
  }
}, 1000);

.cjk:after {
  display: inline-block;
}

.zero:after {
  content: "\3007";
}

.one:after {
  content: "\4E00";
}

.two:after {
  content: "\4E8C";
}

.three:after {
  content: "\4E09";
}

.four:after {
  content: "\56DB";
}

.five:after {
  content: "\4E94";
}

.six:after {
  content: "\516D";
}

.seven:after {
  content: "\4E03";
}

.eight:after {
  content: "\516B";
}

.nine:after {
  content: "\4E5D";
}

<span data-cjk="1"></span>

Both are hawkish way of doing the thing. If there are more than 9 list items then this solution will not work. — Pavan Tiwari, Apr 19 '18 at 09:52

How to increment Hex number

1 Answers1