Question

假设您有一个包含数千个项目的有序列表（debugging），最终这些数字将有四位数，甚至更多。如果格式为＆＃34; 1,234＆＃34;这些数字将更容易阅读。而不是浏览器默认的＆＃34; 1234＆＃34;。有没有办法用CSS，JavaScript或其他方式做到这一点？

Answer 1

这是使用counters的纯CSS解决方案。仅在Chrome中测试过，最多可测试2,001项。 Stackoverflow只允许我在我的答案中包含50,000个字符，因此我将片段剪裁为1,111项。

如果您希望列表达到数百万，则需要添加其他计数器并根据下面建立的模式实现相应的CSS。

ol {
  counter-reset: thousands;
  counter-reset: hundreds;
  counter-reset: tens;
  counter-reset: singles;
}
li {
  display: block;
}
li:nth-child(n) {
  counter-increment: singles;
}
li:nth-child(10n) {
  counter-reset: singles;
  counter-increment: tens;
}
li:nth-child(100n) {
  counter-reset: singles tens;
  counter-increment: hundreds;
}
li:nth-child(1000n) {
  counter-reset: singles tens hundreds;
  counter-increment: thousands;
}
li:before {
  content: counter(singles)". ";
}
li:nth-child(n+10):before {
  content: counter(tens) counter(singles)". ";
}
li:nth-child(n+100):before {
  content: counter(hundreds) counter(tens) counter(singles)". ";
}
li:nth-child(n+1000):before {
  content: counter(thousands)"," counter(hundreds) counter(tens) counter(singles)". ";
}

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
  <li>Item 17</li>
  <li>Item 18</li>
  <li>Item 19</li>
  <li>Item 20</li>
  <li>Item 21</li>
  <li>Item 22</li>
  <li>Item 23</li>
  <li>Item 24</li>
  <li>Item 25</li>
  <li>Item 26</li>
  <li>Item 27</li>
  <li>Item 28</li>
  <li>Item 29</li>
  <li>Item 30</li>
  <li>Item 31</li>
  <li>Item 32</li>
  <li>Item 33</li>
  <li>Item 34</li>
  <li>Item 35</li>
  <li>Item 36</li>
  <li>Item 37</li>
  <li>Item 38</li>
  <li>Item 39</li>
  <li>Item 40</li>
  <li>Item 41</li>
  <li>Item 42</li>
  <li>Item 43</li>
  <li>Item 44</li>
  <li>Item 45</li>
  <li>Item 46</li>
  <li>Item 47</li>
  <li>Item 48</li>
  <li>Item 49</li>
  <li>Item 50</li>
  <li>Item 51</li>
  <li>Item 52</li>
  <li>Item 53</li>
  <li>Item 54</li>
  <li>Item 55</li>
  <li>Item 56</li>
  <li>Item 57</li>
  <li>Item 58</li>
  <li>Item 59</li>
  <li>Item 60</li>
  <li>Item 61</li>
  <li>Item 62</li>
  <li>Item 63</li>
  <li>Item 64</li>
  <li>Item 65</li>
  <li>Item 66</li>
  <li>Item 67</li>
  <li>Item 68</li>
  <li>Item 69</li>
  <li>Item 70</li>
  <li>Item 71</li>
  <li>Item 72</li>
  <li>Item 73</li>
  <li>Item 74</li>
  <li>Item 75</li>
  <li>Item 76</li>
  <li>Item 77</li>
  <li>Item 78</li>
  <li>Item 79</li>
  <li>Item 80</li>
  <li>Item 81</li>
  <li>Item 82</li>
  <li>Item 83</li>
  <li>Item 84</li>
  <li>Item 85</li>
  <li>Item 86</li>
  <li>Item 87</li>
  <li>Item 88</li>
  <li>Item 89</li>
  <li>Item 90</li>
  <li>Item 91</li>
  <li>Item 92</li>
  <li>Item 93</li>
  <li>Item 94</li>
  <li>Item 95</li>
  <li>Item 96</li>
  <li>Item 97</li>
  <li>Item 98</li>
  <li>Item 99</li>
  <li>Item 100</li>
  <li>Item 101</li>
  <li>Item 102</li>
  <li>Item 103</li>
  <li>Item 104</li>
  <li>Item 105</li>
  <li>Item 106</li>
  <li>Item 107</li>
  <li>Item 108</li>
  <li>Item 109</li>
  <li>Item 110</li>
  <li>Item 111</li>
  <li>Item 112</li>
  <li>Item 113</li>
  <li>Item 114</li>
  <li>Item 115</li>
  <li>Item 116</li>
  <li>Item 117</li>
  <li>Item 118</li>
  <li>Item 119</li>
  <li>Item 120</li>
  <li>Item 121</li>
  <li>Item 122</li>
  <li>Item 123</li>
  <li>Item 124</li>
  <li>Item 125</li>
  <li>Item 126</li>
  <li>Item 127</li>
  <li>Item 128</li>
  <li>Item 129</li>
  <li>Item 130</li>
  <li>Item 131</li>
  <li>Item 132</li>
  <li>Item 133</li>
  <li>Item 134</li>
  <li>Item 135</li>
  <li>Item 136</li>
  <li>Item 137</li>
  <li>Item 138</li>
  <li>Item 139</li>
  <li>Item 140</li>
  <li>Item 141</li>
  <li>Item 142</li>
  <li>Item 143</li>
  <li>Item 144</li>
  <li>Item 145</li>
  <li>Item 146</li>
  <li>Item 147</li>
  <li>Item 148</li>
  <li>Item 149</li>
  <li>Item 150</li>
  <li>Item 151</li>
  <li>Item 152</li>
  <li>Item 153</li>
  <li>Item 154</li>
  <li>Item 155</li>
  <li>Item 156</li>
  <li>Item 157</li>
  <li>Item 158</li>
  <li>Item 159</li>
  <li>Item 160</li>
  <li>Item 161</li>
  <li>Item 162</li>
  <li>Item 163</li>
  <li>Item 164</li>
  <li>Item 165</li>
  <li>Item 166</li>
  <li>Item 167</li>
  <li>Item 168</li>
  <li>Item 169</li>
  <li>Item 170</li>
  <li>Item 171</li>
  <li>Item 172</li>
  <li>Item 173</li>
  <li>Item 174</li>
  <li>Item 175</li>
  <li>Item 176</li>
  <li>Item 177</li>
  <li>Item 178</li>
  <li>Item 179</li>
  <li>Item 180</li>
  <li>Item 181</li>
  <li>Item 182</li>
  <li>Item 183</li>
  <li>Item 184</li>
  <li>Item 185</li>
  <li>Item 186</li>
  <li>Item 187</li>
  <li>Item 188</li>
  <li>Item 189</li>
  <li>Item 190</li>
  <li>Item 191</li>
  <li>Item 192</li>
  <li>Item 193</li>
  <li>Item 194</li>
  <li>Item 195</li>
  <li>Item 196</li>
  <li>Item 197</li>
  <li>Item 198</li>
  <li>Item 199</li>
  <li>Item 200</li>
  <li>Item 201</li>
  <li>Item 202</li>
  <li>Item 203</li>
  <li>Item 204</li>
  <li>Item 205</li>
  <li>Item 206</li>
  <li>Item 207</li>
  <li>Item 208</li>
  <li>Item 209</li>
  <li>Item 210</li>
  <li>Item 211</li>
  <li>Item 212</li>
  <li>Item 213</li>
  <li>Item 214</li>
  <li>Item 215</li>
  <li>Item 216</li>
  <li>Item 217</li>
  <li>Item 218</li>
  <li>Item 219</li>
  <li>Item 220</li>
  <li>Item 221</li>
  <li>Item 222</li>
  <li>Item 223</li>
  <li>Item 224</li>
  <li>Item 225</li>
  <li>Item 226</li>
  <li>Item 227</li>
  <li>Item 228</li>
  <li>Item 229</li>
  <li>Item 230</li>
  <li>Item 231</li>
  <li>Item 232</li>
  <li>Item 233</li>
  <li>Item 234</li>
  <li>Item 235</li>
  <li>Item 236</li>
  <li>Item 237</li>
  <li>Item 238</li>
  <li>Item 239</li>
  <li>Item 240</li>
  <li>Item 241</li>
  <li>Item 242</li>
  <li>Item 243</li>
  <li>Item 244</li>
  <li>Item 245</li>
  <li>Item 246</li>
  <li>Item 247</li>
  <li>Item 248</li>
  <li>Item 249</li>
  <li>Item 250</li>
  <li>Item 251</li>
  <li>Item 252</li>
  <li>Item 253</li>
  <li>Item 254</li>
  <li>Item 255</li>
  <li>Item 256</li>
  <li>Item 257</li>
  <li>Item 258</li>
  <li>Item 259</li>
  <li>Item 260</li>
  <li>Item 261</li>
  <li>Item 262</li>
  <li>Item 263</li>
  <li>Item 264</li>
  <li>Item 265</li>
  <li>Item 266</li>
  <li>Item 267</li>
  <li>Item 268</li>
  <li>Item 269</li>
  <li>Item 270</li>
  <li>Item 271</li>
  <li>Item 272</li>
  <li>Item 273</li>
  <li>Item 274</li>
  <li>Item 275</li>
  <li>Item 276</li>
  <li>Item 277</li>
  <li>Item 278</li>
  <li>Item 279</li>
  <li>Item 280</li>
  <li>Item 281</li>
  <li>Item 282</li>
  <li>Item 283</li>
  <li>Item 284</li>
  <li>Item 285</li>
  <li>Item 286</li>
  <li>Item 287</li>
  <li>Item 288</li>
  <li>Item 289</li>
  <li>Item 290</li>
  <li>Item 291</li>
  <li>Item 292</li>
  <li>Item 293</li>
  <li>Item 294</li>
  <li>Item 295</li>
  <li>Item 296</li>
  <li>Item 297</li>
  <li>Item 298</li>
  <li>Item 299</li>
  <li>Item 300</li>
  <li>Item 301</li>
  <li>Item 302</li>
  <li>Item 303</li>
  <li>Item 304</li>
  <li>Item 305</li>
  <li>Item 306</li>
  <li>Item 307</li>
  <li>Item 308</li>
  <li>Item 309</li>
  <li>Item 310</li>
  <li>Item 311</li>
  <li>Item 312</li>
  <li>Item 313</li>
  <li>Item 314</li>
  <li>Item 315</li>
  <li>Item 316</li>
  <li>Item 317</li>
  <li>Item 318</li>
  <li>Item 319</li>
  <li>Item 320</li>
  <li>Item 321</li>
  <li>Item 322</li>
  <li>Item 323</li>
  <li>Item 324</li>
  <li>Item 325</li>
  <li>Item 326</li>
  <li>Item 327</li>
  <li>Item 328</li>
  <li>Item 329</li>
  <li>Item 330</li>
  <li>Item 331</li>
  <li>Item 332</li>
  <li>Item 333</li>
  <li>Item 334</li>
  <li>Item 335</li>
  <li>Item 336</li>
  <li>Item 337</li>
  <li>Item 338</li>
  <li>Item 339</li>
  <li>Item 340</li>
  <li>Item 341</li>
  <li>Item 342</li>
  <li>Item 343</li>
  <li>Item 344</li>
  <li>Item 345</li>
  <li>Item 346</li>
  <li>Item 347</li>
  <li>Item 348</li>
  <li>Item 349</li>
  <li>Item 350</li>
  <li>Item 351</li>
  <li>Item 352</li>
  <li>Item 353</li>
  <li>Item 354</li>
  <li>Item 355</li>
  <li>Item 356</li>
  <li>Item 357</li>
  <li>Item 358</li>
  <li>Item 359</li>
  <li>Item 360</li>
  <li>Item 361</li>
  <li>Item 362</li>
  <li>Item 363</li>
  <li>Item 364</li>
  <li>Item 365</li>
  <li>Item 366</li>
  <li>Item 367</li>
  <li>Item 368</li>
  <li>Item 369</li>
  <li>Item 370</li>
  <li>Item 371</li>
  <li>Item 372</li>
  <li>Item 373</li>
  <li>Item 374</li>
  <li>Item 375</li>
  <li>Item 376</li>
  <li>Item 377</li>
  <li>Item 378</li>
  <li>Item 379</li>
  <li>Item 380</li>
  <li>Item 381</li>
  <li>Item 382</li>
  <li>Item 383</li>
  <li>Item 384</li>
  <li>Item 385</li>
  <li>Item 386</li>
  <li>Item 387</li>
  <li>Item 388</li>
  <li>Item 389</li>
  <li>Item 390</li>
  <li>Item 391</li>
  <li>Item 392</li>
  <li>Item 393</li>
  <li>Item 394</li>
  <li>Item 395</li>
  <li>Item 396</li>
  <li>Item 397</li>
  <li>Item 398</li>
  <li>Item 399</li>
  <li>Item 400</li>
  <li>Item 401</li>
  <li>Item 402</li>
  <li>Item 403</li>
  <li>Item 404</li>
  <li>Item 405</li>
  <li>Item 406</li>
  <li>Item 407</li>
  <li>Item 408</li>
  <li>Item 409</li>
  <li>Item 410</li>
  <li>Item 411</li>
  <li>Item 412</li>
  <li>Item 413</li>
  <li>Item 414</li>
  <li>Item 415</li>
  <li>Item 416</li>
  <li>Item 417</li>
  <li>Item 418</li>
  <li>Item 419</li>
  <li>Item 420</li>
  <li>Item 421</li>
  <li>Item 422</li>
  <li>Item 423</li>
  <li>Item 424</li>
  <li>Item 425</li>
  <li>Item 426</li>
  <li>Item 427</li>
  <li>Item 428</li>
  <li>Item 429</li>
  <li>Item 430</li>
  <li>Item 431</li>
  <li>Item 432</li>
  <li>Item 433</li>
  <li>Item 434</li>
  <li>Item 435</li>
  <li>Item 436</li>
  <li>Item 437</li>
  <li>Item 438</li>
  <li>Item 439</li>
  <li>Item 440</li>
  <li>Item 441</li>
  <li>Item 442</li>
  <li>Item 443</li>
  <li>Item 444</li>
  <li>Item 445</li>
  <li>Item 446</li>
  <li>Item 447</li>
  <li>Item 448</li>
  <li>Item 449</li>
  <li>Item 450</li>
  <li>Item 451</li>
  <li>Item 452</li>
  <li>Item 453</li>
  <li>Item 454</li>
  <li>Item 455</li>
  <li>Item 456</li>
  <li>Item 457</li>
  <li>Item 458</li>
  <li>Item 459</li>
  <li>Item 460</li>
  <li>Item 461</li>
  <li>Item 462</li>
  <li>Item 463</li>
  <li>Item 464</li>
  <li>Item 465</li>
  <li>Item 466</li>
  <li>Item 467</li>
  <li>Item 468</li>
  <li>Item 469</li>
  <li>Item 470</li>
  <li>Item 471</li>
  <li>Item 472</li>
  <li>Item 473</li>
  <li>Item 474</li>
  <li>Item 475</li>
  <li>Item 476</li>
  <li>Item 477</li>
  <li>Item 478</li>
  <li>Item 479</li>
  <li>Item 480</li>
  <li>Item 481</li>
  <li>Item 482</li>
  <li>Item 483</li>
  <li>Item 484</li>
  <li>Item 485</li>
  <li>Item 486</li>
  <li>Item 487</li>
  <li>Item 488</li>
  <li>Item 489</li>
  <li>Item 490</li>
  <li>Item 491</li>
  <li>Item 492</li>
  <li>Item 493</li>
  <li>Item 494</li>
  <li>Item 495</li>
  <li>Item 496</li>
  <li>Item 497</li>
  <li>Item 498</li>
  <li>Item 499</li>
  <li>Item 500</li>
  <li>Item 501</li>
  <li>Item 502</li>
  <li>Item 503</li>
  <li>Item 504</li>
  <li>Item 505</li>
  <li>Item 506</li>
  <li>Item 507</li>
  <li>Item 508</li>
  <li>Item 509</li>
  <li>Item 510</li>
  <li>Item 511</li>
  <li>Item 512</li>
  <li>Item 513</li>
  <li>Item 514</li>
  <li>Item 515</li>
  <li>Item 516</li>
  <li>Item 517</li>
  <li>Item 518</li>
  <li>Item 519</li>
  <li>Item 520</li>
  <li>Item 521</li>
  <li>Item 522</li>
  <li>Item 523</li>
  <li>Item 524</li>
  <li>Item 525</li>
  <li>Item 526</li>
  <li>Item 527</li>
  <li>Item 528</li>
  <li>Item 529</li>
  <li>Item 530</li>
  <li>Item 531</li>
  <li>Item 532</li>
  <li>Item 533</li>
  <li>Item 534</li>
  <li>Item 535</li>
  <li>Item 536</li>
  <li>Item 537</li>
  <li>Item 538</li>
  <li>Item 539</li>
  <li>Item 540</li>
  <li>Item 541</li>
  <li>Item 542</li>
  <li>Item 543</li>
  <li>Item 544</li>
  <li>Item 545</li>
  <li>Item 546</li>
  <li>Item 547</li>
  <li>Item 548</li>
  <li>Item 549</li>
  <li>Item 550</li>
  <li>Item 551</li>
  <li>Item 552</li>
  <li>Item 553</li>
  <li>Item 554</li>
  <li>Item 555</li>
  <li>Item 556</li>
  <li>Item 557</li>
  <li>Item 558</li>
  <li>Item 559</li>
  <li>Item 560</li>
  <li>Item 561</li>
  <li>Item 562</li>
  <li>Item 563</li>
  <li>Item 564</li>
  <li>Item 565</li>
  <li>Item 566</li>
  <li>Item 567</li>
  <li>Item 568</li>
  <li>Item 569</li>
  <li>Item 570</li>
  <li>Item 571</li>
  <li>Item 572</li>
  <li>Item 573</li>
  <li>Item 574</li>
  <li>Item 575</li>
  <li>Item 576</li>
  <li>Item 577</li>
  <li>Item 578</li>
  <li>Item 579</li>
  <li>Item 580</li>
  <li>Item 581</li>
  <li>Item 582</li>
  <li>Item 583</li>
  <li>Item 584</li>
  <li>Item 585</li>
  <li>Item 586</li>
  <li>Item 587</li>
  <li>Item 588</li>
  <li>Item 589</li>
  <li>Item 590</li>
  <li>Item 591</li>
  <li>Item 592</li>
  <li>Item 593</li>
  <li>Item 594</li>
  <li>Item 595</li>
  <li>Item 596</li>
  <li>Item 597</li>
  <li>Item 598</li>
  <li>Item 599</li>
  <li>Item 600</li>
  <li>Item 601</li>
  <li>Item 602</li>
  <li>Item 603</li>
  <li>Item 604</li>
  <li>Item 605</li>
  <li>Item 606</li>
  <li>Item 607</li>
  <li>Item 608</li>
  <li>Item 609</li>
  <li>Item 610</li>
  <li>Item 611</li>
  <li>Item 612</li>
  <li>Item 613</li>
  <li>Item 614</li>
  <li>Item 615</li>
  <li>Item 616</li>
  <li>Item 617</li>
  <li>Item 618</li>
  <li>Item 619</li>
  <li>Item 620</li>
  <li>Item 621</li>
  <li>Item 622</li>
  <li>Item 623</li>
  <li>Item 624</li>
  <li>Item 625</li>
  <li>Item 626</li>
  <li>Item 627</li>
  <li>Item 628</li>
  <li>Item 629</li>
  <li>Item 630</li>
  <li>Item 631</li>
  <li>Item 632</li>
  <li>Item 633</li>
  <li>Item 634</li>
  <li>Item 635</li>
  <li>Item 636</li>
  <li>Item 637</li>
  <li>Item 638</li>
  <li>Item 639</li>
  <li>Item 640</li>
  <li>Item 641</li>
  <li>Item 642</li>
  <li>Item 643</li>
  <li>Item 644</li>
  <li>Item 645</li>
  <li>Item 646</li>
  <li>Item 647</li>
  <li>Item 648</li>
  <li>Item 649</li>
  <li>Item 650</li>
  <li>Item 651</li>
  <li>Item 652</li>
  <li>Item 653</li>
  <li>Item 654</li>
  <li>Item 655</li>
  <li>Item 656</li>
  <li>Item 657</li>
  <li>Item 658</li>
  <li>Item 659</li>
  <li>Item 660</li>
  <li>Item 661</li>
  <li>Item 662</li>
  <li>Item 663</li>
  <li>Item 664</li>
  <li>Item 665</li>
  <li>Item 666</li>
  <li>Item 667</li>
  <li>Item 668</li>
  <li>Item 669</li>
  <li>Item 670</li>
  <li>Item 671</li>
  <li>Item 672</li>
  <li>Item 673</li>
  <li>Item 674</li>
  <li>Item 675</li>
  <li>Item 676</li>
  <li>Item 677</li>
  <li>Item 678</li>
  <li>Item 679</li>
  <li>Item 680</li>
  <li>Item 681</li>
  <li>Item 682</li>
  <li>Item 683</li>
  <li>Item 684</li>
  <li>Item 685</li>
  <li>Item 686</li>
  <li>Item 687</li>
  <li>Item 688</li>
  <li>Item 689</li>
  <li>Item 690</li>
  <li>Item 691</li>
  <li>Item 692</li>
  <li>Item 693</li>
  <li>Item 694</li>
  <li>Item 695</li>
  <li>Item 696</li>
  <li>Item 697</li>
  <li>Item 698</li>
  <li>Item 699</li>
  <li>Item 700</li>
  <li>Item 701</li>
  <li>Item 702</li>
  <li>Item 703</li>
  <li>Item 704</li>
  <li>Item 705</li>
  <li>Item 706</li>
  <li>Item 707</li>
  <li>Item 708</li>
  <li>Item 709</li>
  <li>Item 710</li>
  <li>Item 711</li>
  <li>Item 712</li>
  <li>Item 713</li>
  <li>Item 714</li>
  <li>Item 715</li>
  <li>Item 716</li>
  <li>Item 717</li>
  <li>Item 718</li>
  <li>Item 719</li>
  <li>Item 720</li>
  <li>Item 721</li>
  <li>Item 722</li>
  <li>Item 723</li>
  <li>Item 724</li>
  <li>Item 725</li>
  <li>Item 726</li>
  <li>Item 727</li>
  <li>Item 728</li>
  <li>Item 729</li>
  <li>Item 730</li>
  <li>Item 731</li>
  <li>Item 732</li>
  <li>Item 733</li>
  <li>Item 734</li>
  <li>Item 735</li>
  <li>Item 736</li>
  <li>Item 737</li>
  <li>Item 738</li>
  <li>Item 739</li>
  <li>Item 740</li>
  <li>Item 741</li>
  <li>Item 742</li>
  <li>Item 743</li>
  <li>Item 744</li>
  <li>Item 745</li>
  <li>Item 746</li>
  <li>Item 747</li>
  <li>Item 748</li>
  <li>Item 749</li>
  <li>Item 750</li>
  <li>Item 751</li>
  <li>Item 752</li>
  <li>Item 753</li>
  <li>Item 754</li>
  <li>Item 755</li>
  <li>Item 756</li>
  <li>Item 757</li>
  <li>Item 758</li>
  <li>Item 759</li>
  <li>Item 760</li>
  <li>Item 761</li>
  <li>Item 762</li>
  <li>Item 763</li>
  <li>Item 764</li>
  <li>Item 765</li>
  <li>Item 766</li>
  <li>Item 767</li>
  <li>Item 768</li>
  <li>Item 769</li>
  <li>Item 770</li>
  <li>Item 771</li>
  <li>Item 772</li>
  <li>Item 773</li>
  <li>Item 774</li>
  <li>Item 775</li>
  <li>Item 776</li>
  <li>Item 777</li>
  <li>Item 778</li>
  <li>Item 779</li>
  <li>Item 780</li>
  <li>Item 781</li>
  <li>Item 782</li>
  <li>Item 783</li>
  <li>Item 784</li>
  <li>Item 785</li>
  <li>Item 786</li>
  <li>Item 787</li>
  <li>Item 788</li>
  <li>Item 789</li>
  <li>Item 790</li>
  <li>Item 791</li>
  <li>Item 792</li>
  <li>Item 793</li>
  <li>Item 794</li>
  <li>Item 795</li>
  <li>Item 796</li>
  <li>Item 797</li>
  <li>Item 798</li>
  <li>Item 799</li>
  <li>Item 800</li>
  <li>Item 801</li>
  <li>Item 802</li>
  <li>Item 803</li>
  <li>Item 804</li>
  <li>Item 805</li>
  <li>Item 806</li>
  <li>Item 807</li>
  <li>Item 808</li>
  <li>Item 809</li>
  <li>Item 810</li>
  <li>Item 811</li>
  <li>Item 812</li>
  <li>Item 813</li>
  <li>Item 814</li>
  <li>Item 815</li>
  <li>Item 816</li>
  <li>Item 817</li>
  <li>Item 818</li>
  <li>Item 819</li>
  <li>Item 820</li>
  <li>Item 821</li>
  <li>Item 822</li>
  <li>Item 823</li>
  <li>Item 824</li>
  <li>Item 825</li>
  <li>Item 826</li>
  <li>Item 827</li>
  <li>Item 828</li>
  <li>Item 829</li>
  <li>Item 830</li>
  <li>Item 831</li>
  <li>Item 832</li>
  <li>Item 833</li>
  <li>Item 834</li>
  <li>Item 835</li>
  <li>Item 836</li>
  <li>Item 837</li>
  <li>Item 838</li>
  <li>Item 839</li>
  <li>Item 840</li>
  <li>Item 841</li>
  <li>Item 842</li>
  <li>Item 843</li>
  <li>Item 844</li>
  <li>Item 845</li>
  <li>Item 846</li>
  <li>Item 847</li>
  <li>Item 848</li>
  <li>Item 849</li>
  <li>Item 850</li>
  <li>Item 851</li>
  <li>Item 852</li>
  <li>Item 853</li>
  <li>Item 854</li>
  <li>Item 855</li>
  <li>Item 856</li>
  <li>Item 857</li>
  <li>Item 858</li>
  <li>Item 859</li>
  <li>Item 860</li>
  <li>Item 861</li>
  <li>Item 862</li>
  <li>Item 863</li>
  <li>Item 864</li>
  <li>Item 865</li>
  <li>Item 866</li>
  <li>Item 867</li>
  <li>Item 868</li>
  <li>Item 869</li>
  <li>Item 870</li>
  <li>Item 871</li>
  <li>Item 872</li>
  <li>Item 873</li>
  <li>Item 874</li>
  <li>Item 875</li>
  <li>Item 876</li>
  <li>Item 877</li>
  <li>Item 878</li>
  <li>Item 879</li>
  <li>Item 880</li>
  <li>Item 881</li>
  <li>Item 882</li>
  <li>Item 883</li>
  <li>Item 884</li>
  <li>Item 885</li>
  <li>Item 886</li>
  <li>Item 887</li>
  <li>Item 888</li>
  <li>Item 889</li>
  <li>Item 890</li>
  <li>Item 891</li>
  <li>Item 892</li>
  <li>Item 893</li>
  <li>Item 894</li>
  <li>Item 895</li>
  <li>Item 896</li>
  <li>Item 897</li>
  <li>Item 898</li>
  <li>Item 899</li>
  <li>Item 900</li>
  <li>Item 901</li>
  <li>Item 902</li>
  <li>Item 903</li>
  <li>Item 904</li>
  <li>Item 905</li>
  <li>Item 906</li>
  <li>Item 907</li>
  <li>Item 908</li>
  <li>Item 909</li>
  <li>Item 910</li>
  <li>Item 911</li>
  <li>Item 912</li>
  <li>Item 913</li>
  <li>Item 914</li>
  <li>Item 915</li>
  <li>Item 916</li>
  <li>Item 917</li>
  <li>Item 918</li>
  <li>Item 919</li>
  <li>Item 920</li>
  <li>Item 921</li>
  <li>Item 922</li>
  <li>Item 923</li>
  <li>Item 924</li>
  <li>Item 925</li>
  <li>Item 926</li>
  <li>Item 927</li>
  <li>Item 928</li>
  <li>Item 929</li>
  <li>Item 930</li>
  <li>Item 931</li>
  <li>Item 932</li>
  <li>Item 933</li>
  <li>Item 934</li>
  <li>Item 935</li>
  <li>Item 936</li>
  <li>Item 937</li>
  <li>Item 938</li>
  <li>Item 939</li>
  <li>Item 940</li>
  <li>Item 941</li>
  <li>Item 942</li>
  <li>Item 943</li>
  <li>Item 944</li>
  <li>Item 945</li>
  <li>Item 946</li>
  <li>Item 947</li>
  <li>Item 948</li>
  <li>Item 949</li>
  <li>Item 950</li>
  <li>Item 951</li>
  <li>Item 952</li>
  <li>Item 953</li>
  <li>Item 954</li>
  <li>Item 955</li>
  <li>Item 956</li>
  <li>Item 957</li>
  <li>Item 958</li>
  <li>Item 959</li>
  <li>Item 960</li>
  <li>Item 961</li>
  <li>Item 962</li>
  <li>Item 963</li>
  <li>Item 964</li>
  <li>Item 965</li>
  <li>Item 966</li>
  <li>Item 967</li>
  <li>Item 968</li>
  <li>Item 969</li>
  <li>Item 970</li>
  <li>Item 971</li>
  <li>Item 972</li>
  <li>Item 973</li>
  <li>Item 974</li>
  <li>Item 975</li>
  <li>Item 976</li>
  <li>Item 977</li>
  <li>Item 978</li>
  <li>Item 979</li>
  <li>Item 980</li>
  <li>Item 981</li>
  <li>Item 982</li>
  <li>Item 983</li>
  <li>Item 984</li>
  <li>Item 985</li>
  <li>Item 986</li>
  <li>Item 987</li>
  <li>Item 988</li>
  <li>Item 989</li>
  <li>Item 990</li>
  <li>Item 991</li>
  <li>Item 992</li>
  <li>Item 993</li>
  <li>Item 994</li>
  <li>Item 995</li>
  <li>Item 996</li>
  <li>Item 997</li>
  <li>Item 998</li>
  <li>Item 999</li>
  <li>Item 1000</li>
  <li>Item 1001</li>
  <li>Item 1002</li>
  <li>Item 1003</li>
  <li>Item 1004</li>
  <li>Item 1005</li>
  <li>Item 1006</li>
  <li>Item 1007</li>
  <li>Item 1008</li>
  <li>Item 1009</li>
  <li>Item 1010</li>
  <li>Item 1011</li>
  <li>Item 1012</li>
  <li>Item 1013</li>
  <li>Item 1014</li>
  <li>Item 1015</li>
  <li>Item 1016</li>
  <li>Item 1017</li>
  <li>Item 1018</li>
  <li>Item 1019</li>
  <li>Item 1020</li>
  <li>Item 1021</li>
  <li>Item 1022</li>
  <li>Item 1023</li>
  <li>Item 1024</li>
  <li>Item 1025</li>
  <li>Item 1026</li>
  <li>Item 1027</li>
  <li>Item 1028</li>
  <li>Item 1029</li>
  <li>Item 1030</li>
  <li>Item 1031</li>
  <li>Item 1032</li>
  <li>Item 1033</li>
  <li>Item 1034</li>
  <li>Item 1035</li>
  <li>Item 1036</li>
  <li>Item 1037</li>
  <li>Item 1038</li>
  <li>Item 1039</li>
  <li>Item 1040</li>
  <li>Item 1041</li>
  <li>Item 1042</li>
  <li>Item 1043</li>
  <li>Item 1044</li>
  <li>Item 1045</li>
  <li>Item 1046</li>
  <li>Item 1047</li>
  <li>Item 1048</li>
  <li>Item 1049</li>
  <li>Item 1050</li>
  <li>Item 1051</li>
  <li>Item 1052</li>
  <li>Item 1053</li>
  <li>Item 1054</li>
  <li>Item 1055</li>
  <li>Item 1056</li>
  <li>Item 1057</li>
  <li>Item 1058</li>
  <li>Item 1059</li>
  <li>Item 1060</li>
  <li>Item 1061</li>
  <li>Item 1062</li>
  <li>Item 1063</li>
  <li>Item 1064</li>
  <li>Item 1065</li>
  <li>Item 1066</li>
  <li>Item 1067</li>
  <li>Item 1068</li>
  <li>Item 1069</li>
  <li>Item 1070</li>
  <li>Item 1071</li>
  <li>Item 1072</li>
  <li>Item 1073</li>
  <li>Item 1074</li>
  <li>Item 1075</li>
  <li>Item 1076</li>
  <li>Item 1077</li>
  <li>Item 1078</li>
  <li>Item 1079</li>
  <li>Item 1080</li>
  <li>Item 1081</li>
  <li>Item 1082</li>
  <li>Item 1083</li>
  <li>Item 1084</li>
  <li>Item 1085</li>
  <li>Item 1086</li>
  <li>Item 1087</li>
  <li>Item 1088</li>
  <li>Item 1089</li>
  <li>Item 1090</li>
  <li>Item 1091</li>
  <li>Item 1092</li>
  <li>Item 1093</li>
  <li>Item 1094</li>
  <li>Item 1095</li>
  <li>Item 1096</li>
  <li>Item 1097</li>
  <li>Item 1098</li>
  <li>Item 1099</li>
  <li>Item 1100</li>
  <li>Item 1101</li>
  <li>Item 1102</li>
  <li>Item 1103</li>
  <li>Item 1104</li>
  <li>Item 1105</li>
  <li>Item 1106</li>
  <li>Item 1107</li>
  <li>Item 1108</li>
  <li>Item 1109</li>
  <li>Item 1110</li>
  <li>Item 1111</li>
