用js做一个许愿墙
时间:2019-09-16
本文章向大家介绍用js做一个许愿墙,主要包括用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>
原文地址:https://www.cnblogs.com/gao2/p/11528713.html
- Iptables防火墙规则使用梳理
- “正在注册字体”问题解决
- linux下安装php的swoole扩展模块(安装后php加载不出来?)
- linux下查询域名或IP注册信息的操作记录(whois)
- 域名资讯:多枚区块链域名结拍,区块链概念火热
- 一批好米交易:qrf.com15.4万元结拍
- mysql主从同步(2)-问题梳理
- 老丁独家!前方高能,与“程序崩溃”的第一次邂逅!
- 微信可接收火车购票、退票及改签等通知啦!别忘了,春运火车票下周开售!
- 如何用SPSS分析问卷?用SPSS分析调查问卷数据的方法
- 【5】基于Log4Net的日志系统
- VMware vSphere虚拟化-VMware ESXi 5.5组件安装过程记录
- 淘宝iOS端圣诞节雪花实现分析
- 【6】页面数据和控件的自动交换机制
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Zabbix监控之从Kafka中获取消费进度和lag
- 将UTC(字符串包含TZ的时间)时间转换成本地时间 python
- centos7安装telnet服务
- linux vim编辑器之环境设置
- JAVA实现UTC时间转换成北京时间
- JDK8 LocalDateTime转换成时间戳
- Grafana创建zabbix自定义template(模板)
- 一条SQL引发的“血案”:
- Grafana安装配置Elasticsearch插件
- Elasticsearch升级踩坑记之使用snapshot备份数据
- RabbitMQ的安装及集群搭建方法
- CentOs7搭建rabbitmq集群
- Rabbitmq haproxy keepalived ACCESS_REFUSED - Login was refused using authentication mechanism PLAIN.
- IDEA maven+spring mvc简单项目
- 程序员用python给了女友一个七夕惊喜!