用js做一个许愿墙
作者:互联网
许愿墙可以新发布,可以删除,可以拖动。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>许愿墙</title> <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> <div class="container"></div> <input type="text" name="res" id="res" placeholder="随便说说吧...点击确认按钮发布"> <button class="comfirmBtn">点击发布</button> <script> // 获取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:${randomTop}px;left:${randomLeft}px;background-color:${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>
标签:function,style,container,一个,js,let,许愿,document,left 来源: https://www.cnblogs.com/gao2/p/11528713.html