效果图：（我用的是框架，这里不分享样式）
代码：
<!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 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键上面那个键，英文格式点击一下就出来了
