用JavaScript制作动态表白页面

前言

最近在抖音上刷到这种文字表白特效，觉得挺有意思的，就想着自己也能用代码实现一个,虽然实现得比较基础，但效果还挺像那么回事！分享出来给大家参考，也期待大佬们给出更好的实现方案～

实现效果:

在屏幕内随机出现div盒子,位置随机,内容随机选,要求动态的一个个浅出

css部分

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

* {
    margin: 0;
    padding: 0;
}

js部分:
准备数组

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

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

实现思路

1. document.createElement 来直接创建一个div盒子,用一个变量 hzh 接收
2. 给 hzh 添加css属性
3. Math.random 随机数来随机选取数组中的元素
4. setInterval 来实现盒子创建的时间差
5. setTimeout 中使用css中的 opacity 来实现盒子的浅出效果

实现步骤

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);