Cron 选择器

这篇具有很好参考价值的文章主要介绍了Cron 选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Cron 选择器,前端文章来源地址https://www.toymoban.com/news/detail-604596.html

// 定义一个名为 cron 的新组件
Vue.component('cron', {
    name: 'cron',
    props: ['data'],
    data() {
        return {
            second: {
                cronEvery: '',
                incrementStart: '3',
                incrementIncrement: '5',
                rangeStart: '',
                rangeEnd: '',
                specificSpecific: [],
            },
            minute: {
                cronEvery: '',
                incrementStart: '3',
                incrementIncrement: '5',
                rangeStart: '',
                rangeEnd: '',
                specificSpecific: [],
            },
            hour: {
                cronEvery: '',
                incrementStart: '3',
                incrementIncrement: '5',
                rangeStart: '',
                rangeEnd: '',
                specificSpecific: [],
            },
            day: {
                cronEvery: '',
                incrementStart: '1',
                incrementIncrement: '1',
                rangeStart: '',
                rangeEnd: '',
                specificSpecific: [],
                cronLastSpecificDomDay: 1,
                cronDaysBeforeEomMinus: '',
                cronDaysNearestWeekday: '',
            },
            week: {
                cronEvery: '',
                incrementStart: '1',
                incrementIncrement: '1',
                specificSpecific: [],
                cronNthDayDay: 1,
                cronNthDayNth: '1',
            },
            month: {
                cronEvery: '',
                incrementStart: '3',
                incrementIncrement: '5',
                rangeStart: '',
                rangeEnd: '',
                specificSpecific: [],
            },
            year: {
                cronEvery: '',
                incrementStart: '2017',
                incrementIncrement: '1',
                rangeStart: '',
                rangeEnd: '',
                specificSpecific: [],
            },
            output: {
                second: '',
                minute: '',
                hour: '',
                day: '',
                month: '',
                Week: '',
                year: '',
            }
        }
    },
    watch: {
        data() {
            this.rest(this.$data);
        }
    },
    computed: {
        text() {
            return {
                Seconds: {
                    name: "秒",
                    every: "每一秒钟",
                    interval: ["每隔", "秒执行 从", "秒开始"],
                    specific: "具体秒数(可多选)",
                    cycle: ["周期从", "到", "秒"]
                },
                Minutes: {
                    name: "分",
                    every: "每一分钟",
                    interval: ["每隔", "分执行 从", "分开始"],
                    specific: "具体分钟数(可多选)",
                    cycle: ["周期从", "到", "分"]
                },
                Hours: {
                    name: "时",
                    every: "每一小时",
                    interval: ["每隔", "小时执行 从", "小时开始"],
                    specific: "具体小时数(可多选)",
                    cycle: ["周期从", "到", "小时"]
                },
                Day: {
                    name: "天",
                    every: "每一天",
                    intervalWeek: ["每隔", "周执行 从", "开始"],
                    intervalDay: ["每隔", "天执行 从", "天开始"],
                    specificWeek: "具体星期几(可多选)",
                    specificDay: "具体天数(可多选)",
                    lastDay: "在这个月的最后一天",
                    lastWeekday: "在这个月的最后一个工作日",
                    lastWeek: ["在这个月的最后一个"],
                    beforeEndMonth: ["在本月底前", "天"],
                    nearestWeekday: ["最近的工作日(周一至周五)至本月", "日"],
                    someWeekday: ["在这个月的第", "个"]
                },
                Week: ["天", "一", "二", "三", "四", "五", "六"].map(function (e) {
                    return "星期" + e
                }),
                Month: {
                    name: "月",
                    every: "每一月",
                    interval: ["每隔", "月执行 从", "月开始"],
                    specific: "具体月数(可多选)",
                    cycle: ["从", "到", "月之间的每个月"]
                },
                Year: {
                    name: "年",
                    every: "每一年",
                    interval: ["每隔", "年执行 从", "年开始"],
                    specific: "具体年份(可多选)",
                    cycle: ["从", "到", "年之间的每一年"]
                },
                Save: "保存",
                Close: "关闭"
            }
        },
        secondsText() {
            let seconds = '';
            let cronEvery = this.second.cronEvery;
            switch (cronEvery.toString()) {
                case '1':
                    seconds = '*';
                    break;
                case '2':
                    seconds = this.second.incrementStart + '/' + this.second.incrementIncrement;
                    break;
                case '3':
                    this.second.specificSpecific.map(val => {
                        seconds += val + ','
                    });
                    seconds = seconds.slice(0, -1);
                    break;
                case '4':
                    seconds = this.second.rangeStart + '-' + this.second.rangeEnd;
                    break;
            }
            return seconds;
        },
        minutesText() {
            let minutes = '';
            let cronEvery = this.minute.cronEvery;
            switch (cronEvery.toString()) {
                case '1':
                    minutes = '*';
                    break;
                case '2':
                    minutes = this.minute.incrementStart + '/' + this.minute.incrementIncrement;
                    break;
                case '3':
                    this.minute.specificSpecific.map(val => {
                        minutes += val + ','
                    });
                    minutes = minutes.slice(0, -1);
                    break;
                case '4':
                    minutes = this.minute.rangeStart + '-' + this.minute.rangeEnd;
                    break;
            }
            return minutes;
        },
        hoursText() {
            let hours = '';
            let cronEvery = this.hour.cronEvery;
            switch (cronEvery.toString()) {
                case '1':
                    hours = '*';
                    break;
                case '2':
                    hours = this.hour.incrementStart + '/' + this.hour.incrementIncrement;
                    break;
                case '3':
                    this.hour.specificSpecific.map(val => {
                        hours += val + ','
                    });
                    hours = hours.slice(0, -1);
                    break;
                case '4':
                    hours = this.hour.rangeStart + '-' + this.hour.rangeEnd;
                    break;
            }
            return hours;
        },
        daysText() {
            let days = '';
            let cronEvery = this.day.cronEvery;
            switch (cronEvery.toString()) {
                case '1':
                    break;
                case '2':
                case '4':
                case '11':
                    days = '?';
                    break;
                case '3':
                    days = this.day.incrementStart + '/' + this.day.incrementIncrement;
                    break;
                case '5':
                    this.day.specificSpecific.map(val => {
                        days += val + ','
                    });
                    days = days.slice(0, -1);
                    break;
                case '6':
                    days = "L";
                    break;
                case '7':
                    days = "LW";
                    break;
                case '8':
                    days = this.day.cronLastSpecificDomDay + 'L';
                    break;
                case '9':
                    days = 'L-' + this.day.cronDaysBeforeEomMinus;
                    break;
                case '10':
                    days = this.day.cronDaysNearestWeekday + "W";
                    break
            }
            return days;
        },
        weeksText() {
            let weeks = '';
            let cronEvery = this.day.cronEvery;
            switch (cronEvery.toString()) {
                case '1':
                case '3':
                case '5':
                    weeks = '?';
                    break;
                case '2':
                    weeks = this.week.incrementStart + '/' + this.week.incrementIncrement;
                    break;
                case '4':
                    this.week.specificSpecific.map(val => {
                        weeks += val + ','
                    });
                    weeks = weeks.slice(0, -1);
                    break;
                case '6':
                case '7':
                case '8':
                case '9':
                case '10':
                    weeks = "?";
                    break;
                case '11':
                    weeks = this.week.cronNthDayDay + "#" + this.week.cronNthDayNth;
                    break;
            }
            return weeks;
        },
        monthsText() {
            let months = '';
            let cronEvery = this.month.cronEvery;
            switch (cronEvery.toString()) {
                case '1':
                    months = '*';
                    break;
                case '2':
                    months = this.month.incrementStart + '/' + this.month.incrementIncrement;
                    break;
                case '3':
                    this.month.specificSpecific.map(val => {
                        months += val + ','
                    });
                    months = months.slice(0, -1);
                    break;
                case '4':
                    months = this.month.rangeStart + '-' + this.month.rangeEnd;
                    break;
            }
            return months;
        },
        yearsText() {
            let years = '';
            let cronEvery = this.year.cronEvery;
            switch (cronEvery.toString()) {
                case '1':
                    years = '*';
                    break;
                case '2':
                    years = this.year.incrementStart + '/' + this.year.incrementIncrement;
                    break;
                case '3':
                    this.year.specificSpecific.map(val => {
                        years += val + ','
                    });
                    years = years.slice(0, -1);
                    break;
                case '4':
                    years = this.year.rangeStart + '-' + this.year.rangeEnd;
                    break;
            }
            return years;
        },
        cron() {
            return `${this.secondsText || '0'} ${this.minutesText || '0'} ${this.hoursText || '*'} ${this.daysText || '*'} ${this.monthsText || '*'} ${this.weeksText || '?'}`
        },
    },
    methods: {
        getValue() {
            return this.cron;
        }
        ,
        change() {
            this.$emit('change', this.cron);
            // this.close();
        }
        ,
        // close() {
        //     this.$emit('close')
        // }
        // ,
        rest(data) {
            for (let i in data) {
                if (data[i] instanceof Object) {
                    this.rest(data[i])
                } else {
                    switch (typeof data[i]) {
                        case 'object':
                            data[i] = [];
                            break;
                        case 'string':
                            data[i] = '';
                            break;
                    }
                }
            }
        }
    }
    ,
    watch:{
        cron(){
            this.change();
        }
    },
    mounted() {
        this.change();
    }
    ,
    template: `
    <div  >
        <el-tabs type="border-card">
<!--            <el-tab-pane>-->
<!--                <span slot="label"><i class="el-icon-date"></i> {{text.Seconds.name}}</span>-->
<!--                <div class="tabBody">-->
<!--                    <el-row>-->
<!--                        <el-radio v-model="second.cronEvery" label="1">{{text.Seconds.every}}</el-radio>-->
<!--                    </el-row>-->
<!--                    <el-row>-->
<!--                        <el-radio v-model="second.cronEvery" label="2">{{text.Seconds.interval[0]}}-->
<!--                            <el-input-number size="small" v-model="second.incrementIncrement" :min="1" :max="60"></el-input-number>-->
<!--                            {{text.Seconds.interval[1]||''}}-->
<!--                            <el-input-number size="small" v-model="second.incrementStart" :min="0" :max="59"></el-input-number>-->
<!--                            {{text.Seconds.interval[2]||''}}-->
<!--                        </el-radio>-->
<!--                    </el-row>-->
<!--                    <el-row>-->
<!--                        <el-radio class="long" v-model="second.cronEvery" label="3">{{text.Seconds.specific}}-->
<!--                            <el-select size="small" multiple v-model="second.specificSpecific">-->
<!--                                <el-option v-for="val in 60"  :value="val-1">{{val-1}}</el-option>-->
<!--                            </el-select>-->
<!--                        </el-radio>-->
<!--                    </el-row>-->
<!--                    <el-row>-->
<!--                        <el-radio v-model="second.cronEvery" label="4">{{text.Seconds.cycle[0]}}-->
<!--                            <el-input-number size="small" v-model="second.rangeStart" :min="1" :max="60"></el-input-number>-->
<!--                            {{text.Seconds.cycle[1]||''}}-->
<!--                            <el-input-number size="small" v-model="second.rangeEnd" :min="0" :max="59"></el-input-number>-->
<!--                            {{text.Seconds.cycle[2]||''}}-->
<!--                        </el-radio>-->
<!--                    </el-row>-->
<!--                </div>-->
<!--            </el-tab-pane>-->
<!--            <el-tab-pane>-->
<!--                <span slot="label"><i class="el-icon-date"></i> {{text.Minutes.name}}</span>-->
<!--                <div class="tabBody">-->
<!--                    <el-row>-->
<!--                        <el-radio v-model="minute.cronEvery" label="1">{{text.Minutes.every}}</el-radio>-->
<!--                    </el-row>-->
<!--                    <el-row>-->
<!--                        <el-radio v-model="minute.cronEvery" label="2">{{text.Minutes.interval[0]}}-->
<!--                            <el-input-number size="small" v-model="minute.incrementIncrement" :min="1" :max="60"></el-input-number>-->
<!--                            {{text.Minutes.interval[1]}}-->
<!--                            <el-input-number size="small" v-model="minute.incrementStart" :min="0" :max="59"></el-input-number>-->
<!--                            {{text.Minutes.interval[2]||''}}-->
<!--                        </el-radio>-->
<!--                    </el-row>-->
<!--                    <el-row>-->
<!--                        <el-radio class="long" v-model="minute.cronEvery" label="3">{{text.Minutes.specific}}-->
<!--                            <el-select size="small" multiple v-model="minute.specificSpecific">-->
<!--                                <el-option v-for="val in 60"  :value="val-1">{{val-1}}</el-option>-->
<!--                            </el-select>-->
<!--                        </el-radio>-->
<!--                    </el-row>-->
<!--                    <el-row>-->
<!--                        <el-radio v-model="minute.cronEvery" label="4">{{text.Minutes.cycle[0]}}-->
<!--                            <el-input-number size="small" v-model="minute.rangeStart" :min="1" :max="60"></el-input-number>-->
<!--                            {{text.Minutes.cycle[1]}}-->
<!--                            <el-input-number size="small" v-model="minute.rangeEnd" :min="0" :max="59"></el-input-number>-->
<!--                            {{text.Minutes.cycle[2]}}-->
<!--                        </el-radio>-->
<!--                    </el-row>-->
<!--                </div>-->
<!--            </el-tab-pane>-->
            <el-tab-pane>
                <span slot="label"><i class="el-icon-date"></i> {{text.Hours.name}}</span>
                <div class="tabBody">
                    <el-row>
                        <el-radio v-model="hour.cronEvery" label="1">{{text.Hours.every}}</el-radio>
                    </el-row>
                    <el-row>
                        <el-radio v-model="hour.cronEvery" label="2">{{text.Hours.interval[0]}}
                            <el-input-number size="small" v-model="hour.incrementIncrement" :min="0" :max="23"></el-input-number>
                            {{text.Hours.interval[1]}}
                            <el-input-number size="small" v-model="hour.incrementStart" :min="0" :max="23"></el-input-number>
                            {{text.Hours.interval[2]}}
                        </el-radio>
                    </el-row>
                    <el-row>
                        <el-radio class="long" v-model="hour.cronEvery" label="3">{{text.Hours.specific}}
                            <el-select size="small" multiple v-model="hour.specificSpecific">
                                <el-option v-for="val in 24"  :value="val-1">{{val-1}}</el-option>
                            </el-select>
                        </el-radio>
                    </el-row>
                    <el-row>
                        <el-radio v-model="hour.cronEvery" label="4">{{text.Hours.cycle[0]}}
                            <el-input-number size="small" v-model="hour.rangeStart" :min="0" :max="23"></el-input-number>
                            {{text.Hours.cycle[1]}}
                            <el-input-number size="small" v-model="hour.rangeEnd" :min="0" :max="23"></el-input-number>
                            {{text.Hours.cycle[2]}}
                        </el-radio>
                    </el-row>
                </div>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label"><i class="el-icon-date"></i> {{text.Day.name}}</span>
                <div class="tabBody">
                    <el-row>
                        <el-radio v-model="day.cronEvery" label="1">{{text.Day.every}}</el-radio>
                    </el-row>
                    <el-row>
                        <el-radio v-model="day.cronEvery" label="2">{{text.Day.intervalWeek[0]}}
                            <el-input-number size="small" v-model="week.incrementIncrement" :min="1" :max="7"></el-input-number>
                            {{text.Day.intervalWeek[1]}}
                            <el-select size="small" v-model="week.incrementStart">
                                <el-option v-for="val in 7"  :label="text.Week[val-1]" :value="val"></el-option>
                            </el-select>
                            {{text.Day.intervalWeek[2]}}
                        </el-radio>
                    </el-row>
                    <el-row>
                        <el-radio v-model="day.cronEvery" label="3">{{text.Day.intervalDay[0]}}
                            <el-input-number size="small" v-model="day.incrementIncrement" :min="1" :max="31"></el-input-number>
                            {{text.Day.intervalDay[1]}}
                            <el-input-number size="small" v-model="day.incrementStart" :min="1" :max="31"></el-input-number>
                            {{text.Day.intervalDay[2]}}
                        </el-radio>
                    </el-row>
                    <el-row>
                        <el-radio class="long" v-model="day.cronEvery" label="4">{{text.Day.specificWeek}}
                            <el-select size="small" multiple v-model="week.specificSpecific">
                                <el-option v-for="val in 7"
                                           :label="text.Week[val-1]"
                                           :value="['SUN','MON','TUE','WED','THU','FRI','SAT'][val-1]"
                                ></el-option>
                            </el-select>
                        </el-radio>
                    </el-row>
                    <el-row>
                        <el-radio class="long" v-model="day.cronEvery" label="5">{{text.Day.specificDay}}
                            <el-select size="small" multiple v-model="day.specificSpecific">
                                <el-option v-for="val in 31"  :value="val">{{val}}</el-option>
                            </el-select>
                        </el-radio>
                    </el-row>
                    <el-row>
                        <el-radio v-model="day.cronEvery" label="6">{{text.Day.lastDay}}</el-radio>
                    </el-row>
                    <el-row>
                        <el-radio v-model="day.cronEvery" label="7">{{text.Day.lastWeekday}}</el-radio>
                    </el-row>
                    <el-row>
                        <el-radio v-model="day.cronEvery" label="8">{{text.Day.lastWeek[0]}}
                            <el-select size="small" v-model="day.cronLastSpecificDomDay">
                                <el-option v-for="val in 7"  :label="text.Week[val-1]" :value="val"></el-option>
                            </el-select>
                            {{text.Day.lastWeek[1]||''}}
                        </el-radio>
                    </el-row>
                    <el-row>
                        <el-radio v-model="day.cronEvery" label="9">
                            <el-input-number size="small" v-model="day.cronDaysBeforeEomMinus" :min="1" :max="31"></el-input-number>
                            {{text.Day.beforeEndMonth[0]}}
                        </el-radio>
                    </el-row>
                    <el-row>
                        <el-radio v-model="day.cronEvery" label="10">{{text.Day.nearestWeekday[0]}}
                            <el-input-number size="small" v-model="day.cronDaysNearestWeekday" :min="1" :max="31"></el-input-number>
                            {{text.Day.nearestWeekday[1]}}
                        </el-radio>
                    </el-row>
                    <el-row>
                        <el-radio v-model="day.cronEvery" label="11">{{text.Day.someWeekday[0]}}
                            <el-input-number size="small" v-model="week.cronNthDayNth" :min="1" :max="5"></el-input-number>
                            <el-select size="small" v-model="week.cronNthDayDay">
                                <el-option v-for="val in 7" :label="text.Week[val-1]" :value="val"></el-option>
                            </el-select>
                            {{text.Day.someWeekday[1]}}
                        </el-radio>
                    </el-row>
                </div>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label"><i class="el-icon-date"></i> {{text.Month.name}}</span>
                <div class="tabBody">
                    <el-row>
                        <el-radio v-model="month.cronEvery" label="1">{{text.Month.every}}</el-radio>
                    </el-row>
                    <el-row>
                        <el-radio v-model="month.cronEvery" label="2">{{text.Month.interval[0]}}
                            <el-input-number size="small" v-model="month.incrementIncrement" :min="0" :max="12"></el-input-number>
                            {{text.Month.interval[1]}}
                            <el-input-number size="small" v-model="month.incrementStart" :min="0" :max="12"></el-input-number>
                        </el-radio>
                    </el-row>
                    <el-row>
                        <el-radio class="long" v-model="month.cronEvery" label="3">{{text.Month.specific}}
                            <el-select size="small" multiple v-model="month.specificSpecific">
                                <el-option v-for="val in 12"  :label="val" :value="val"></el-option>
                            </el-select>
                        </el-radio>
                    </el-row>
                    <el-row>
                        <el-radio v-model="month.cronEvery" label="4">{{text.Month.cycle[0]}}
                            <el-input-number size="small" v-model="month.rangeStart" :min="1" :max="12"></el-input-number>
                            {{text.Month.cycle[1]}}
                            <el-input-number size="small" v-model="month.rangeEnd" :min="1" :max="12"></el-input-number>
                        </el-radio>
                    </el-row>
                </div>
            </el-tab-pane>
<!--            <el-tab-pane>-->
<!--                <span slot="label"><i class="el-icon-date"></i> {{text.Year.name}}</span>-->
<!--                <div class="tabBody">-->
<!--                    <el-row>-->
<!--                        <el-radio v-model="year.cronEvery" label="1">{{text.Year.every}}</el-radio>-->
<!--                    </el-row>-->
<!--                    <el-row>-->
<!--                        <el-radio v-model="year.cronEvery" label="2">{{text.Year.interval[0]}}-->
<!--                            <el-input-number size="small" v-model="year.incrementIncrement" :min="1" :max="99"></el-input-number>-->
<!--                            {{text.Year.interval[1]}}-->
<!--                            <el-input-number size="small" v-model="year.incrementStart" :min="2018" :max="2118"></el-input-number>-->
<!--                        </el-radio>-->
<!--                    </el-row>-->
<!--                    <el-row>-->
<!--                        <el-radio class="long" v-model="year.cronEvery" label="3">{{text.Year.specific}}-->
<!--                            <el-select size="small" filterable multiple v-model="year.specificSpecific">-->
<!--                                <el-option v-for="val in 100" :label="2017+val" :value="2017+val"></el-option>-->
<!--                            </el-select>-->
<!--                        </el-radio>-->
<!--                    </el-row>-->
<!--                    <el-row>-->
<!--                        <el-radio v-model="year.cronEvery" label="4">{{text.Year.cycle[0]}}-->
<!--                            <el-input-number size="small" v-model="year.rangeStart"  :min="2018" :max="2118"></el-input-number>-->
<!--                            {{text.Year.cycle[1]}}-->
<!--                            <el-input-number size="small" v-model="year.rangeEnd"  :min="2018" :max="2118"></el-input-number>-->
<!--                        </el-radio>-->
<!--                    </el-row>-->
<!--                </div>-->
<!--            </el-tab-pane>-->
        </el-tabs>
        <div class="bottom">
            <div class="value">表达式:{{this.cron}}</div>
<!--            <ResultDisplay style="border: 1px solid #DCDFE6;padding:15px;margin-bottom: 10px;margin-top: 10px;" :ex="this.cron"></ResultDisplay>-->
<!--            <el-button type="primary" @click="change">{{text.Save}}</el-button>-->
<!--            <el-button type="primary" @click="close">{{text.Close}}</el-button>-->
        </div>
    </div>
    `,
    // components: {
    //     ResultDisplay
    // }
})
    /**
     * @Description 推算cron最近五次运行时间
     * @Param cron
     * @Return com.tianqiauto.base.model.AjaxResult
     * @Author wjx
     * @Date 2023/4/18 16:36
     **/
    @GetMapping("/tuiSuanCron")
    public AjaxResult tuiSuanCron(String cron){
        if (!CronSequenceGenerator.isValidExpression(cron)){
            return AjaxResult.getInstance().setSuccessChain(false).setMessageChain("无效表达式:" + cron);
        }
        ArrayList<String> strings = null;
        try {
            CronSequenceGenerator cronSequenceGenerator = new CronSequenceGenerator(cron);
            Date next = new Date();
            SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            strings = new ArrayList<>();
            for (int i = 0; i < 5; i++) {
                next = cronSequenceGenerator.next(next);
                if (next != null){
                    String date = simpleDateFormat.format(next);
                    strings.add(date);
                }else {
                    break;
                }
            }
        } catch (Exception e) {
            return AjaxResult.getInstance().setSuccessChain(false).setMessageChain("表达式解析发生错误!");
        }
        return AjaxResult.getInstance().setSuccessChain(true).setDataChain(strings);
    }

