“ PK创意闹新春,我正在参加「春节创意投稿大赛」,详情请看:春节创意投稿大赛”
前言
虎年来了,小朋友,大朋友们都有大大小小的愿望。来吧,作为前端小小白的我用css+js写了一个新春许愿墙,大家快来许愿吧
css部分
简单说说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('输入不能为空哦')
}
}
复制代码
说到这里,许愿墙还有改进的部分,存储留言的数据在数据库中,可以让用户都能看到其他人留言的内容。