爱站程序员基地<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>* {padding: 0;margin: 0;word-break: break-all;}body {background: skyblue;user-select: none;}.container {position: relative;}.container>.textBtn>input {width: 300px;height: 50px;position: absolute;left: 680px;top: 600px;text-align: center;border-radius: 10px;outline: none}.container>.wishWall {width: 150px;height: 150px;border-radius: 10px;-moz-user-select:none;-webkit-user-select:none;user-select:none; ;}</style><script src=\"../util/jquery-3.3.1.js\"></script><script src=\"../util/tools.js\"></script></head><body><div class=\"container\"><div class=\"textBtn\"><input type=\"text\" name=\"\" id=\"\" placeholder=\"随便说说吧...按回车键发送\"></div></div><script>$(document).on(\"keydown\", function (e) {if (e.which === 13 || e.which === 32) {var div = $(`<div class=\'wishWall\' > <p>${$(\"input\").val()}</p> <span>X</span></div>`);$(\"p\").css({ width: \'150px\', height: \'150px\', wordBreak: \"break-all\", textIndent: \"2em\" });div.appendTo($(\"body\"));$(\"span\").css({position: \"absolute\",bottom: \"5px\",left: \"130px\",color: \"white\",})$(\"input\").val(\"\");div.css({left: Tool.random(0, 1200), top: Tool.random(0, 400),width: \'150px\', height: \'150px\',borderRadius: \'10px\',position: \"absolute\",textAlign: \"center\",background: `rgb(${[Tool.random(0, 255)]},${Tool.random(0, 255)},${Tool.random(0, 255)})`,})}$(\"span\").on(\"click\", function (e) {$(this).parent().remove();})$(\"span\").on(\"mousedown\", function (e) {e.stopPropagation(); //阻止冒泡})})$(document).on(\"mousedown\", \".wishWall\", function (e) {let oX = e.offsetX;let oY = e.offsetY;$(this).on(\"mousemove\", function (e) {const { pageX: x2, pageY: y2 } = e;$(this).css({ left: x2- oX, top: y2- oY });})})$(document).on(\"mouseup\", \".wishWall\",function (e) {$(this).off(\"mousemove\")});</script></body></html>
unil工具包
let Tool = (function () {function random(start, end) {if (arguments.length === 0) {return 0} else if (arguments.length === 1) {end = start;start = 0;} else {if (end < start) {[end, start] = [start, end]}}return parseInt(Math.random() * (end - start + 1)) + start;}function color(opcity = 1) {return `rgba(${random(ZERO, 255)},${random(ZERO, 255)},${random(ZERO, 255)},${opcity})`}function curry(func, ...args) { //函数柯里化return function (...inArgs) {const allArgs = args.concat(inArgs);if (allArgs.length >= func.length) {return func(...allArgs);}else {return curry(func, ...allArgs);}}}function debounce(func, wait) { //防抖函数let timerId = null;return function (...rag) {if (timerId) {clearTimeout(timerId);}timerId = setTimeout(() => {func(rag);}, wait);}}return { random, color,curry, debounce }})()
jquery自习在官网下载。
