margin:0;
}
.paper {
position: fixed;
left: 200px;
top: 200px;
width: 200px;
height: 200px;
padding: 20px;
background: yellow;
border-radius: 5px;
box-sizing: border-box;
cursor: pointer;
}
.close {
display: block;
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 50%;
position: absolute;
top: 5px;
right: 5px;
text-align: center;
background: #008c8c;
}
.inpWords {
width: 300px;
height: 50px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
padding: 20px;
position: fixed;
left:0;
right:0;
margin: auto;
bottom: 10px;
line-height: 50px;
font-size: 20px;
}
var paperWidth = 200,
paperHeight= 200; //愿望签的宽度和高度
var zIndex = 1; //愿望签层叠关系值
var viewWidth = document.documentElement.clientwidth, //记录初始化时浏览器可视窗口的宽度
viewHeight = document.documentElement.clientHeight; //记录初始化时浏览器可视窗口的高度
var hope = document.querySelector(".inpWords");var wall = document.querySelector(".wall");
hope.οnblur= function () { //输入框失去焦点,创建愿望签
createHope(hope.value);
}
hope.οnkeydοwn= function (e) { //按下回车键也可以创建愿望签
if (e.key === "Enter") {
createHope(hope.value);
}
}
window.οnmοusedοwn= function (e) { //为愿望签注册鼠标事件
var divHope = getHopeDiv(e.target); //获取到点击的愿望签的dom对象
if (!divHope) { //点击的不是愿望签
return;
}
divHope.style.zIndex= zIndex; //拖拽的愿望签可以覆盖其他愿望签
zIndex++;var div =window.getComputedStyle(divHope);var hopeLeft =parseFloat(div.left);var hopeTop =parseFloat(div.top);var pageX =e.pageX;var pageY =e.pageY;
window.οnmοusemοve= function (e) { //移动愿望签
var disX = e.pageX -pageX;var disY = e.pageY -pageY;var newLeft = hopeLeft +disX;var newTop = hopeTop +disY;//愿望签移动的边界限制,不能超出浏览器视口
if (newLeft < 0) { //最左
newLeft = 0;
}if (newLeft > document.documentElement.clientWidth - paperWidth) { //最右
newLeft = document.documentElement.clientWidth - paperWidth; //浏览器视口宽度 - 愿望签宽度
}if (newTop < 0) { //最上
newTop = 0;
}if (newTop > document.documentElement.clientHeight - paperHeight - 80) { //最下
newTop = document.documentElement.clientHeight - paperHeight -
80; //浏览器视口高度 - 愿望签高度 - 底部许愿输入框占用的一定高度80
}
divHope.style.left= newLeft + "px";
divHope.style.top= newTop + "px";
}
window.οnmοuseup= window.onmouseleave = function () { //鼠标按键抬起或离开愿望签,愿望签不在移动
window.onmousemove = null;
}
}//注册点击关闭愿望签事件
window.onclick = function(e) {if (e.target.parentElement && e.target.parentElement.className === "paper" && e.target.tagName ===
"SPAN") {
e.target.parentElement.remove();
}
}//愿望签的位置随着浏览器可视窗口大小改变
window.onresize = function() {var viewDisX = document.documentElement.clientWidth - viewWidth, //记录浏览器可视宽度的改变量
viewDisY = document.documentElement.clientHeight - viewHeight; //记录浏览器可视高度的改变量
//所有的愿望签都要重新调整位置
for (var i = 0; i < wall.children.length; i++) {var hope =wall.children[i];var left = parseFloat(hope.style.left); //获取浏览器尺寸改变前,愿望签左上角距离浏览器左边边界的距离
var right = viewWidth - paperWidth - left; //获取浏览器尺寸改变前,愿望签右下角距离浏览器右边边界的距离
var newLeft = left + left / (left + right) * viewDisX; //新的left值 等于之前的left值+按比例变化的值
hope.style.left = newLeft + "px";var top = parseFloat(hope.style.top); //获取浏览器尺寸改变前,愿望签左上角距离浏览器上边边界的距离
var bottom = viewHeight - paperHeight - top; //获取浏览器尺寸改变前,愿望签右下角距离浏览器下边边界的距离
var newTop = top + top / (top + bottom) * viewDisY;//新的top值 等于之前的top值+按比例变化的值
hope.style.top = newTop + "px";
}
viewWidth= document.documentElement.clientWidth; //将当前浏览器可视宽度覆盖之前的值
viewHeight = document.documentElement.clientHeight; //将当前浏览器可视高度覆盖之前的值
}//创建愿望签
functioncreateHope(words) {if(words) {var divWall = document.querySelector(".wall");var divHope = document.createElement("div");
divHope.className= "paper";
divHope.innerHTML= `
${words}
X`;var maxLeft = document.documentElement.clientWidth - paperWidth; //浏览器视口宽度 - 愿望签宽度var maxTop = document.documentElement.clientHeight - paperHeight -
80; //浏览器视口高度 - 愿望签高度 - 底部许愿输入框占用的一定高度80
divHope.style.background =`rgb(${getRandom(100, 200)},${getRandom(100, 200)},${getRandom(100, 200)})`; //愿望签背景色随机生成
divHope.style.left = getRandom(0, maxLeft) + "px";
divHope.style.top= getRandom(0, maxTop) + "px";
divWall.appendChild(divHope);
hope.value= "";
}
}//获得一个[min, max]区间的随机数
functiongetRandom(min, max) {return Math.floor(Math.random() * (max + 1 - min)) +min;
}//获取到鼠标点击的愿望签dom对象
functiongetHopeDiv(dom) {if (dom.className === "paper") { //事件源是愿望签的div
returndom;
}else if (dom.parentElement && dom.parentElement.className === "paper" && dom.tagName ===
"P") { //点击的是div里面的P元素
returndom.parentElement;
}
}//初始化的时候,先创建两个愿望签
functioninitWall() {var hopeArray = ["梦想成真", "身体健康"];
hopeArray.forEach(function(item) {
createHope(item);
});
}
initWall();