用JavaScript制作动态表白页面

div {
    width: 200px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}

* {
    margin: 0;
    padding: 0;
}

//表白话语
let count =['我爱你','想你了','想见你','等你回来','你是我的唯一','永远在一起','思念如潮','心中有你','每天都想你','无法忘记你','期待与你相见','你是我的阳光','爱你无条件','陪伴是最长情的告白','你是我生命的意义','每时每刻都想你','心跳为你加速','与你共度美好时光','爱意满满','你是我最珍贵的宝藏'];

//背景颜色
let colors = ['#FF5733','#33FF57','#3357FF','#F333FF','#33FFF5','#F5FF33','#FF33A8','#A833FF','#33FFA8','#FFA833'];

let i = 100 //盒子数量
let time = setInterval(() => {
    const hzh = document.createElement('div') //创建div盒子
    hzh.textContent = count[Math.floor(Math.random() * count.length)];//选取随机文字
    //设置盒子样式
    hzh.style.position = 'absolute';//绝对定位 
    hzh.style.left = Math.random() * (window.innerWidth - 200) + 'px';//屏幕宽度减去自身的宽度
    hzh.style.top = Math.random() * (window.innerHeight - 100) + 'px';//屏幕高度减去自身的宽高
    hzh.style.transition = 'all 0.3s ease';//添加动画效果
    hzh.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];//选取随机颜色
    hzh.style.opacity = '0'; // 初始透明度
    document.body.appendChild(hzh);//将创建的元素添加到页面body中

    setTimeout(() => {
        hzh.style.opacity = '1'; //最终透明度
    }, 100);

    if (i-- < 0) {
        clearInterval(time)//清除定时器
    }
}, 20);