-
可可西里2020-01-01 00:00
- 24
- 0
想实现一个效果
页面是空的
点击＋号 加DIV ，
然后点击这些生成的div中的任意一个 ，弹出下标 该怎么弄？
附上我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#container{
width: 800px;
height: 500px;
border: 1px solid #ddd;
margin: 100px auto;
}
.square{
width: 100px;
height: 100px;
background: #5B9BD5;
color: #fff;
font-size: 20px;
font-weight: bold;
margin: 40px 0 0 40px;
float: left;
cursor: pointer;
}
#btn1{
width: 100px;
height: 100px;
border: 1px dashed #000;
font-size: 50px;
font-weight: bold;
cursor: pointer;
line-height: 100px;
text-align: center;
margin: 40px 0 0 40px;
float: left;
}
.alert{
width: 100%;
height: 100%;
background: #ccc;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.alert div{
width: 600px;
height: 400px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 3;
border: 1px solid #000;
background: #fff;
}
.alert input{
width: 100px;
}
</style></head>
<body>
<div id="container">
<div id="btn1">+</div>
</div>
<div class="alert" style="display: none">
<div>
<input type="text" >
<button onclick="back()">取消</button>
<button onclick="add()">确定</button>
</div>
</div>
<script type="text/javascript">
var btn1=document.getElementById('btn1');
var ct=document.getElementById('container');
var al=document.getElementsByClassName('alert')[0];
var res=document.getElementsByTagName('input')[0];
var sq_arr=[];
var number=0;
btn1.onclick=function(){
if(number>13){
return
}else{
// createSQ();
al.style.display="block";
}
}
function add(){
var sValue=res.value;
al.style.display="none";
createSQ(sValue);
}
function back(){
al.style.display="none";
}
function createSQ(value){
var ndiv=document.createElement('div');
ndiv.setAttribute("class",'square');
ndiv.innerHTML=value;
// ct.insertBefore(ndiv,btn1)
sq_arr.push(number);
ct.insertBefore(ndiv,btn1);
number++;
console.log(sq_arr);
}
// 获取所有的div
var aSq=document.getElementsByClassName('square');
for(let i=0;i<aSq.length;i++){
aSq[i].addEventListener("click",function(){
console.log('123');
})
}
</script>
</body>
</html>
0
打赏
收藏
点击回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部