122 lines
3.6 KiB
HTML
122 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>BiliBili下载器</title>
|
|
<link rel="stylesheet" href="layui/css/layui.css" media="all">
|
|
<meta charset="utf-8"/>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="myDiy">
|
|
<blockquote class="layui-elem-quote">日历管理
|
|
</blockquote>
|
|
|
|
<br/><br/><br/>
|
|
|
|
<div class="layui-bg-gray layui-row layui-col-space15" id="card" style="padding: 30px;">
|
|
|
|
<form class="layui-form" action="">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">日历</label>
|
|
<div class="layui-input-block">
|
|
<div id="calendar"/>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">间隔</label>
|
|
<div class="layui-input-block">
|
|
<select id="interval" lay-verify="required">
|
|
<option value=""></option>
|
|
<option value="0">相隔X天</option>
|
|
<option value="1">每周X</option>
|
|
<option value="2">每月X号</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<blockquote class="layui-elem-quote"><span id="dateText">日期选择</span>
|
|
</blockquote>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">间隔日期</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" id="day" required lay-verify="required" placeholder="天数"
|
|
autocomplete="off" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-block">
|
|
<a class="layui-btn" id="setCalendar">新增规则</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
<script src="layui/layui.js"></script>
|
|
<script src="layui/jquery-3.2.1.js"></script>
|
|
<script>
|
|
layui.use('laydate', function () {
|
|
let dayDateObj
|
|
let marks = {}
|
|
let laydate = layui.laydate;
|
|
function showLayDate() {
|
|
laydate.render({
|
|
elem: '#calendar' //指定元素
|
|
, position: 'static'
|
|
, mark: marks
|
|
, done: function (value, date, endDate) {
|
|
console.log(date)
|
|
dayDateObj=date;
|
|
$('#dateText')[0].innerHTML = "从" + date.date + "号开始计算"
|
|
|
|
}
|
|
});
|
|
}
|
|
$.get("/calendar/all.do", function (json) {
|
|
//执行一个laydate实例
|
|
marks = json.data.date;
|
|
showLayDate()
|
|
})
|
|
|
|
|
|
$('#setCalendar').click(function () {
|
|
let interval=$('#interval')[0].value
|
|
let day=$('#day')[0].value
|
|
let intervalText=$('#interval').find("option:selected").text();
|
|
intervalText=intervalText.replace('X',day)
|
|
layer.open({
|
|
title: '确认'
|
|
,content: '确认从'+dayDateObj.date+'号开始， '+intervalText+' 开始提醒？'
|
|
,yes:function (index, layero) {
|
|
|
|
}
|
|
});
|
|
|
|
})
|
|
});
|
|
</script>
|
|
<style>
|
|
.myDiy {
|
|
width: 40%;
|
|
height: 300px;
|
|
margin-top: 10px;
|
|
margin-left: 25%;
|
|
}
|
|
|
|
.button {
|
|
width: 100px;
|
|
height: 100px;
|
|
font-size: 1em;
|
|
}
|
|
|
|
</style>
|
|
|
|
</html> |