“ PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛”

前言

虎年来了，小朋友，大朋友们都有大大小小的愿望。来吧，作为前端小小白的我用css+js写了一个新春许愿墙，大家快来许愿吧

css部分

微信图片_20220117100419.png

简单说说css部分，在我们学习各种编程语言的时候，学到越深的时候，往往会忘记浅显的内容，css基础的内容大家应该还记得吧。在这里，许愿墙的css样式主要是弹性盒 display: flex;啊，定位position，盒子阴影box-shadow:，圆角边框 border-radius:，怪异盒 box-sizing等还有背景属性。网页的好看也能吸引用户，提升用户体验，在追求炫酷功能的同时，大家也不要忘记网页的外表。

功能部分

功能一：在点击发送之后，许愿墙上能够将发送的祝福语以弹幕的形式发送

功能实现

在点击事件触发的时候，动态生成弹幕
弹幕移动的原理是什么？ 控制盒子的移动，就想到了定时器，在一个周期内改变移动的距离，相当于改变盒子的定位属性的方向的值（position: absolute; left: ;top: ;），我们来封装盒子的移动。

形参解释：ele表示要移动的对象，end表示弹幕结束的位置

 //封装弹幕移动的距离，
        function move(ele, end) {
            var second = 3
            var t = setInterval(function() {
                var eLeft = parseInt(getComputedStyle(ele).left);
                ele.style.left = eLeft - second + 'px'
                if (eLeft - second <= end) {
                    clearInterval(t)
                    ele.remove();
                    console.log(2);
                }
                console.log(1);
            }, 50)
        }
复制代码

我们再看电影的时候，弹幕生成肯定不是在同一高度生成的吧，那么怎么让盒子随机高度生成呢？ 随机高度，那当然得封装随机数。改变盒子的定位属性的top值，随机改变，进而盒子的高度也会随机改变，注意，高度的值也有界限的。
盒子自身的高度：

offsetWidth:border+padding+内容宽度
clientwidth:padding+内容宽度

 //封装随机数
        function ran(min, max) {
            return parseInt(Math.random() * (max - min) + min)
        }
复制代码

还可以改变字体的随机颜色，彩色字体


        //封装随机颜色
        function rancolor() {
            var r = ran(0, 256)
            var g = ran(0, 256)
            var b = ran(0, 256)
            return `rgb(${r},${g},${b})`
        }
复制代码

动态生成弹幕，createElement（）方法，再将其插入到显示弹幕的位置appendChild（）方法。在运用模板字符串 `` ,增加盒子里面的内容，显示里面的值用插值表达式${ }来显示。
例如，我们这里生成弹幕。这里有个技巧，先测试要增加的东西，样式，标签先写好，实现的时候再将他注释掉。

 let oP = document.createElement('p')
                oP.className = 'wall_p'
                oCont.appendChild(oP)
  //增加弹幕
                oP.innerHTML = `<img src="./images/xiaoxin_4.jpg" alt="">
            <span style="color: black; font-size: 12px;font-weight: bold;">${oInp1.value}</span>
            <span>:</span>
            <span>${oInp2.value}</span>
            `
复制代码

功能二：：在点击发送之后，许愿墙上能够将发送的祝福语以便利贴的形式保存;

功能实现：

在点击事件触发后，生成动态盒子
跟弹幕一样，生成动态盒子，但是盒子不会移动，盒子的位置，由定位属性的方向的值来固定在显示位置。当然盒子也是动态生成的，方向值也是随机生成的，范围要表示清楚。

触发点击事件之后要做的事情

oBtn.onclick = function() {
            if (oInp1.value.trim() != '' && oInp2.value.trim() != '') {
                var oP = document.createElement('p')
                var oM = document.createElement('div')
                oP.className = 'wall_p'
                oM.className = 'memo'
                oCont.appendChild(oP)
                oCont.appendChild(oM)

                //增加弹幕
                oP.innerHTML = `<img src="./images/xiaoxin_4.jpg" alt="">
            <span style="color: black; font-size: 12px;font-weight: bold;">${oInp1.value}</span>
            <span>:</span>
            <span>${oInp2.value}</span>
            `

                //增加便签
                oM.innerHTML = `
            <p class="time" >${nowdate()}</p>
                <p class="content">${oInp2.value}</p>
                <p class="name">${oInp1.value}</p>
            
            `
                oP.style.top = ran(0, oCont.clientHeight - oP.clientHeight) + 'px'
                oM.style.top = ran(0, oCont.clientHeight - oM.clientHeight) + 'px'
                oM.style.left = ran(0, oCont.clientWidth - oM.clientWidth) + 'px'

                move(oP, -oP.clientWidth)
                oP.style.color = rancolor();
                oM.style.color = rancolor();
                // oInp2.value = null
            } else {
                alert('输入不能为空哦')
            }
        }
复制代码

说到这里，许愿墙还有改进的部分，存储留言的数据在数据库中，可以让用户都能看到其他人留言的内容。

虎年来了，快来许愿吧，听说愿望会成真哦！！！

前言