用js做一个许愿墙
許愿墻可以新發(fā)布，可以刪除，可以拖動(dòng)。
<!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="隨便說說吧...點(diǎn)擊確認(rèn)按鈕發(fā)布"><button class="comfirmBtn">點(diǎn)擊發(fā)布</button><script>// 獲取DOM元素let container = document.getElementsByClassName('container')[0];let btn = document.getElementsByClassName('comfirmBtn')[0];// 默認(rèn)的許愿單文字let wishes = ['新年來好運(yùn)', '能找一份好工作', '日語等級(jí)考試通過', '能交上女朋友', '新年來好運(yùn)', '能找一份好工作', '日語等級(jí)考試通過', '能交上女朋友'];// 許愿單隨機(jī)背景顏色let bgcColors = ['#96c2f1', '#bbe1f1', '#e3e197', '#f8b3d0', '#ffcc00', 'rgba(255,123,123,1)', 'yellowgreen', 'pink', 'skyblue'];// 渲染函數(shù) 新增一個(gè)div元素 做好css配置以后將該div返回let render = function (wish) {// 生成隨機(jī)數(shù)據(jù)let bgcColorIndex = Math.floor(Math.random() * bgcColors.length);let randomTop = Math.floor(Math.random() * (630 - 150)); // container容器的高減去150let randomLeft = Math.floor(Math.random() * (window.innerWidth - 175)); // left值在減去盒子寬度150的基礎(chǔ)上多減去了25pxlet content = `<div class="item" style="top:${randomTop}px;left:${randomLeft}px;background-color:${bgcColors[bgcColorIndex]}">${wish}<span>關(guān)閉</span></div>`;container.innerHTML += content;}// 頁面剛開始加載時(shí) 將默認(rèn)的許愿單加載到頁面上window.onload = function () {// 遍歷所有默認(rèn)的許愿單 將其渲染到頁面上面for (let i = 0; i < wishes.length; i++) {render(wishes[i]);}}// 發(fā)布新內(nèi)容函數(shù)let newContent = function () {if (res.value !== '') {let inputText = res.value;render(inputText);res.value = '';} else {alert('不能為空！');}}// 有兩種方式可以添加新的愿望 按回車鍵 或者 點(diǎn)擊發(fā)布按鈕document.onkeyup = function (e) {if (e.keyCode === 13) {newContent();}}// 為確認(rèn)按鈕添加點(diǎn)擊事件btn.onclick = newContent;// 通過事件委托 給整個(gè)document綁定點(diǎn)擊事件 但是只有點(diǎn)擊span元素的時(shí)候 移除其父節(jié)點(diǎn)document.onclick = function (e) {if (e.target.nodeName === 'SPAN') {container.removeChild(e.target.parentNode);}}// 設(shè)置許愿單拖動(dòng)container.onmousedown = function (e) {if (e.target.className === 'item') {let offsetX = parseInt(e.target.style.left); // 獲取當(dāng)前的x軸距離let offsetY = parseInt(e.target.style.top); // 獲取當(dāng)前的y軸距離let innerX = event.clientX - offsetX; // 獲取鼠標(biāo)在方塊內(nèi)的x軸距l(xiāng)et innerY = event.clientY - offsetY; // 獲取鼠標(biāo)在方塊內(nèi)的y軸距l(xiāng)et 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>
轉(zhuǎn)載于:https://www.cnblogs.com/gao2/p/11528713.html
總結(jié)
- 上一篇： 社保公积金提取转移手续
- 下一篇： linpack测试软件,【分享】linp