</ol>

Answer 2

要格式化数字或使其可读，您可以使用Intl.NumberFormat。您的浏览器应该支持ES6。如果你已经在使用Babel那么做了。

let x = 89000000;
console.log(Intl.NumberFormat().format(x));

Answer 3

不是在元素中使用<ol> use循环，而是执行list-style: none，并显示索引编号和格式。您可以使用regEx或使用像momentJS这样的库来格式化数字。

Answer 4

试试这个 JsFiddle demo

//Javascript code (requires Jquery)

function format1(n, currency) {
  return currency + " " + n.toFixed(0).replace(/./g, function(c, i, a) {
    return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
  });
}

$(document).ready(function() {
  $("li").each(function() {
  var k=format1(parseInt($(this).text()), "");
    $(this).text(k );
  });
});

li {
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="formatThis">
  <li>1</li>
  <li>1234</li>
  <li>123423</li>
  <li>123422</li>
</ol>

修改

如果你想要十进制数字也只需要用你想要的小数位数替换0 {/ 1}}

如果您想显示为货币，例如：n.toFixed(0)只需传递$ 1,123中的货币符号

Answer 5

您可以使用$table.bootstrapTable('refresh', { query: {pageSize: 2} });与String.prototype.match() RegExp匹配所有数字字符; /\d/g在数组中插入逗号字符Array.prototype.splice()以返回结果字符串Array.prototype.join()以替换数字。 stacksnippets中的实现将逗号插入到最多包含十位数switch()

