222 lines
8.5 KiB
HTML
222 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Crontab 定时任务生成器</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 20px auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
background-color: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.input-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
color: #333;
|
|
}
|
|
select, input {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
.time-section {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.time-section > div {
|
|
flex: 1;
|
|
}
|
|
.result {
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
background-color: #e8f5e9;
|
|
border-radius: 4px;
|
|
}
|
|
.templates {
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
background-color: #f8f9fa;
|
|
border-radius: 4px;
|
|
}
|
|
.template-item {
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
margin: 5px 0;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
.template-item:hover {
|
|
background-color: #e9ecef;
|
|
}
|
|
.copy-btn {
|
|
background-color: #2196F3;
|
|
color: white;
|
|
padding: 5px 10px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin-left: 10px;
|
|
}
|
|
.copy-btn:hover {
|
|
background-color: #1976D2;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Crontab 定时任务生成器</h1>
|
|
|
|
<div class="time-section">
|
|
<div class="input-group">
|
|
<label for="minutes">分钟 (0-59)</label>
|
|
<select id="minutes" onchange="generateCron()">
|
|
<option value="*">每分钟 (*)</option>
|
|
<option value="*/5">每5分钟</option>
|
|
<option value="*/10">每10分钟</option>
|
|
<option value="*/15">每15分钟</option>
|
|
<option value="*/30">每30分钟</option>
|
|
<option value="0">整点 (0)</option>
|
|
<option value="custom">自定义...</option>
|
|
</select>
|
|
</div>
|
|
<div class="input-group">
|
|
<label for="hours">小时 (0-23)</label>
|
|
<select id="hours" onchange="generateCron()">
|
|
<option value="*">每小时 (*)</option>
|
|
<option value="*/2">每2小时</option>
|
|
<option value="*/3">每3小时</option>
|
|
<option value="*/4">每4小时</option>
|
|
<option value="*/6">每6小时</option>
|
|
<option value="*/12">每12小时</option>
|
|
<option value="0">午夜 (0)</option>
|
|
<option value="custom">自定义...</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="time-section">
|
|
<div class="input-group">
|
|
<label for="day">日期 (1-31)</label>
|
|
<select id="day" onchange="generateCron()">
|
|
<option value="*">每天 (*)</option>
|
|
<option value="1">每月1号</option>
|
|
<option value="15">每月15号</option>
|
|
<option value="L">每月最后一天</option>
|
|
</select>
|
|
</div>
|
|
<div class="input-group">
|
|
<label for="month">月份 (1-12)</label>
|
|
<select id="month" onchange="generateCron()">
|
|
<option value="*">每月 (*)</option>
|
|
<option value="*/2">每两月</option>
|
|
<option value="*/3">每季度</option>
|
|
<option value="*/6">每半年</option>
|
|
</select>
|
|
</div>
|
|
<div class="input-group">
|
|
<label for="weekday">星期 (0-6)</label>
|
|
<select id="weekday" onchange="generateCron()">
|
|
<option value="*">每天 (*)</option>
|
|
<option value="1-5">工作日</option>
|
|
<option value="6,0">周末</option>
|
|
<option value="1">周一</option>
|
|
<option value="2">周二</option>
|
|
<option value="3">周三</option>
|
|
<option value="4">周四</option>
|
|
<option value="5">周五</option>
|
|
<option value="6">周六</option>
|
|
<option value="0">周日</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="result">
|
|
<strong>Crontab 表达式:</strong>
|
|
<span id="cronResult">* * * * *</span>
|
|
<button class="copy-btn" onclick="copyCron()">复制</button>
|
|
</div>
|
|
|
|
<div class="templates">
|
|
<h2>常用模板</h2>
|
|
<div class="template-item" onclick="useTemplate('0 0 * * *')">每天午夜执行 (0 0 * * *)</div>
|
|
<div class="template-item" onclick="useTemplate('*/15 * * * *')">每15分钟执行 (*/15 * * * *)</div>
|
|
<div class="template-item" onclick="useTemplate('0 */2 * * *')">每2小时执行 (0 */2 * * *)</div>
|
|
<div class="template-item" onclick="useTemplate('0 9 * * 1-5')">工作日早上9点执行 (0 9 * * 1-5)</div>
|
|
<div class="template-item" onclick="useTemplate('0 0 1 * *')">每月1号午夜执行 (0 0 1 * *)</div>
|
|
<div class="template-item" onclick="useTemplate('30 2 * * *')">每天凌晨2:30执行 (30 2 * * *)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function generateCron() {
|
|
let minutes = document.getElementById('minutes').value;
|
|
let hours = document.getElementById('hours').value;
|
|
const day = document.getElementById('day').value;
|
|
const month = document.getElementById('month').value;
|
|
const weekday = document.getElementById('weekday').value;
|
|
|
|
if (minutes === 'custom') {
|
|
const customMinutes = prompt('请输入分钟 (0-59):', '0');
|
|
if (customMinutes !== null && !isNaN(customMinutes) && customMinutes >= 0 && customMinutes <= 59) {
|
|
minutes = customMinutes;
|
|
} else {
|
|
minutes = '*';
|
|
document.getElementById('minutes').value = '*';
|
|
}
|
|
}
|
|
|
|
if (hours === 'custom') {
|
|
const customHours = prompt('请输入小时 (0-23):', '0');
|
|
if (customHours !== null && !isNaN(customHours) && customHours >= 0 && customHours <= 23) {
|
|
hours = customHours;
|
|
} else {
|
|
hours = '*';
|
|
document.getElementById('hours').value = '*';
|
|
}
|
|
}
|
|
|
|
const cronExpression = `${minutes} ${hours} ${day} ${month} ${weekday}`;
|
|
document.getElementById('cronResult').textContent = cronExpression;
|
|
}
|
|
|
|
function useTemplate(template) {
|
|
const [min, hour, day, month, weekday] = template.split(' ');
|
|
document.getElementById('minutes').value = min;
|
|
document.getElementById('hours').value = hour;
|
|
document.getElementById('day').value = day;
|
|
document.getElementById('month').value = month;
|
|
document.getElementById('weekday').value = weekday;
|
|
generateCron();
|
|
}
|
|
|
|
function copyCron() {
|
|
const cronText = document.getElementById('cronResult').textContent;
|
|
navigator.clipboard.writeText(cronText).then(() => {
|
|
const btn = document.querySelector('.copy-btn');
|
|
const originalText = btn.textContent;
|
|
btn.textContent = '已复制';
|
|
btn.style.backgroundColor = '#4CAF50';
|
|
setTimeout(() => {
|
|
btn.textContent = originalText;
|
|
btn.style.backgroundColor = '#2196F3';
|
|
}, 2000);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |