How to increase hexadecimal number

Question

I am trying to implement a css counter in javascript. So far I have seen that most of the counter has some kind of internal hexadecimal value and increases by 1, respectively. For cycle counters, it repeats. but cjk-decimal is also a type of number counter that has hexadecimal values.

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

So, is there a way to increment "\ 3007" to "\ 4E00" to n in javascript to create the same characters in a sequence.

Thanks in advance.

Answer 1

Unfortunately, I do not think there is a direct way to do this.

It looks like <ul>u <li>have character set support 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>

Run codeHide result

, , , . , - :

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>

Hide result