许愿墙js简易版代码

Posted 2022-09-20 caoxiangwang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了许愿墙js简易版代码相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>

<head>

<style>

margin: 0;

padding: 0;

html

height: 100%;

background: linear-gradient(0deg, rgb(171, 212, 238), deepskyblue);

body

position: relative;

.container

width: 100%;

height: 630px;

position: relative;

input[id="res"]

width: 300px;

height: 40px;

position: fixed;

bottom: 30px;

left: 50%;

margin-left: -150px;

padding-left: 15px;

border: 1px solid #ccc;

outline: none;

border-radius: 5px;

.item

width: 150px;

height: 150px;

position: absolute;

top: 100px;

left: 100px;

box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);

padding: 10px;

border-radius: 15px/5px 10px 10px 0;

transform: skew(-1deg);

cursor: move;

.item span

position: absolute;

right: 6px;

bottom: 4px;

font-size: 12px;

color: #eee;

cursor: pointer;

.comfirmBtn

width: 100px;

height: 40px;

position: fixed;

bottom: 31px;

left: 64%;

border: none;

outline: none;

border:1px solid;

border-radius: 10px;

cursor: pointer;

</style>

</head>

<body>

// 获取DOM元素

let container = document.getElementsByClassName(‘container‘)[0];

let btn = document.getElementsByClassName(‘comfirmBtn‘)[0];

// 默认的许愿单文字

let wishes = [‘新年来好运‘, ‘能找一份好工作‘, ‘日语等级考试通过‘, ‘能交上女朋友‘, ‘新年来好运‘, ‘能找一份好工作‘, ‘日语等级考试通过‘, ‘能交上女朋友‘];

// 许愿单随机背景颜色

let bgcColors = [‘#96c2f1‘, ‘#bbe1f1‘, ‘#e3e197‘, ‘#f8b3d0‘, ‘#ffcc00‘, ‘rgba(255,123,123,1)‘, ‘yellowgreen‘, ‘pink‘, ‘skyblue‘];

// 渲染函数新增一个div元素做好css配置以后将该div返回

let render = function (wish)

// 生成随机数据

let bgcColorIndex = Math.floor(Math.random() * bgcColors.length);

let randomTop = Math.floor(Math.random() * (630 - 150)); // container容器的高减去150

let randomLeft = Math.floor(Math.random() * (window.innerWidth - 175)); // left值在减去盒子宽度150的基础上多减去了25px

let content = `<div class="item" style="top:$randomToppx;left:$randomLeftpx;">$bgcColors[bgcColorIndex]">$wish<span>关闭</span></div>`;

container.innerHTML += content;

// 页面刚开始加载时将默认的许愿单加载到页面上

window.onload = function ()

// 遍历所有默认的许愿单将其渲染到页面上面

for (let i = 0; i < wishes.length; i++)

render(wishes[i]);

// 发布新内容函数

let newContent = function ()

if (res.value !== ‘‘)

let inputText = res.value;

render(inputText);

res.value = ‘‘;

else

alert(‘不能为空！‘);

// 有两种方式可以添加新的愿望按回车键或者点击发布按钮

document.onkeyup = function (e)

if (e.keyCode === 13)

newContent();

// 为确认按钮添加点击事件

btn.onclick = newContent;

// 通过事件委托给整个document绑定点击事件但是只有点击span元素的时候移除其父节点

document.onclick = function (e)

if (e.target.nodeName === ‘SPAN‘)

container.removeChild(e.target.parentNode);

// 设置许愿单拖动

container.onmousedown = function (e)

if (e.target.className === ‘item‘)

let offsetX = parseInt(e.target.style.left); // 获取当前的x轴距离

let offsetY = parseInt(e.target.style.top); // 获取当前的y轴距离

let innerX = event.clientX - offsetX; // 获取鼠标在方块内的x轴距

let innerY = event.clientY - offsetY; // 获取鼠标在方块内的y轴距

let that = e.target;

document.onmousemove = function (e)

that.style.left = event.clientX - innerX + "px";

that.style.top = event.clientY - innerY + "px";

// 边界判断

if (parseInt(that.style.left) <= 0) // 左边边界

that.style.left = "0px";

if (parseInt(that.style.top) <= 0) // 上边边界

that.style.top = "0px";

if (parseInt(that.style.left) >= window.innerWidth - 175) // 右边边界 = 窗口宽度 - 盒子大小稍微多减去了25px

that.style.left = window.innerWidth - 175 + "px";

if (parseInt(that.style.top) >= 480) // 下边边界 = 630 - 150

that.style.top = 480 + "px";

document.onmouseup = function ()

document.onmousemove = null;

document.onmouseup = null;

</script>

</body>

</html>

以上是关于许愿墙js简易版代码的主要内容，如果未能解决你的问题，请参考以下文章