HTML基于Vue实现Cron生成器

效果图如下：
实现代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>CronDemo</title><link rel="stylesheet" href="css/element-ui.css" /><script src="js/jquery.js"></script><script src="js/vue.js"></script><script src="js/element-ui-2.12.0.js"></script>
</head>
<style type="text/css">
.pop_btn {text-align: center;margin-top: 20px;
}.popup-main {position: relative;margin: 10px auto;background: #fff;border-radius: 5px;font-size: 12px;overflow: hidden;
}.popup-title {overflow: hidden;line-height: 34px;padding-top: 6px;background: #f2f2f2;
}.popup-result {box-sizing: border-box;line-height: 24px;margin: 25px auto;padding: 15px 10px 10px;border: 1px solid #ccc;position: relative;
}.popup-result .title {position: absolute;top: -28px;left: 50%;width: 140px;font-size: 14px;margin-left: -70px;text-align: center;line-height: 30px;background: #fff;
}.popup-result table {text-align: center;width: 100%;margin: 0 auto;
}.popup-result table span {display: block;width: 100%;font-family: arial;line-height: 30px;height: 30px;white-space: nowrap;overflow: hidden;border: 1px solid #e8e8e8;
}.popup-result-scroll {font-size: 12px;line-height: 24px;height: 10em;overflow-y: auto;
}
</style><body><div id="app"><el-input placeholder="请输入内容" v-model="cronValue"><template slot="append"><button type="button" @click="openCronDialog" class="el-button el-button--primary el-button--medium"><span> 生成表达式 <i class="el-icon-time el-icon--right"></i></span></button></template></el-input><el-dialog title="Cron表达式生成器" :visible="cronDialogVisible" @close="cronDialogVisible = false" top="5vh"><div><el-tabs type="border-card" v-model="cronTabValue"><el-tab-pane label="秒" name="second"><el-form><el-form-item><el-radio v-model="cron.second.radioValue" :label="1">秒，允许的通配符[, - * /]</el-radio></el-form-item><el-form-item><el-radio v-model="cron.second.radioValue" :label="2">周期从<el-input-number v-model="cron.second.cycle01" :min="0" :max="58"></el-input-number> -<el-input-number v-model="cron.second.cycle02" :min="cron.second.cycle01 ? cron.second.cycle01 + 1 : 1" :max="59"></el-input-number>秒</el-radio></el-form-item><el-form-item><el-radio v-model="cron.second.radioValue" :label="3">从<el-input-number v-model="cron.second.average01" :min="0" :max="58"></el-input-number> 秒开始，每<el-input-number v-model="cron.second.average02" :min="1" :max="59 - cron.second.average01 || 0"></el-input-number>秒执行一次</el-radio></el-form-item><el-form-item><el-radio v-model="cron.second.radioValue" :label="4">指定<el-select clearable v-model="cron.second.checkboxList" placeholder="可多选" multiple style="width: 100%"><el-option v-for="item in 60" :key="item" :value="item - 1">{{item - 1}}</el-option></el-select></el-radio></el-form-item></el-form></el-tab-pane><el-tab-pane label="分钟" name="min"><el-form><el-form-item><el-radio v-model="cron.min.radioValue" :label="1">分钟，允许的通配符[, - * /]</el-radio></el-form-item><el-form-item><el-radio v-model="cron.min.radioValue" :label="2">周期从<el-input-number v-model="cron.min.cycle01" :min="0" :max="58"></el-input-number> -<el-input-number v-model="cron.min.cycle02" :min="cron.min.cycle01 ? cron.min.cycle01 + 1 : 1" :max="59"></el-input-number>分钟</el-radio></el-form-item><el-form-item><el-radio v-model="cron.min.radioValue" :label="3">从<el-input-number v-model="cron.min.average01" :min="0" :max="58"></el-input-number> 分钟开始，每<el-input-number v-model="cron.min.average02" :min="1" :max="59 - cron.min.average01 || 0"></el-input-number>分钟执行一次</el-radio></el-form-item><el-form-item><el-radio v-model="cron.min.radioValue" :label="4">指定<el-select clearable v-model="cron.min.checkboxList" placeholder="可多选" multiple style="width: 100%"><el-option v-for="item in 60" :key="item" :value="item - 1">{{item - 1}}</el-option></el-select></el-radio></el-form-item></el-form></el-tab-pane><el-tab-pane label="小时" name="hour"><el-form><el-form-item><el-radio v-model="cron.hour.radioValue" :label="1">小时，允许的通配符[, - * /]</el-radio></el-form-item><el-form-item><el-radio v-model="cron.hour.radioValue" :label="2">周期从<el-input-number v-model="cron.hour.cycle01" :min="0" :max="22"></el-input-number> -<el-input-number v-model="cron.hour.cycle02" :min="cron.hour.cycle01 ? cron.hour.cycle01 + 1 : 1" :max="23"></el-input-number>小时</el-radio></el-form-item><el-form-item><el-radio v-model="cron.hour.radioValue" :label="3">从<el-input-number v-model="cron.hour.average01" :min="0" :max="22"></el-input-number> 小时开始，每<el-input-number v-model="cron.hour.average02" :min="1" :max="23 - cron.hour.average01 || 0"></el-input-number>小时执行一次</el-radio></el-form-item><el-form-item><el-radio v-model="cron.hour.radioValue" :label="4">指定<el-select clearable v-model="cron.hour.checkboxList" placeholder="可多选" multiple style="width: 100%"><el-option v-for="item in 24" :key="item" :value="item - 1">{{item - 1}}</el-option></el-select></el-radio></el-form-item></el-form></el-tab-pane><el-tab-pane label="日" name="day"><el-form><el-form-item><el-radio v-model="cron.day.radioValue" :label="1">日，允许的通配符[, - * ? / L W]</el-radio></el-form-item><el-form-item><el-radio v-model="cron.day.radioValue" :label="2"> 不指定 </el-radio></el-form-item><el-form-item><el-radio v-model="cron.day.radioValue" :label="3">周期从<el-input-number v-model="cron.day.cycle01" :min="1" :max="30"></el-input-number> -<el-input-number v-model="cron.day.cycle02" :min="cron.day.cycle01 ? cron.day.cycle01 + 1 : 2" :max="31"></el-input-number>日</el-radio></el-form-item><el-form-item><el-radio v-model="cron.day.radioValue" :label="4">从<el-input-number v-model="cron.day.average01" :min="1" :max="30"></el-input-number> 号开始，每<el-input-number v-model="cron.day.average02" :min="1" :max="31 - cron.day.average01 || 1"></el-input-number>日执行一次</el-radio></el-form-item><el-form-item><el-radio v-model="cron.day.radioValue" :label="5">每月<el-input-number v-model="cron.day.workday" :min="1" :max="31"></el-input-number>号最近的那个工作日</el-radio></el-form-item><el-form-item><el-radio v-model="cron.day.radioValue" :label="6"> 本月最后一天 </el-radio></el-form-item><el-form-item><el-radio v-model="cron.day.radioValue" :label="7">指定<el-select clearable v-model="cron.day.checkboxList" placeholder="可多选" multiple style="width: 100%"><el-option v-for="item in 31" :key="item" :value="item">{{item}}</el-option></el-select></el-radio></el-form-item></el-form></el-tab-pane><el-tab-pane label="月" name="month"><el-form><el-form-item><el-radio v-model="cron.month.radioValue" :label="1">月，允许的通配符[, - * /]</el-radio></el-form-item><el-form-item><el-radio v-model="cron.month.radioValue" :label="2">周期从<el-input-number v-model="cron.month.cycle01" :min="1" :max="11"></el-input-number> -<el-input-number v-model="cron.month.cycle02" :min="cron.month.cycle01 ? cron.month.cycle01 + 1 : 2" :max="12"></el-input-number>月</el-radio></el-form-item><el-form-item><el-radio v-model="cron.month.radioValue" :label="3">从<el-input-number v-model="cron.month.average01" :min="1" :max="11"></el-input-number> 月开始，每<el-input-number v-model="cron.month.average02" :min="1" :max="12 - cron.month.average01 || 0"></el-input-number>月月执行一次</el-radio></el-form-item><el-form-item><el-radio v-model="cron.month.radioValue" :label="4">指定<el-select clearable v-model="cron.month.checkboxList" placeholder="可多选" multiple style="width: 100%"><el-option v-for="item in 12" :key="item" :value="item">{{item}}</el-option></el-select></el-radio></el-form-item></el-form></el-tab-pane><el-tab-pane label="周" name="week"><el-form><el-form-item><el-radio v-model="cron.week.radioValue" :label="1">周，允许的通配符[, - * ? / L #]</el-radio></el-form-item><el-form-item><el-radio v-model="cron.week.radioValue" :label="2"> 不指定 </el-radio></el-form-item><el-form-item><el-radio v-model="cron.week.radioValue" :label="3">周期从星期<el-select clearable v-model="cron.week.cycle01"><el-option v-for="(item, index) of cron.week.weekList" :key="index" :label="item.value" :value="item.key" :disabled="item.key === 1">{{ item.value }}</el-option></el-select>-<el-select clearable v-model="cron.week.cycle02"><el-option v-for="(item, index) of cron.week.weekList" :key="index" :label="item.value" :value="item.key" :disabled="item.key < cron.week.cycle01 && item.key !== 1">{{ item.value }}</el-option></el-select></el-radio></el-form-item><el-form-item><el-radio v-model="cron.week.radioValue" :label="4">第<el-input-number v-model="cron.week.average01" :min="1" :max="4"></el-input-number> 周的星期<el-select clearable v-model="cron.week.average02"><el-option v-for="(item, index) of cron.week.weekList" :key="index" :label="item.value" :value="item.key">{{ item.value }}</el-option></el-select></el-radio></el-form-item><el-form-item><el-radio v-model="cron.week.radioValue" :label="5">本月最后一个星期<el-select clearable v-model="cron.week.weekday"><el-option v-for="(item, index) of cron.week.weekList" :key="index" :label="item.value" :value="item.key">{{ item.value }}</el-option></el-select></el-radio></el-form-item><el-form-item><el-radio v-model="cron.week.radioValue" :label="6">指定<el-select clearable v-model="cron.week.checkboxList" placeholder="可多选" multiple style="width: 100%"><el-option v-for="(item, index) of cron.week.weekList" :key="index" :label="item.value" :value="String(item.key)">{{ item.value }}</el-option></el-select></el-radio></el-form-item></el-form></el-tab-pane><el-tab-pane label="年" name="year"><el-form><el-form-item><el-radio :label="1" v-model="cron.year.radioValue">不填，允许的通配符[, - * /]</el-radio></el-form-item><el-form-item><el-radio :label="2" v-model="cron.year.radioValue"> 每年 </el-radio></el-form-item><el-form-item><el-radio :label="3" v-model="cron.year.radioValue">周期从<el-input-number v-model="cron.year.cycle01" :min="cron.year.fullYear" :max="2098"></el-input-number> -<el-input-number v-model="cron.year.cycle02" :min="cron.year.cycle01 ? cron.year.cycle01 + 1 : cron.year.fullYear + 1" :max="2099"></el-input-number></el-radio></el-form-item><el-form-item><el-radio :label="4" v-model="cron.year.radioValue">从<el-input-number v-model="cron.year.average01" :min="cron.year.fullYear" :max="2098"></el-input-number>年开始，每<el-input-number v-model="cron.year.average02" :min="1" :max="2099 - cron.year.average01 || cron.year.fullYear"></el-input-number>年执行一次</el-radio></el-form-item><el-form-item><el-radio :label="5" v-model="cron.year.radioValue">指定<el-select clearable v-model="cron.year.checkboxList" placeholder="可多选" multiple><el-option v-for="item in 9" :key="item" :value="item - 1 + cron.year.fullYear" :label="item - 1 + cron.year.fullYear"></el-option></el-select></el-radio></el-form-item></el-form></el-tab-pane></el-tabs><div class="popup-main"><div class="popup-result"><p class="title">时间表达式</p><table><thead><th v-for="item of cron.cronTabTitles" width="40" :key="item">{{item}}</th><th>Cron 表达式</th></thead><tbody><td><span>{{cron.cronValueObj.second}}</span></td><td><span>{{cron.cronValueObj.min}}</span></td><td><span>{{cron.cronValueObj.hour}}</span></td><td><span>{{cron.cronValueObj.day}}</span></td><td><span>{{cron.cronValueObj.month}}</span></td><td><span>{{cron.cronValueObj.week}}</span></td><td><span>{{cron.cronValueObj.year}}</span></td><td><span>{{cronValueString}}</span></td></tbody></table></div><CrontabResult :ex="cronValueString"></CrontabResult><div class="pop_btn"><el-button type="primary" @click="confirmCron">确定</el-button><el-button type="warning" @click="clearCron">重置</el-button><el-button @click="closeCronDialog">取消</el-button></div></div></div></el-dialog></div>
</body>
<script type="text/javascript">
new Vue({el: '#app',data() {return {cronDialogVisible: false,cronTabValue: 'second',cronValue: '0/15 4-11 5-10 6/8 4-7 * 2027-2034',cron: {cronTabTitles: ["秒", "分钟", "小时", "日", "月", "周", "年"],cronValueObj: {second: "*",min: "*",hour: "*",day: "*",month: "*",week: "?",year: ""},second: {radioValue: 1,cycle01: 1,cycle02: 2,average01: 0,average02: 1,checkboxList: [],checkNum: null,},min: {radioValue: 1,cycle01: 1,cycle02: 2,average01: 0,average02: 1,checkboxList: [],checkNum: null,},hour: {radioValue: 1,cycle01: 0,cycle02: 1,average01: 0,average02: 1,checkboxList: [],checkNum: null,},day: {radioValue: 1,workday: 1,cycle01: 1,cycle02: 2,average01: 1,average02: 1,checkboxList: [],checkNum: null,},month: {radioValue: 1,cycle01: 1,cycle02: 2,average01: 1,average02: 1,checkboxList: [],checkNum: null,},week: {radioValue: 2,weekday: 2,cycle01: 2,cycle02: 3,average01: 1,average02: 2,checkboxList: [],weekList: [{key: 2,value: "星期一"},{key: 3,value: "星期二"},{key: 4,value: "星期三"},{key: 5,value: "星期四"},{key: 6,value: "星期五"},{key: 7,value: "星期六"},{key: 1,value: "星期日"}],checkNum: null,},year: {fullYear: 0,radioValue: 1,cycle01: 0,cycle02: 0,average01: 0,average02: 1,checkboxList: [],checkNum: null,},},}},created: function() {},mounted: function() {var that = this;that.cron.year.fullYear = Number(new Date().getFullYear());that.cron.year.cycle01 = that.cron.year.fullYear;that.cron.year.average01 = that.cron.year.fullYear;},computed: {cronValueString: function() {var that = this;let obj = that.cron.cronValueObj;let str =obj.second +" " +obj.min +" " +obj.hour +" " +obj.day +" " +obj.month +" " +obj.week +(obj.year == "" ? "" : " " + obj.year);return str;},//========================秒========================secondCycleTotal: function() {var that = this;const cycle01 = that.checkNumber(that.cron.second.cycle01, 0, 58);const cycle02 = that.checkNumber(that.cron.second.cycle02,cycle01 ? cycle01 + 1 : 1,59);return cycle01 + "-" + cycle02;},secondAverageTotal: function() {var that = this;const average01 = that.checkNumber(that.cron.second.average01, 0, 58);const average02 = that.checkNumber(that.cron.second.average02, 1, 59 - average01 || 0);return average01 + "/" + average02;},secondCheckboxString: function() {var that = this;let str = that.cron.second.checkboxList.join();return str == "" ? "*" : str;},//========================分========================minCycleTotal: function() {var that = this;const cycle01 = that.checkNumber(that.cron.min.cycle01, 0, 58);const cycle02 = that.checkNumber(that.cron.min.cycle02,cycle01 ? cycle01 + 1 : 1,59);return cycle01 + "-" + cycle02;},minAverageTotal: function() {var that = this;const average01 = that.checkNumber(that.cron.min.average01, 0, 58);const average02 = that.checkNumber(that.cron.min.average02, 1, 59 - average01 || 0);return average01 + "/" + average02;},minCheckboxString: function() {var that = this;let str = that.cron.min.checkboxList.join();return str == "" ? "*" : str;},//========================时========================hourCycleTotal: function() {var that = this;const cycle01 = that.checkNumber(that.cron.hour.cycle01, 0, 22);const cycle02 = that.checkNumber(that.cron.hour.cycle02,cycle01 ? cycle01 + 1 : 1,23);return cycle01 + "-" + cycle02;},hourAverageTotal: function() {var that = this;const average01 = that.checkNumber(that.cron.hour.average01, 0, 22);const average02 = that.checkNumber(that.cron.hour.average02, 1, 23 - average01 || 0);return average01 + "/" + average02;},hourCheckboxString: function() {var that = this;let str = that.cron.hour.checkboxList.join();return str == "" ? "*" : str;},//========================日========================dayCycleTotal: function() {var that = this;const cycle01 = that.checkNumber(that.cron.day.cycle01, 1, 30);const cycle02 = that.checkNumber(that.cron.day.cycle02,cycle01 ? cycle01 + 1 : 2,31,31);return cycle01 + "-" + cycle02;},dayAverageTotal: function() {var that = this;const average01 = that.checkNumber(that.cron.day.average01, 1, 30);const average02 = that.checkNumber(that.cron.day.average02, 1, 31 - average01 || 0);return average01 + "/" + average02;},dayWorkdayCheck: function() {var that = this;const workday = that.checkNumber(that.cron.day.workday, 1, 31);return workday;},dayCheckboxString: function() {var that = this;let str = that.cron.day.checkboxList.join();return str == "" ? "*" : str;},//========================月========================monthCycleTotal: function() {var that = this;const cycle01 = that.checkNumber(that.cron.month.cycle01, 1, 11);const cycle02 = that.checkNumber(that.cron.month.cycle02,cycle01 ? cycle01 + 1 : 2,12);return cycle01 + "-" + cycle02;},monthAverageTotal: function() {var that = this;const average01 = that.checkNumber(that.cron.month.average01, 1, 11);const average02 = that.checkNumber(that.cron.month.average02, 1, 12 - average01 || 0);return average01 + "/" + average02;},monthCheckboxString: function() {var that = this;let str = that.cron.month.checkboxList.join();return str == "" ? "*" : str;},//========================周========================weekCycleTotal: function() {var that = this;that.cron.week.cycle01 = that.checkNumber(that.cron.week.cycle01, 1, 7);that.cron.week.cycle02 = that.checkNumber(that.cron.week.cycle02, 1, 7);return that.cron.week.cycle01 + "-" + that.cron.week.cycle02;},weekAverageTotal: function() {var that = this;that.cron.week.average01 = that.checkNumber(that.cron.week.average01, 1, 4);that.cron.week.average02 = that.checkNumber(that.cron.week.average02, 1, 7);return that.cron.week.average02 + "#" + that.cron.week.average01;},weekWeekdayCheck: function() {var that = this;that.cron.week.weekday = that.checkNumber(that.cron.week.weekday, 1, 7);return that.cron.week.weekday;},weekCheckboxString: function() {var that = this;let str = that.cron.week.checkboxList.join();return str == "" ? "*" : str;},//========================年========================yearCycleTotal: function() {var that = this;const cycle01 = that.checkNumber(that.cron.year.cycle01, that.cron.year.fullYear, 2098);const cycle02 = that.checkNumber(that.cron.year.cycle02,cycle01 ? cycle01 + 1 : that.cron.year.fullYear + 1,2099);return cycle01 + "-" + cycle02;},yearAverageTotal: function() {var that = this;const average01 = that.checkNumber(that.cron.year.average01, that.cron.year.fullYear, 2098);const average02 = that.checkNumber(that.cron.year.average02,1,2099 - average01 || that.cron.year.fullYear);return average01 + "/" + average02;},yearCheckboxString: function() {var that = this;let str = that.cron.year.checkboxList.join();return str;}},watch: {//========================秒========================"$data.cron.second.radioValue": "secondRadioChange",secondCycleTotal: "secondCycleChange",secondAverageTotal: "secondAverageChange",secondCheckboxString: "secondCheckboxChange",//========================分========================"$data.cron.min.radioValue": "minRadioChange",minCycleTotal: "minCycleChange",minAverageTotal: "minAverageChange",minCheckboxString: "minCheckboxChange",//========================时========================"$data.cron.hour.radioValue": "hourRadioChange",hourCycleTotal: "hourCycleChange",hourAverageTotal: "hourAverageChange",hourCheckboxString: "hourCheckboxChange",//========================日========================"$data.cron.day.radioValue": "dayRadioChange",dayCycleTotal: "dayCycleChange",dayAverageTotal: "dayAverageChange",dayWorkdayCheck: "dayWorkdayChange",dayCheckboxString: "dayCheckboxChange",//========================月========================"$data.cron.month.radioValue": "monthRadioChange",monthCycleTotal: "monthCycleChange",monthAverageTotal: "monthAverageChange",monthCheckboxString: "monthCheckboxChange",//========================周========================"$data.cron.week.radioValue": "weekRadioChange",weekCycleTotal: "weekCycleChange",weekAverageTotal: "weekAverageChange",weekWeekdayCheck: "weekWeekdayChange",weekCheckboxString: "weekCheckboxChange",//========================年========================"$data.cron.year.radioValue": "yearRadioChange",yearCycleTotal: "yearCycleChange",yearAverageTotal: "yearAverageChange",yearCheckboxString: "yearCheckboxChange"},methods: {//========================秒========================secondRadioChange: function() {var that = this;switch (that.cron.second.radioValue) {case 1:that.cron.cronValueObj.second = "*";break;case 2:that.cron.cronValueObj.second = that.secondCycleTotal;break;case 3:that.cron.cronValueObj.second = that.secondAverageTotal;break;case 4:that.cron.cronValueObj.second = that.secondCheckboxString;break;}},secondCycleChange: function() {var that = this;if (that.cron.second.radioValue == "2") {that.cron.cronValueObj.second = that.secondCycleTotal;}},secondAverageChange: function() {var that = this;if (that.cron.second.radioValue == "3") {that.cron.cronValueObj.second = that.secondAverageTotal;}},secondCheckboxChange: function() {var that = this;if (that.cron.second.radioValue == "4") {that.cron.cronValueObj.second = that.secondCheckboxString;}},//========================分========================minRadioChange: function() {var that = this;switch (that.cron.min.radioValue) {case 1:that.cron.cronValueObj.min = "*";break;case 2:that.cron.cronValueObj.min = that.minCycleTotal;break;case 3:that.cron.cronValueObj.min = that.minAverageTotal;break;case 4:that.cron.cronValueObj.min = that.minCheckboxString;break;}},minCycleChange: function() {var that = this;if (that.cron.min.radioValue == "2") {that.cron.cronValueObj.min = that.minCycleTotal;}},minAverageChange: function() {var that = this;if (that.cron.min.radioValue == "3") {that.cron.cronValueObj.min = that.minAverageTotal;}},minCheckboxChange: function() {var that = this;if (that.cron.min.radioValue == "4") {that.cron.cronValueObj.min = that.minCheckboxString;}},//========================时========================hourRadioChange: function() {var that = this;switch (that.cron.hour.radioValue) {case 1:that.cron.cronValueObj.hour = "*";break;case 2:that.cron.cronValueObj.hour = that.hourCycleTotal;break;case 3:that.cron.cronValueObj.hour = that.hourAverageTotal;break;case 4:that.cron.cronValueObj.hour = that.hourCheckboxString;break;}},hourCycleChange: function() {var that = this;if (that.cron.hour.radioValue == "2") {that.cron.cronValueObj.hour = that.hourCycleTotal;}},hourAverageChange: function() {var that = this;if (that.cron.hour.radioValue == "3") {that.cron.cronValueObj.hour = that.hourAverageTotal;}},hourCheckboxChange: function() {var that = this;if (that.cron.hour.radioValue == "4") {that.cron.cronValueObj.hour = that.hourCheckboxString;}},//========================日========================dayRadioChange: function() {var that = this;if (that.cron.day.radioValue !== 2 && that.cron.cronValueObj.week !== "?") {that.cron.cronValueObj.week = "?";}switch (that.cron.day.radioValue) {case 1:that.cron.cronValueObj.day = "*";break;case 2:that.cron.cronValueObj.day = "?";break;case 3:that.cron.cronValueObj.day = that.dayCycleTotal;break;case 4:that.cron.cronValueObj.day = that.dayAverageTotal;break;case 5:that.cron.cronValueObj.day = that.dayWorkdayCheck + "W";break;case 6:that.cron.cronValueObj.day = "L";break;case 7:that.cron.cronValueObj.day = that.dayCheckboxString;break;}},dayCycleChange: function() {var that = this;if (that.cron.day.radioValue == "3") {that.cron.cronValueObj.day = that.dayCycleTotal;}},dayAverageChange: function() {var that = this;if (that.cron.day.radioValue == "4") {that.cron.cronValueObj.day = that.dayAverageTotal;}},dayWorkdayChange: function() {var that = this;if (that.cron.day.radioValue == "5") {that.cron.cronValueObj.day = that.dayWorkdayCheck + "W";}},dayCheckboxChange: function() {var that = this;if (that.cron.day.radioValue == "7") {that.cron.cronValueObj.day = that.dayCheckboxString;}},//========================月========================monthRadioChange: function() {var that = this;switch (that.cron.month.radioValue) {case 1:that.cron.cronValueObj.month = "*";break;case 2:that.cron.cronValueObj.month = that.monthCycleTotal;break;case 3:that.cron.cronValueObj.month = that.monthAverageTotal;break;case 4:that.cron.cronValueObj.month = that.monthCheckboxString;break;}},monthCycleChange: function() {var that = this;if (that.cron.month.radioValue == "2") {that.cron.cronValueObj.month = that.monthCycleTotal;}},monthAverageChange: function() {var that = this;if (that.cron.month.radioValue == "3") {that.cron.cronValueObj.month = that.monthAverageTotal;}},monthCheckboxChange: function() {var that = this;if (that.cron.month.radioValue == "4") {that.cron.cronValueObj.month = that.monthCheckboxString;}},//========================周========================weekRadioChange: function() {var that = this;if (that.cron.week.radioValue !== 2 && that.cron.cronValueObj.day !== "?") {that.cron.cronValueObj.day = "?";}switch (that.cron.week.radioValue) {case 1:that.cron.cronValueObj.week = "*";break;case 2:that.cron.cronValueObj.week = "?";break;case 3:that.cron.cronValueObj.week = that.weekCycleTotal;break;case 4:that.cron.cronValueObj.week = that.weekAverageTotal;break;case 5:that.cron.cronValueObj.week = that.weekWeekdayCheck + "L";break;case 6:that.cron.cronValueObj.week = that.weekCheckboxString;break;}},weekCycleChange: function() {var that = this;if (that.cron.week.radioValue == "3") {that.cron.cronValueObj.week = that.weekCycleTotal;}},weekAverageChange: function() {var that = this;if (that.cron.week.radioValue == "4") {that.cron.cronValueObj.week = that.weekAverageTotal;}},weekWeekdayChange: function() {var that = this;if (that.cron.week.radioValue == "5") {that.cron.cronValueObj.week = that.weekWeekdayCheck + "L";}},weekCheckboxChange: function() {var that = this;if (that.cron.week.radioValue == "6") {that.cron.cronValueObj.week = that.weekCheckboxString;}},//========================年========================yearRadioChange: function() {var that = this;switch (that.cron.year.radioValue) {case 1:that.cron.cronValueObj.year = "";break;case 2:that.cron.cronValueObj.year = "*";break;case 3:that.cron.cronValueObj.year = that.yearCycleTotal;break;case 4:that.cron.cronValueObj.year = that.yearAverageTotal;break;case 5:that.cron.cronValueObj.year = that.yearCheckboxString;break;}},yearCycleChange: function() {var that = this;if (that.cron.year.radioValue == "3") {that.cron.cronValueObj.year = that.yearCycleTotal;}},yearAverageChange: function() {var that = this;if (that.cron.year.radioValue == "4") {that.cron.cronValueObj.year = that.yearAverageTotal;}},yearCheckboxChange: function() {var that = this;if (that.cron.year.radioValue == "5") {that.cron.cronValueObj.year = that.yearCheckboxString;}},checkNumber: function(value, minLimit, maxLimit) {value = Math.floor(value);if (value < minLimit) {value = minLimit;} else if (value > maxLimit) {value = maxLimit;}return value;},resolveExp: function() {var that = this;if (that.cronValue) {let arr = that.cronValue.split(" ");if (arr.length >= 6) {//6 位以上是合法表达式let obj = {second: arr[0],min: arr[1],hour: arr[2],day: arr[3],month: arr[4],week: arr[5],year: arr[6] ? arr[6] : ""};that.cron.cronValueObj = {...obj};for (var i in obj) {if (obj[i]) that.changeRadio(i, obj[i]);}}} else {that.clearCron();}},changeRadio: function(name, value) {let that = this;let allCronType = ["second", "min", "hour", "day", "month", "week", "year"];let arr = ["second", "min", "hour", "month"];let insValue;if (!allCronType.includes(name)) return;if (arr.includes(name)) {if (value === "*") {insValue = 1;} else if (value.indexOf("-") > -1) {let indexArr = value.split("-");isNaN(indexArr[0]) ?(that.cron[name].cycle01 = 0) :(that.cron[name].cycle01 = indexArr[0]);that.cron[name].cycle02 = indexArr[1];insValue = 2;} else if (value.indexOf("/") > -1) {let indexArr = value.split("/");isNaN(indexArr[0]) ?(that.cron[name].average01 = 0) :(that.cron[name].average01 = indexArr[0]);that.cron[name].average02 = indexArr[1];insValue = 3;} else {insValue = 4;that.cron[name].checkboxList = value.split(",");}} else if (name == "day") {if (value === "*") {insValue = 1;} else if (value == "?") {insValue = 2;} else if (value.indexOf("-") > -1) {let indexArr = value.split("-");isNaN(indexArr[0]) ?(that.cron[name].cycle01 = 0) :(that.cron[name].cycle01 = indexArr[0]);that.cron[name].cycle02 = indexArr[1];insValue = 3;} else if (value.indexOf("/") > -1) {let indexArr = value.split("/");isNaN(indexArr[0]) ?(that.cron[name].average01 = 0) :(that.cron[name].average01 = indexArr[0]);that.cron[name].average02 = indexArr[1];insValue = 4;} else if (value.indexOf("W") > -1) {let indexArr = value.split("W");isNaN(indexArr[0]) ?(that.cron[name].workday = 0) :(that.cron[name].workday = indexArr[0]);insValue = 5;} else if (value === "L") {insValue = 6;} else {that.cron[name].checkboxList = value.split(",");insValue = 7;}} else if (name == "week") {if (value === "*") {insValue = 1;} else if (value == "?") {insValue = 2;} else if (value.indexOf("-") > -1) {let indexArr = value.split("-");isNaN(indexArr[0]) ?(that.cron[name].cycle01 = 0) :(that.cron[name].cycle01 = indexArr[0]);tthat.cron[name].cycle02 = indexArr[1];insValue = 3;} else if (value.indexOf("#") > -1) {let indexArr = value.split("#");isNaN(indexArr[0]) ?(that.cron[name].average01 = 1) :(that.cron[name].average01 = indexArr[0]);that.cron[name].average02 = indexArr[1];insValue = 4;} else if (value.indexOf("L") > -1) {let indexArr = value.split("L");isNaN(indexArr[0]) ?(that.cron[name].weekday = 1) :(that.cron[name].weekday = indexArr[0]);insValue = 5;} else {that.cron[name].checkboxList = value.split(",");insValue = 6;}} else if (name == "year") {if (value == "") {insValue = 1;} else if (value == "*") {insValue = 2;} else if (value.indexOf("-") > -1) {insValue = 3;} else if (value.indexOf("/") > -1) {insValue = 4;} else {that.cron[name].checkboxList = value.split(",");insValue = 5;}}that.cron[name].radioValue = insValue;},openCronDialog: function() {var that = this;that.cronTabValue = 'second';that.resolveExp();that.cronDialogVisible = true;},closeCronDialog: function() {var that = this;that.cronDialogVisible = false;},confirmCron: function() {var that = this;that.cronValue = that.cronValueString;that.cronDialogVisible = false;},clearCron: function() {var that = this;that.cron.cronValueObj = {second: "*",min: "*",hour: "*",day: "*",month: "*",week: "?",year: ""};that.cron.second.radioValue = 1;that.cron.min.radioValue = 1;that.cron.hour.radioValue = 1;that.cron.day.radioValue = 1;that.cron.month.radioValue = 1;that.cron.week.radioValue = 2;that.cron.year.radioValue = 1;},}
});
</script></html>
代码下载提取码：18dx
HTML基于Vue实现Cron生成器相关推荐

基于 Vue 的轻量级静态网站生成器 VuePress
Vue.js 的创始人尤雨溪大大在 twitter 上发布了一个全新的基于 Vue 的静态网站生成器-,这对于广大 Vue 爱好者来说无疑是一个好消息! 什么是VuePress VuePress由两部 ...
推荐一个基于 Python + Vue 的海报生成器
推荐一个基于 Vue.js 的海报生成器开源项目,像海报编辑器此类的低代码平台更多的开发量在前端,所以说这是前端工程师不错的练手项目,实现起来比管理系统有趣多了. 01. 海报生成器前几天也推荐过 ...
html5快速开发模板生成器,推荐一个基于Vue 的 H5 快速开发模板
本项目以基于 vue-cli4 和 Vant-ui 搭建的,进行移动端开发中的一些最佳实践方案模板地址动动你的小手点颗star 样式适配在移动端网页开发时,样式适配始终是一个绕不开的问题.对此目 ...
推荐一款基于Vue的开源智慧物业解决方案项目源码
项目介绍「e家宜业」是一整套基于AGPL开源协议开源的智慧物业解决方案.实现了微信公众号.小程序.PC.H5.智能硬件多端打通,旨在提升物业公司效率.规范物业服务流程.提升物业服务满意度.加强小区智 ...
基于Vue的小日历（支持按周切换）
基于Vue的日历小功能,可根据实际开发情况按每年.每月.每周.进行切换 <template><div class="date"><!-- 年份月份 ...
Element 2.6.0 发布，基于 Vue 2.0 的桌面端组件库
开发四年只会写业务代码,分布式高并发都不会还做程序员? Element 2.6.0 发布了,Element 是一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设 ...
基于Vue, Vuex 和 ElementUI 构建轻量单页Hexo主题Lite
Hexo Theme Lite Keep Calm, Lite and Writing. light single page blog application theme, using Vue, Vu ...
vue 文字上下循环滚动_基于 Vue 无缝滚动组件Vue-Seamless-Scroll
今天给小伙伴们推荐一款超棒的Vue无缝滚动组件VueSeamlessScroll. vue-seamless-scroll 基于 vue.js 构建的简单实用的无缝滚动组件.满足丰富的配置需求,支持上 ...
说说如何基于 Vue.js 实现表格组件
我们基于 Vue.js 实现一个可根据某列进行排序的表格组件. 一个表格包含表头和数据两部分内容.因此,我们定义两个数组,columns 表示表头信息,在 <thread> 中渲染,并可在 ...
HTML基于Vue实现Cron生成器

HTML基于Vue实现Cron生成器相关推荐

最新文章

热门文章