到了这里,关于Cron 选择器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端Javascript | 数组值随机选择函数

    为了解决 postman 传参数据定制化,需要写一点前置脚本,有用到随机选取数组中的值来造数据。

    2024年02月07日
    浏览(49)
  • 『 前端三剑客 』:CSS选择器

    上一篇文章我们介绍了 html 的常用标签及用法 , 这次我们来介绍 css 来对页面进行美化处理 css 全称 : 层叠样式表 (Cascading Style Sheets). 主要作用 : 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面 的效果. 能够做到 页面的样式和结构分离 . 一 . 基本语法 基本语

    2024年02月09日
    浏览(44)
  • 一次讲清楚Linux Cron和 Spring Cron

    定时任务是我们日常开发中经常用到的一个功能点,无论是Linux服务器上Crontab还是Spring task schedule,都会使用到cron表达式去实现定时任务的配置。不过,一定要注意,Linux cron表达式和Spring的cron表达式不一样,下面来一次讲清楚。 一,Linux cron表达式 1,长度: 5 位 (中间有一

    2024年02月11日
    浏览(40)
  • 前端后端交互-ElementUI(日期选择器)

    日期选择器 页面效果 页面效果 组件源码 数据绑定 后端处理 控制器 mapper service 请求日志 请求日期范围 日志解析 说明 数据库的日期类型是 datetime 在真正的实体类上对应的是 使用 vo 时使用 String 类型,在测试过程中 Date 反复报错

    2024年02月10日
    浏览(45)
  • 前端三剑客CSS篇——CSS选择器

    CSS是前端三剑客不可忽略的一部分,CSS对前端来说是一个美化页面的工具,而且其功能十分强大,程序员可以如果熟练运用的话可以‘随心所欲’的更改页面的样式,使得页面更加美观。 CSS标签是由 键值对 的模式来排列的。 CSS三大特征👍 学习CSS之前,先认识一下CSS的三大

    2024年02月04日
    浏览(47)
  • 前端成神之路-CSS(选择器、背景、特性)

    目录 前端成神之路-CSS(选择器、背景、特性) CSS 第二天 1. CSS复合选择器 1.1 后代选择器(重点) 1.2 子元素选择器 1.3 交集选择器 1.4 并集选择器(重点) 测试题 1.5 链接伪类选择器(重点) 1.6 复合选择器总结 2. 标签显示模式(display)重点 2.1 什么是标签显示模式 2.2 块级

    2024年02月08日
    浏览(43)
  • 前端选择器:掌握未来Web开发的关键技术

    随着Web技术的不断发展,前端选择器已经成为现代Web开发中不可或缺的一部分。它们允许开发者以更加灵活和高效的方式操作DOM(文档对象模型),从而实现复杂的交互效果。在本文中,我们将深入探讨前端选择器的各种类型、用法以及优势,并为您提供最完整的代码示例。

    2024年02月09日
    浏览(52)
  • 前端02:CSS选择器等基础知识

    CSS基础选择器、设置字体样式、文本样式、CSS的三种引入方式、能使用Chrome调试工具调试样式 HTML专注做结构呈现,样式交给CSS,即结构(HTML)和样式CSS相分离 CSS主要由量分布构成,选择器以及一条或多条声明 选择器:给谁改样式 声明:改什么样的样式 在head最后写上styt

    2023年04月25日
    浏览(43)
  • 【前端从0开始】CSS3新增选择器

    1 什么是CSS3 CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效(阴影)、多栏布局(display:flex)、2D3D和动画等模块 2 CSS选择器 选择器 例子 例子描

    2024年02月11日
    浏览(42)
  • 前端Vue自定义地址展示地址选择地址管理组件

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月11日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包