的字符串中

＆＃13;

"1000000000"

＆＃13;

function addCommaToNumber(num) {
  var n = String(num);
  var nums = n.match(/\d/g);
  var addComma = function(arr, index) {
    arr.splice(index, 0, ",");
    return arr.join("")
  }
  var res;
  switch (nums.length) {
    case 4:
      res = addComma(nums, 1);
      break;
    case 5:
      res = addComma(nums, 2);
      break;
    case 6:
      res = addComma(nums, 3);
      break;
    case 7:
      res = addComma(nums, 1);
      res = addComma(nums, 5);
      break;
    case 8:
      res = addComma(nums, 2);
      res = addComma(nums, 6);
      break;
    case 9:
      res = addComma(nums, 3);
      res = addComma(nums, 7);
      break;
    case 10:
      res = addComma(nums, 1);
      res = addComma(nums, 5);
      res = addComma(nums, 9);
      break;
    default:
      res = n;
  };
  return res
}

var ol = document.querySelector("ol");
var style = document.querySelector("style");

console.log(addCommaToNumber(1));

[10, "100", 1000, "10000", "100000"
, 1000000, "10000000", "100000000", 1000000000]
.forEach(function(num) {
  console.log(addCommaToNumber(num))
});

setTimeout(function() {
  console.clear();
  var keys = Array.from(Array(2001).keys());
  var i = 0;
  var raf = requestAnimationFrame(function addItem() {
    if (i < keys.length) {
      ol.innerHTML += `<li>${addCommaToNumber(i)}</li>`;
      // style.textContent += `li:nth-child(${i}):before{`
                               + `content:"${addCommaToNumber(i)} "`
                               + `}`;
      ++i;
      requestAnimationFrame(addItem)
    } else {
      cancelAnimationFrame(raf)
      
    }
  })
}, 1500);

＆＃13;

li {
  list-style:none;
}

＆＃13;

在HTML中的有序列表中为大数字添加逗号

5 个答案: