web 给大家分享一个好玩的东西,也许你那块就用的到
先看效果:
就这个效果。当你点击右上角的删除按钮,会删除掉item1。
上代码:
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.central {
/* 利用绝对定位和flex实现居中 */
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: auto;
width: 50%;
height: 80%;
background-color: antiquewhite;
/* 居中效果结束 */ display: flex;
flex-direction: column;
/* 垂直排列 */
/* 与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐。也就是上下居中 */
align-items: center;
/* 居中排列,水平方向 */
justify-content: center;
} #pop_div {
background-color: #F6F6F6;
width: 60px;
height: 60px;
border-radius: 30px; /* 用边框半径实现圆形div */
text-align: center;
line-height: 60px;
outline: none;
font-size: 30px;
color: #C4C6C7;
} #pop_div:hover {
cursor: pointer; /* 当鼠标移动到标签上是,自动变成手指形状 */
} .add_item {
background-color: #F6F6F6;
width: 60px;
height: 60px;
border-radius: 30px;
text-align: center;
line-height: 60px;
outline: none;
font-size: 10px;
color: #C4C6C7;
} .btn_delete {
position: relative;
float: right;
right: 0px;
top: 0px;
width: 20px;
height: 20px;
border-radius: 10px;
outline: none;
border: none;
cursor: pointer;
} .hide_div {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: auto;
width: 100%;
height: 100%; display: none; /* 显示方式:none(标签不显示) */
background-color: rgba(194, 195, 201, 0.7); /* 实现半透明北京,0.7代表不透明度 */
} .hide_div div {
cursor: pointer;
}
</style>
</head> <body>
<div class="central">
<div id="panel"></div>
<div id="pop_div" title="添加" onclick="popDiv();">+</div>
</div>
<div id="hide_div" class="hide_div">
<div id="item1" onclick="itemClick('item1');">item1</div>
<div id="item2" onclick="itemClick('item2');">item2</div>
<div id="item3" onclick="itemClick('item3');">item3</div>
<div id="item4" onclick="itemClick('item4');">item4</div>
<div id="item5" onclick="itemClick('item5');">item5</div>
</div>
<script>
function popDiv() {
// alert("将要弹出一个div");
var vardiv = document.getElementById("hide_div");
vardiv.style.display = "flex";
vardiv.style.flexDirection = "column";
vardiv.style.justifyContent = "center";
vardiv.style.alignItems = "center";
// vardiv.onclick = itemClick;
} function itemClick(item) {
var text = document.getElementById(item).innerHTML; /* 获取元素html属性返回string */
// alert(text);
var vardiv = document.getElementById("hide_div");
vardiv.style.display = "none";
addElementToHtml(text);
} var index = 0;
function addElementToHtml(text) {
// 判断是否已经存在这个id的标签
if (null != document.getElementById(text + "_p")) {
alert('不能重复添加...');
return;
} // 创建一个p标签,设置属性
var p = document.createElement('p');
p.id = text + "_p";
p.innerHTML = text;
p.className = "add_item"; // 创建一个input标签,设置属性
var btnDel = document.createElement('input');
btnDel.type = 'button';
btnDel.value = '×';
btnDel.title = "删除";
btnDel.className = "btn_delete"; // 绑定删除按钮删除事件
btnDel.onclick = function () {
// alert("将删除" + this.parentNode.id + "标签及子标签...");
this.parentNode.parentNode.removeChild(this.parentNode); /* 首先要找到要删除节点的父节点,然后通过父节点才能删除自己 */
}; // 添加删除按钮到p标签中
p.appendChild(btnDel); var panel = document.getElementById("panel");
panel.appendChild(p);
}
</script>
</body> </html>
web 给大家分享一个好玩的东西,也许你那块就用的到的更多相关文章
- C# PDF Page操作——设置页面切换按钮 C# 添加、读取Word脚注尾注 C#为什么不能像C/C++一样的支持函数只读传参 web 给大家分享一个好玩的东西,也许你那块就用的到
C# PDF Page操作——设置页面切换按钮 概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者 ...
- 发现一个好玩的东西 Web Scraper
是一个 Chrome 的扩展程序,机智的小爬虫
- 2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
- 分享一个刷网页PV的python小脚本
下面分享一个小脚本,用来刷网页PV. [root@huanqiu ~]# cat www.py #!/usr/bin/python# coding: UTF-8import webbrowser as ...
- Git.Framework 框架随手记-- 分享一个"比较垃圾"的项目
本文主要分享一个Git.Framework 开发的一个项目的部分源码,此项目代码"比较垃圾",所以请各位码农,码畜,码神,码圣勿喷!发此文只为记录工作问题以及分享问题! 一. 项目 ...
- 文件系统:介绍一个高大上的东西 - 零基础入门学习Python030
文件系统:介绍一个高大上的东西 让编程改变世界 Change the world by program 接下来我们会介绍跟Python的文件相关的一些十分有用的模块.模块是什么?不知大家对以下代码还有 ...
- 分享一个c#写的开源分布式消息队列equeue
分享一个c#写的开源分布式消息队列equeue 前言 equeue消息队列中的专业术语 Topic Queue Producer Consumer Consumer Group Broker 集群消费 ...
- 【开源.NET】 分享一个前后端分离的轻量级内容管理框架
开发框架要考虑的面太多了:安全.稳定.性能.效率.扩展.整洁,还要经得起实践的考验,从零开发一个可用的框架,是很耗时费神的工作.网上很多开源的框架,为何还要自己开发?我是基于以下两点: 没找到合适的: ...
- [UWP]分享一个基于HSV色轮的调色板应用
1. 前言 上一篇文章介绍了HSV色轮,这次分享一个基于HSV色轮的调色板应用,应用地址:ColorfulBox - Microsoft Store 2. 功能 ColorfulBox是Adobe 色 ...
随机推荐
- 给iOS开发新手送点福利,简述UISwitch的属性和用法
UISwitch属性 1. onTintColor 处于on时switch 的颜色 switchImage.onTintColor = [UIColor grayColor]; 2.tintC ...
- jquery文件的引入
上节课说到,一般情况下,是库的文件,该库中都会抛出来构造函数或者对象 ,如果是构造函数,那么创建对象,如果是对象直接调用属性和方法 使用jquery第一步,先引入jquery,然后再写相应的jquer ...
- 20165233 Java第五、六章学习总结
20165233 2017-2018-2 <Java程序设计>第四周学习总结 教材学习内容总结 ch05 子类与父类以及子类的继承性 一个子类只能有一个父类 使用extends关键字定义子 ...
- 好记性不如烂笔头-linux学习笔记1
好记性不如烂笔头-linux学习笔记1 linux的文件系统有ext2,ext3,ext4,目前主流是ext4 linux主要用于服务器级别的操作系统,安装时需要至少2个分区 一个是交换分区,swap ...
- VsCode中vim插件剪切板等问题
剪切板共享 这个挺重要的,否则每次右键菜单复制粘贴会奔溃的. 在用户设置中添加: "vim.useSystemClipboard": true, 光标的变化 我觉得这个也重要,毕竟 ...
- Spring Boot 16 条最佳实践
Spring Boot是最流行的用于开发微服务的Java框架.在本文中,我将与你分享自2016年以来我在专业开发中使用Spring Boot所采用的最佳实践.这些内容是基于我的个人经验和一些熟知的Sp ...
- apache启动不了, 查找错误
今天apache启动不了, 本来以为是端口冲突, 用 cmd-> netstat -aon|findstr "80" 或 tasklist|findstr "80 ...
- 光圈、曝光、ISO
光圈大小对景深的影响: 光圈大小示意图(值越小光圈越大) 光圈.曝光.ISO对图像效果影响
- docker国内registry
cat /etc/docker/daemon.json {"registry-mirrors": ["http://4d6b2eb7.m.daocloud.io" ...
- 股票F10
[股票F10] 股票非行情类的基本面资料统称为股票F10 在各种金融行情终端软件中,用户通过键盘上的F10快捷键,可迅速查看上市公司的非行情信息,诸如:公司概况.财务数据.公司公告.公司新闻.经营 ...