SOURCE

let start = 0x0000, end = start;
const numDom = document.querySelector('.howmany')
const showNumDOM = document.querySelector('.showNum')
const 滚动新锚点 = document.querySelector('#滚动新锚点')

numDom.addEventListener('input',()=>{
    showNumDOM.innerHTML=numDom.value
})
function next() {
    start = end+0x0001;
    end += parseInt(numDom.value) ;
    if(end<=0xFFFF){
        addChildToBox( createChildList( generateUnicodeSequence(start, end) ) )
        setTimeout(()=>{
            window.scrollTo({
                top: 滚动新锚点.offsetTop+160, // 滚动到距离顶部 100px 的位置
                behavior: 'smooth' // 平滑滚动
            });
        },150)
       
    }
}

function generateUnicodeSequence(start , end ) {
    const unicodeList = [];
    for (let codePoint = start; codePoint <= end; codePoint++) {
        const hexCode = codePoint.toString(16).padStart(4, '0'); // 转换为 16 进制并补零
        const unicodeChar = String.fromCodePoint(codePoint); // 转换为字符
        unicodeList.push([hexCode, unicodeChar])
    }
    
    return unicodeList;
}
function createChildList(unicodeList) {
    const childDomList = []
    for (let i = 0; i < unicodeList.length; i++) {
        [hexCode, unicodeChar] = unicodeList[i]
        const code = document.createElement('span')
        const char = document.createElement('span')
        code.innerText = 'u'+hexCode
        char.innerText = unicodeChar
        const item = document.createElement('div')
        item.title='单击复制unicode，双击复制码字'
        item.classList.add('unicode')  
        item.classList.add('neumorphism')  
        item.append(code)
        item.append(char)
        childDomList.push(item)
    }
    return childDomList
}
function addChildToBox(childDomList) {
    const toDom = document.querySelector('.flex');
    requestAnimationFrame(() => {
        toDom.append(...childDomList)
    })
}
function copyAny(copyContent) {
    // 1. 创建并添加一个输入框元素(最后会销毁)
    const textareaEle = document.createElement("textarea");
    document.body.appendChild(textareaEle);
    // 2. 将需要复制的文本传入输入框, 并调用 select 方法, 选中输入框中文本
    textareaEle.value = copyContent;
    textareaEle.select();
    textareaEle.readOnly = 'readOnly';
    // 3. 调用复制选中文本的方法
    document.execCommand('copy');
    // 4. 销毁输入框
    document.body.removeChild(textareaEle);
}
document.querySelector('#getUnicode').addEventListener('click',next)
document.querySelector('.unicode-list').addEventListener('click',function (event) {
    if([...event.target.classList].includes ('unicode')){
        console.dir(event.target.firstChild.innerText)
        copyAny(event.target.firstChild.innerText)
    }
})
document.querySelector('.unicode-list').addEventListener('dblclick',function (event) {
    if([...event.target.classList].includes('unicode')){
        console.dir(event.target.lastChild.innerText)
        copyAny(event.target.lastChild.innerText)
    }
})

<div>
	<br>
</div>
<div class="flex unicode-list">
    <div class="neumorphism unicode">1</div>
    <div class="neumorphism unicode">2</div>
    
</div>
<div id="滚动新锚点"></div>

<input type="number" class="neumorphism howmany" placeholder="一次添加的个数" value="20">
<button id="getUnicode" class="neumorphism">单击添加 <span class="showNum">20</span>个unicode</button>
<input type="text" class="neumorphism test-copy" placeholder="粘贴验证复制内容" >


<script>
    
</script>

@keyframes show-in{
    from{
        transform: translate(30px,-20px) scale(1.3)
    }
    to{
        transform: translate(0,0) scale(1)
    }
}
.neumorphism{
  box-shadow: -7px -7px 20px 0px #fff9,
              -4px -4px 5px 0px #fff9,
              7px 7px 20px 0px #0002,
             inset 1px 1px 2px #fff9,
             inset -2px -2px 0px #0001,

              4px 4px 5px 0px #0001;
}
.neumorphismin,.neumorphism:active,.howmany:focus{
    box-shadow: 0px 0px 0px 0px #fff9,
              0px 0px 0px 0px #fff9,
              0px 0px 0px 0px #0001,
              0px 0px 0px 0px #0001,
              inset -7px -7px 20px 0px #fff9,
              inset -4px -4px 5px 0px #fff9,
              inset 7px 7px 20px 0px #0003,
              inset 4px 4px 5px 0px #0001;
}
body{
    /* background-color: azure;  */
}
.flex{
    display: flex;
    flex-wrap: wrap;
}

.unicode{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 40px;
    height: 40px;
    margin:  10px;
    padding: 8px;
    background: #0001;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    animation: show-in 1s forwards;
    color: seagreen;
    content-visibility:auto;
}
.unicode span{
    pointer-events: none;
}

#getUnicode{
    position: fixed;
    top: 50vh ;
    padding: 20px;
    border: none;
}
.howmany{
    position: fixed;
    top: calc(50vh - 64px);
    padding: 20px;
    border: none;
}
.test-copy{
    position: fixed;
    top: calc(50vh + 64px);
    padding: 20px;
    border: none;
}