3

我正在尝试在 javascript 中实现 css 计数器。到目前为止，我已经看到大多数计数器都有一些初始的十六进制值，并相应地增加 1。对于循环计数器，它会重复自身。但 cjk-decimal 也是数字计数器的类型，其值低于十六进制值。

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

那么有没有办法在javascript中将“\3007”增加到“\4E00”到n，以按顺序产生相同的字符。

提前致谢。

4

1 回答 1

0

不幸的是，我认为没有直接的方法可以做到这一点。

它看起来像<ul>并且<li>支持带有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>

但是，我认为如果你想在列表之外使用它，你必须直接将符号映射到数字。也许是这样的：

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>

于 2018-04-18T19:20:06.797 回答