520必备---程序员也可以很浪漫

绝地灬酷狼 2023-02-09 14:15 22阅读 0赞

明天就是520了，所以呢写了个小demo，用来表白也不失为一个很好的选择，先看一下效果吧，不能放gif图，超过了最大限制，具体效果可以克隆下来代码然后运行就可以啦  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTk3NTU0_size_16_color_FFFFFF_t_70]代码放到github上了：`https://github.com/caohongyu-crypto/Love-520`

### HTML部分 ###

html部分很简单，这个demo其实是两个小demo组合成的，所以大家拿到代码完全可以自己DIY

背景的代码雨使用canvas写的，时钟的元素都是通过js动态添加的

### JS部分 ###

先看canvas的js部分

//设置画布的大小
    const s = window.screen;
    const w = (q.width = s.width);
    const h = (q.height = s.height);
    //获取画笔
    const ctx = q.getContext("2d");
    
    //生成一个数组，并用0填充
    const p = Array(Math.floor(w / 10) + 1).fill(0);
    
    //随机生成字符串中的字符
    const random = (items) => items[Math.floor(Math.random() * items.length)];
    
    // const hex = "0123456789ABCDEF".split("");
    const hex = "2020520 爱的名字❥".split("");
    
    //开启一个定时器，然后循环生成
    setInterval(() => { 
      ctx.fillStyle = "rgba(0,0,0,.05)";//背景颜色
      ctx.fillRect(0, 0, w, h);//画布大小
    // ctx.fillStyle = "#0f0";
      ctx.fillStyle = "#FF83FA";//字符的颜色
      //生成字符并填充到画布
      p.map((v, i) => { 
        ctx.fillText(random(hex), i * 10, v);
        p[i] = v >= h || v > 50 + 10000 * Math.random() ? 0 : v + 10;
      });
    }, 1500 / 30);

时钟部分的js代码是比较多的

var monthText = ["一月", "二月", "三月", "四月", "时时", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
    var dayText = ["一号", "二号", "三号", "四号", "五号", "六号", "七号", "八号", "九号", "十号", "十一号", "十二号", "十三号", "十四号", "十五号", "十六号", "十七号", "十八号", "刻刻", "二十号", "二十一号", "二十二号", "二十三号", "二十四号", "二十五号", "二十六号", "二十七号", "二十八号", "二十九号", "三十号", "三十一号"];
    var weekText = ["星期日", "星期一", "LoveYou", "星期三", "星期四", "星期五", "星期六"];
    var hourText = ["零点", "一点", "两点", "三点", "四点", "五点", "六点", "七点", "八点", "九点", "十点", "十一点", "十二点", "十三点", "十四点", "十五点", "十六点", "十七点", "十八点", "十九点", "二十点", "二十一点", "二十二点", "二十三点"];
    var minuteText = ["一分", "二分", "三分", "四分", "五分", "六分", "七分", "八分", "九分", "十分",
        "十一分", "十二分", "十三分", "十四分", "十五分", "十六分", "十七分", "十八分", "十九分", "二十分",
        "二十一分", "二十二分", "二十三分", "二十四分", "二十五分", "二十六分", "二十七分", "二十八分", "二十九分", "三十分",
        "三十一分", "三十二分", "三十三分", "三十四分", "三十五分", "三十六分", "三十七分", "三十八分", "三十九分", "四十分",
        "四十一分", "四十二分", "四十三分", "四十四分", "四十五分", "四十六分", "四十七分", "四十八分", "四十九分", "五十分",
        "五十一分", "五十二分", "五十三分", "五十四分", "五十五分", "五十六分", "五十七分", "五十八分", "五十九分", "六十分"];
    var secondsText = ["一秒", "二秒", "三秒", "四秒", "五秒", "六秒", "七秒", "八秒", "九秒", "十秒",
        "十一秒", "十二秒", "十三秒", "十四秒", "十五秒", "十六秒", "十七秒", "十八秒", "十九秒", "二十秒",
        "二十一秒", "二十二秒", "二十三秒", "二十四秒", "二十五秒", "二十六秒", "二十七秒", "二十八秒", "二十九秒", "三十秒",
        "三十一秒", "三十二秒", "三十三秒", "三十四秒", "三十五秒", "三十六秒", "三十七秒", "三十八秒", "三十九秒", "四十秒",
        "四十一秒", "四十二秒", "四十三秒", "四十四秒", "四十五秒", "四十六秒", "四十七秒", "四十八秒", "四十九秒", "五十秒",
        "五十一秒", "五十二秒", "五十三秒", "五十四秒", "五十五秒", "五十六秒", "五十七秒", "五十八秒", "五十九秒", "六十秒"];

上面代码是存放所有的月、日、星期、时、分、秒的，都是存放在数组中

var clock;
    // 存放dom元素的数组 
    var monthList = [];
    var dayList = [];
    var weekList = [];
    var hourList = [];
    var minuteList = [];
    var secondsList = [];
    
    // 当前展示是否为圆形
    var isCircle = false;
    
    //二维数组 存放文字内容及页面显示标签 
    var textSet = [
        [monthText, monthList],
        [dayText, dayList],
        [weekText, weekList],
        [hourText, hourList],
        [minuteText, minuteList],
        [secondsText, secondsList]
    ];

上面代码将所有时间数组存放在一个textSet数组中，形成一个二维数组

上面代码是初始加载时执行的初始化函数

// 初始化函数
    function init() { 
        clock = document.getElementById('clock');
        // 生成标签 存放文字展示
        for (var i = 0; i < textSet.length; i++) { 
            for (var j = 0; j < textSet[i][0].length; j++) { 
                var temp = createLabel(textSet[i][0][j]);
                clock.appendChild(temp);
                // 将生成的标签存放在数组list中
                textSet[i][1].push(temp);
            }
        }
    
    }
    // 创建标签并将文字填充标签内 接收参数为文字内容 
    function createLabel(text) { 
        var div = document.createElement('div');
        div.classList.add('label');
        div.innerText = text;
        return div;
    }

上面代码根据二维数组内容生成div标签，并用一个数组存放，此时渲染到页面上不是圆形，是按顺序摆放，如下图：  
![在这里插入图片描述][20200519121358894.png]

以上代码是设置时钟编程圆形，时钟内元素的样式以及时钟的位置。

可能我做到不好看，我实在是没啥美感，所以可以自行设计哈。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTk3NTU0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200519115749378.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTk3NTU0,size_16,color_FFFFFF,t_70
[20200519121358894.png]: https://img-blog.csdnimg.cn/20200519121358894.png