效果图:(我用的是layui框架)
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>增加标签</title>
</head>
<body>
<!-- 增加时间段的设计 -->
<div class="quantum">
<div class="layui-form-item">
<label class="layui-form-label">开始时间:</label>
<div class="layui-input-inline">
<input type="time" name="brgin[]" value="" placeholder="设置开始时间" required="required" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">设置活动开始时间</div>
<label class="layui-form-label">结束时间:</label>
<div class="layui-input-inline">
<input type="time" name="finish[]" value="" placeholder="设置结束时间" required="required" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">设置活动结束时间</div>
</div>
</div>
<button type="button" class="layui-btn layui-btn-normal left" id="add">增加时间规则</button>
<button type="button" class="layui-btn layui-btn-danger" id="reduce">删除时间规则</button><br><br>
</body>
</html>
js代码:
<!-- 增加时间段js -->
<script>
var number = 0;
var maximum = document.querySelector('.quantum'); //找到最大的div
var add = document.querySelector('#add'); //找到第三个第一个按钮
add.onclick = function() {
var newly = document.createElement('div');
maximum.appendChild(newly);
number++;
newly.innerHTML =
`<div class="layui-form-item">
<label class="layui-form-label">开始时间:</label>
<div class="layui-input-inline">
<input type="time" name="brgin[]" value="" placeholder="设置开始时间" required="required"
class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">设置活动开始时间</div>
<label class="layui-form-label">结束时间:</label>
<div class="layui-input-inline">
<input type="time" name="finish[]" value="" placeholder="设置结束时间" required="required"
class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">设置活动结束时间</div>
</div> `;
}
var reduce = document.querySelector('#reduce'); //找到最后一个按钮
reduce.onclick = function() {
var last = maximum.lastElementChild;
maximum.removeChild(last); //删除节点
}
</script>
这样成功了.....解释一下 ``(反撇)这个符号,可以将我们平时写的html内容直接写进去,非常的方便,他就是tab键上面那个键,英文格式点击一下就出来了
上面是无限增加,下面设置增到最大限制
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>增加标签</title>
</head>
<body>
<!-- 增加时间段的设计 -->
<div class="quantum">
<div class="layui-form-item">
<label class="layui-form-label">开始时间:</label>
<div class="layui-input-inline">
<input type="time" name="brgin[]" value="" placeholder="设置开始时间" required="required" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">设置活动开始时间</div>
<label class="layui-form-label">结束时间:</label>
<div class="layui-input-inline">
<input type="time" name="finish[]" value="" placeholder="设置结束时间" required="required" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">设置活动结束时间</div>
</div>
</div>
<button type="button" class="layui-btn layui-btn-normal left" id="add">增加时间规则</button>
<button type="button" class="layui-btn layui-btn-danger" id="reduce">删除时间规则</button><br><br>
</body>
</html>
js代码:
<script>
var poll = $("#poll");//写隐藏input框默认值为1
$(function () {
var alls = "3";//最大到三个
if (poll.val() == 1) {
document.getElementById("reducenumber").disabled = true;
}
if (poll.val() == alls) {
document.getElementById("addnumber").disabled = true;
}
$("#addnumber").click(function () {
poll.val(parseInt(poll.val()) + 1);
if (poll.val() > alls) {
poll.val(parseInt(poll.val()) - 1);
}
if (poll.val() == alls) {
document.getElementById("addnumber").disabled = true;
}
document.getElementById("reducenumber").disabled = false;
addgroup() //执行增加分组函数
});
$("#reducenumber").click(function () {
poll.val(parseInt(poll.val()) - 1); //点击减号输入框数值减1
if (poll.val() <= 0) {
poll.val(parseInt(poll.val()) + 1); //最小值为1
}
if (poll.val() == 1) {
//当我票数框内为1的时候我的减票就不可以使用了
document.getElementById("reducenumber").disabled = true;
}
document.getElementById("addnumber").disabled = false;
reducegroup(); //执行减少分组函数
});
});
var number = 0; //声明一个变量为0 //下面用到为了区分name值这里使用
var maximum = document.querySelector('.quantum'); //找到最大的div
function addgroup() {
//声明增加分组函数
var newly = document.createElement('div'); //声明增加的标签是什么
maximum.appendChild(newly); //声明在那个标签里面增加
number++; //数字增加1 //方便input框的name值不一样
newly.innerHTML =
`<div class="layui-form-item">
<label class="layui-form-label">开始时间:</label>
<div class="layui-input-inline">
<input type="time" name="brgin[]" value="" placeholder="设置开始时间" required="required"
class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">设置活动开始时间</div>
<label class="layui-form-label">结束时间:</label>
<div class="layui-input-inline">
<input type="time" name="finish[]" value="" placeholder="设置结束时间" required="required"
class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">设置活动结束时间</div>
</div> `;
//所要增加的内容
}
function reducegroup() {
//声明减少一个分组的函数
var last = maximum.lastElementChild; //查找maximum中最后的一个div
maximum.removeChild(last); //删除节点
}
</script>