前端开发攻略---封装calendar日历组件，实现日期多选。可根据您的需求任意调整，可玩性强。

1、演示

2、简介

1、该日历组件是纯手搓出来的，没依赖任何组件库，因此您可以随意又轻松的改变代码，以实现您的需求。

2、代码清爽干净，逻辑精妙，您可以好好品尝。

3、好戏开场。

3、代码（Vue3写法）

1、子组件

 您可以在components文件夹下创建一个干净的组件，直接将代码复制粘贴即可。

src/components/py-calendar/index.vue

<template>
  <div class="box">
    <div class="left">
      <div class="top">
        <div>
          <span class="iconfont" @click="changeMonth(-1)">←</span>
        </div>
        <span>{{ startMonth.year }}年{{ startMonth.month }}月</span>
        <span></span>
      </div>
      <div class="calendarMain">
        <div class="weekDays">
          <span>日</span>
          <span>一</span>
          <span>二</span>
          <span>三</span>
          <span>四</span>
          <span>五</span>
          <span>六</span>
        </div>
        <div class="days">
          <div
            class="day"
            v-for="item in startMonth.dates"
            :class="dayClass(item)"
            :style="dayStyle(item)"
            @mouseenter="dayMouseMove(item)"
            @click="dayMouseClick(item)"
          >
            {{ item.day }}
            <span v-if="item.yymmdd == selectDate[0]?.yymmdd">开始</span>
            <span v-if="item.yymmdd == selectDate[1]?.yymmdd">结束</span>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <span></span>
        <span>{{ endMonth.year }}年{{ endMonth.month }}月</span>
        <div>
          <span class="iconfont" @click="changeMonth(1)">→</span>
        </div>
      </div>
      <div class="calendarMain">
        <div class="weekDays">
          <span>日</span>
          <span>一</span>
          <span>二</span>
          <span>三</span>
          <span>四</span>
          <span>五</span>
          <span>六</span>
        </div>
        <div class="days">
          <div
            class="day"
            v-for="item in endMonth.dates"
            :class="dayClass(item)"
            :style="dayStyle(item)"
            @mouseenter="dayMouseMove(item)"
            @click="dayMouseClick(item)"
          >
            {{ item.day }}
            <span v-if="item.yymmdd == selectDate[0]?.yymmdd">开始</span>
            <span v-if="item.yymmdd == selectDate[1]?.yymmdd">结束</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { getMonthDates } from './index.js'
const currentMonthIndex = ref(0)
const startMonth = ref({})
const endMonth = ref({})
const selectDate = ref([])
const isMove = ref(false)
const emits = defineEmits(['change'])

onMounted(() => {
  initCalendar()
})

const initCalendar = () => {
  getCalendarData()
  const startIndex = startMonth.value.dates.findIndex(item => !item.isTodayBefore)
  if (startIndex == startMonth.value.dates.length - 1) {
    selectDate.value[0] = startMonth.value.dates[startIndex]
    selectDate.value[1] = endMonth.value.dates[0]
  } else {
    selectDate.value[0] = startMonth.value.dates[startIndex]
    selectDate.value[1] = startMonth.value.dates[startIndex + 1]
  }
}
const getCalendarData = () => {
  startMonth.value = getMonthDates(currentMonthIndex.value)
  endMonth.value = getMonthDates(currentMonthIndex.value + 1)
}
const changeMonth = num => {
  currentMonthIndex.value += num
  getCalendarData()
}
const dayClass = item => {
  if (item.isTodayBefore) return 'disabled'
  if (item.yymmdd == selectDate.value[0]?.yymmdd) return 'active'
  if (item.yymmdd == selectDate.value[1]?.yymmdd) return 'active'
  if (getDatesBetween(selectDate.value[0]?.yymmdd, selectDate.value[1]?.yymmdd).includes(item.yymmdd)) return 'middle'
}
const dayStyle = item => {
  if (item.day == 1) return { marginLeft: item.week * 50 + 'px' }
  if (!item.isTodayBefore && (item.week == 0 || item.week == 6)) return { color: '#266fff' }
}
const dayMouseClick = item => {
  if (item.isTodayBefore) return
  let arr = [...selectDate.value]
  if (arr[0] && arr[1] && !isMove.value) {
    arr = []
    arr[0] = item
    isMove.value = true
  } else if (arr[0] && arr[1] && isMove.value) {
    isMove.value = false
    arr[1] = item
  } else if (arr[0] && !arr[1] && !isMove.value) {
    arr[0] = item
    isMove.value = false
  } else if (arr[0] && !arr[1] && isMove.value) {
    arr[0] = item
    isMove.value = true
  }
  selectDate.value = arr
  if (arr[0] && arr[1]) {
    emits('change', getDatesBetween(arr[0].yymmdd, arr[1].yymmdd))
  }
}
const dayMouseMove = item => {
  if (item.isTodayBefore) return
  if (!isMove.value) return
  if (item.yymmdd <= selectDate.value[0]?.yymmdd) {
    selectDate.value[1] = ''
  } else {
    selectDate.value[1] = item
  }
}

const getDatesBetween = (date1, date2) => {
  let dates = []
  let currentDate = new Date(date1)
  let endDate = new Date(date2)

  while (currentDate <= endDate) {
    let dateString = currentDate.toISOString().substr(0, 10)
    dates.push(dateString)
    currentDate.setDate(currentDate.getDate() + 1)
  }
  return dates
}
</script>

<style scoped lang="scss">
.box {
  width: 793px;
  height: 436px;
  box-shadow: 2px 2px 6px #0003;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 30px 15px;
  .left,
  .right {
    width: 46%;
    height: 95%;
    .top {
      display: flex;
      justify-content: space-between;
      font-weight: bold;
      .iconfont {
        cursor: pointer;
        user-select: none;
      }
    }
    .calendarMain {
      .weekDays {
        font-weight: bold;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        & > span {
          display: inline-block;
          width: 50px;
          height: 50px;
          line-height: 50px;
          text-align: center;
        }
        & > span:first-child,
        & > span:last-child {
          color: #266fff;
        }
      }
      .days {
        display: flex;
        flex-wrap: wrap;
        cursor: pointer;
        .day {
          width: 50px;
          height: 50px;
          height: 50px;
          text-align: center;
          line-height: 60px;
          color: #111;
          font-size: 14px;
          position: relative;
          & > span {
            position: absolute;
            left: 11px;
            top: -18px;
          }
        }
        .disabled {
          color: #ccc;
          cursor: not-allowed;
        }
        .active {
          background-color: #266fff;
          color: #fff !important;
        }
        .middle {
          background-color: rgba(38, 111, 255, 0.3);
          color: #fff !important;
        }
      }
    }
  }
  .bottom {
    width: 100%;
    text-align: center;
    color: #111;
  }
}
</style>

src/components/py-calendar/index.js

export function getMonthDates(monthOffset) {
  const today = new Date()
  const targetDate = new Date(today.getFullYear(), today.getMonth() + monthOffset, 1)
  const year = targetDate.getFullYear()
  let month = targetDate.getMonth() + 1 // 月份是从0开始的，所以要加1
  month = month >= 10 ? month : '0' + month
  const firstDay = new Date(year, targetDate.getMonth(), 1)
  const lastDay = new Date(year, targetDate.getMonth() + 1, 0)
  const monthDates = []
  for (let d = firstDay; d <= lastDay; d.setDate(d.getDate() + 1)) {
    const day = d.getDate()
    const dayOfWeek = d.getDay() // 返回0到6，0代表星期日
    const isTodayBefore = d.getTime() < today.setHours(0, 0, 0, 0) // 判断是否是今天之前的日期
    monthDates.push({
      day,
      week: dayOfWeek,
      isTodayBefore,
      yymmdd: `${year}-${month}-${day >= 10 ? day : '0' + day}`,
    })
  }
  return { year, month, dates: monthDates }
}

2、父组件

随便在一个文件夹下使用日历组件

<template>
  <div>
    <PYCalendar @change="change"></PYCalendar>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import PYCalendar from '@/components/py-calendar/index.vue'

const change = dateArr => {
  console.log(dateArr, '父组件获取到的数据')
}
</script>

<style scoped lang="scss"></style>

4、代码（Vue2写法 ）

1、子组件

 您可以在components文件夹下创建一个干净的组件，直接将代码复制粘贴即可。

src/components/py-calendar/index.vue

<template>
  <div class="box">
    <div class="left">
      <div class="top">
        <div>
          <span class="iconfont" @click="changeMonth(-1)">←</span>
        </div>
        <span>{{ startMonth.year }}年{{ startMonth.month }}月</span>
        <span></span>
      </div>
      <div class="calendarMain">
        <div class="weekDays">
          <span>日</span>
          <span>一</span>
          <span>二</span>
          <span>三</span>
          <span>四</span>
          <span>五</span>
          <span>六</span>
        </div>
        <div class="days">
          <div
            class="day"
            v-for="item in startMonth.dates"
            :class="dayClass(item)"
            :style="dayStyle(item)"
            @mouseenter="dayMouseMove(item)"
            @click="dayMouseClick(item)"
          >
            {{ item.day }}
            <span v-if="item.yymmdd == selectDate[0]?.yymmdd">开始</span>
            <span v-if="item.yymmdd == selectDate[1]?.yymmdd">结束</span>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <span></span>
        <span>{{ endMonth.year }}年{{ endMonth.month }}月</span>
        <div>
          <span class="iconfont" @click="changeMonth(1)">→</span>
        </div>
      </div>
      <div class="calendarMain">
        <div class="weekDays">
          <span>日</span>
          <span>一</span>
          <span>二</span>
          <span>三</span>
          <span>四</span>
          <span>五</span>
          <span>六</span>
        </div>
        <div class="days">
          <div
            class="day"
            v-for="item in endMonth.dates"
            :class="dayClass(item)"
            :style="dayStyle(item)"
            @mouseenter="dayMouseMove(item)"
            @click="dayMouseClick(item)"
          >
            {{ item.day }}
            <span v-if="item.yymmdd == selectDate[0]?.yymmdd">开始</span>
            <span v-if="item.yymmdd == selectDate[1]?.yymmdd">结束</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getMonthDates } from './index.js'
export default {
  data() {
    return {
      currentMonthIndex: 0,
      startMonth: {},
      endMonth: {},
      selectDate: [],
      isMove: false,
    }
  },
  mounted() {
    this.initCalendar()
  },
  methods: {
    initCalendar() {
      this.getCalendarData()
      const startIndex = this.startMonth.dates.findIndex(item => !item.isTodayBefore)
      if (startIndex == this.startMonth.dates.length - 1) {
        this.selectDate[0] = this.startMonth.dates[startIndex]
        this.selectDate[1] = this.endMonth.dates[0]
      } else {
        this.selectDate[0] = this.startMonth.dates[startIndex]
        this.selectDate[1] = this.startMonth.dates[startIndex + 1]
      }
    },
    getCalendarData() {
      this.startMonth = getMonthDates(this.currentMonthIndex)
      this.endMonth = getMonthDates(this.currentMonthIndex + 1)
    },
    changeMonth(num) {
      this.currentMonthIndex += num
      this.getCalendarData()
    },
    dayClass(item) {
      if (item.isTodayBefore) return 'disabled'
      if (item.yymmdd == this.selectDate[0]?.yymmdd) return 'active'
      if (item.yymmdd == this.selectDate[1]?.yymmdd) return 'active'
      if (this.getDatesBetween(this.selectDate[0]?.yymmdd, this.selectDate[1]?.yymmdd).includes(item.yymmdd)) return 'middle'
    },
    dayStyle(item) {
      if (item.day == 1) return { marginLeft: item.week * 50 + 'px' }
      if (!item.isTodayBefore && (item.week == 0 || item.week == 6)) return { color: '#266fff' }
    },
    dayMouseClick(item) {
      if (item.isTodayBefore) return
      let arr = [...this.selectDate]
      if (arr[0] && arr[1] && !this.isMove) {
        arr = []
        arr[0] = item
        this.isMove = true
      } else if (arr[0] && arr[1] && this.isMove) {
        this.isMove = false
        arr[1] = item
      } else if (arr[0] && !arr[1] && !this.isMove) {
        arr[0] = item
        this.isMove = false
      } else if (arr[0] && !arr[1] && this.isMove) {
        arr[0] = item
        this.isMove = true
      }
      this.selectDate = arr
      if (arr[0] && arr[1]) {
        this.$emit('change', this.getDatesBetween(arr[0].yymmdd, arr[1].yymmdd))
      }
    },
    dayMouseMove(item) {
      if (item.isTodayBefore) return
      if (!this.isMove) return
      if (item.yymmdd <= this.selectDate[0]?.yymmdd) {
        this.selectDate[1] = ''
      } else {
        this.selectDate[1] = item
      }
    },
    getDatesBetween(date1, date2) {
      let dates = []
      let currentDate = new Date(date1)
      let endDate = new Date(date2)

      while (currentDate <= endDate) {
        let dateString = currentDate.toISOString().substr(0, 10)
        dates.push(dateString)
        currentDate.setDate(currentDate.getDate() + 1)
      }
      return dates
    },
  },
}
</script>

<style scoped lang="scss">
.box {
  width: 793px;
  height: 436px;
  box-shadow: 2px 2px 6px #0003;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 30px 15px;
  .left,
  .right {
    width: 46%;
    height: 95%;
    .top {
      display: flex;
      justify-content: space-between;
      font-weight: bold;
      .iconfont {
        cursor: pointer;
        user-select: none;
      }
    }
    .calendarMain {
      .weekDays {
        font-weight: bold;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        & > span {
          display: inline-block;
          width: 50px;
          height: 50px;
          line-height: 50px;
          text-align: center;
        }
        & > span:first-child,
        & > span:last-child {
          color: #266fff;
        }
      }
      .days {
        display: flex;
        flex-wrap: wrap;
        cursor: pointer;
        .day {
          width: 50px;
          height: 50px;
          height: 50px;
          text-align: center;
          line-height: 60px;
          color: #111;
          font-size: 14px;
          position: relative;
          & > span {
            position: absolute;
            left: 11px;
            top: -18px;
          }
        }
        .disabled {
          color: #ccc;
          cursor: not-allowed;
        }
        .active {
          background-color: #266fff;
          color: #fff !important;
        }
        .middle {
          background-color: rgba(38, 111, 255, 0.3);
          color: #fff !important;
        }
      }
    }
  }
  .bottom {
    width: 100%;
    text-align: center;
    color: #111;
  }
}
</style>

src/components/py-calendar/index.js

export function getMonthDates(monthOffset) {
  const today = new Date()
  const targetDate = new Date(today.getFullYear(), today.getMonth() + monthOffset, 1)
  const year = targetDate.getFullYear()
  let month = targetDate.getMonth() + 1 // 月份是从0开始的，所以要加1
  month = month >= 10 ? month : '0' + month
  const firstDay = new Date(year, targetDate.getMonth(), 1)
  const lastDay = new Date(year, targetDate.getMonth() + 1, 0)
  const monthDates = []
  for (let d = firstDay; d <= lastDay; d.setDate(d.getDate() + 1)) {
    const day = d.getDate()
    const dayOfWeek = d.getDay() // 返回0到6，0代表星期日
    const isTodayBefore = d.getTime() < today.setHours(0, 0, 0, 0) // 判断是否是今天之前的日期
    monthDates.push({
      day,
      week: dayOfWeek,
      isTodayBefore,
      yymmdd: `${year}-${month}-${day >= 10 ? day : '0' + day}`,
    })
  }
  return { year, month, dates: monthDates }
}

2、父组件

随便在一个文件夹下使用日历组件

<template>
  <div>
    <PYCalendar @change="change"></PYCalendar>
  </div>
</template>

<script>
import PYCalendar from '@/components/py-calendar/index.vue'
export default {
  data() {
    return {}
  },
  methods: {
    change(e) {
      console.log(e, '父组件')
    },
  },
}
</script>

<style scoped lang="scss"></style>

5、代码解析

代码解析（子组件中的函数）：

  1. initCalendar: 初始化日历，通过调用 getCalendarData() 获取日历的初始数据。然后找到第一个不在过去的日期的索引（isTodayBefore），并根据该索引设置初始选定的日期范围（selectDate）。如果起始索引是起始月份中的最后一个日期，则将结束日期设置为下个月的第一个日期。

  2. getCalendarData: 通过调用 getMonthDates 获取当前月份和下个月份的日历数据，分别为 currentMonthIndex.value 和 currentMonthIndex.value + 1。

  3. changeMonth: 通过给定的偏移量（num）改变当前月份，更新 currentMonthIndex，然后调用 getCalendarData() 刷新日历数据。

  4. dayClass: 确定给定日期（item）的 CSS 类。如果日期在过去，则返回 ‘disabled’；如果日期与选定日期之一匹配，则返回 ‘active’；如果日期在两个选定日期之间，则返回 ‘middle’。

  5. dayStyle: 确定给定日期（item）的内联样式。为每个月的第一天设置左边距，并将周末的文字颜色设置为蓝色。

  6. dayMouseClick: 处理日期（item）的鼠标单击事件。根据单击的日期和选择的位置更新选定的日期范围（selectDate），并根据是否同时选择了两个日期来触发 ‘change’ 事件。

  7. dayMouseMove: 处理日期（item）的鼠标移动事件。如果日期选择正在进行中（isMove.value 为 true），则更新选定范围的结束日期。

代码解析（外部导入的函数）：

  1. export function getMonthDates(monthOffset) {: 这是一个导出函数的声明，函数名为 getMonthDates，它接受一个参数 monthOffset，表示要获取的月份相对于当前月份的偏移量。

  2. const today = new Date(): 创建了一个当前日期的 Date 对象。

  3. const targetDate = new Date(today.getFullYear(), today.getMonth() + monthOffset, 1): 创建了一个目标日期的 Date 对象，该日期是当前日期加上指定的月份偏移量，月份从0开始计数，因此 today.getMonth() 返回的是当前月份的索引，例如1月是0，2月是1，以此类推。

  4. const year = targetDate.getFullYear(): 获取目标日期的年份。

  5. let month = targetDate.getMonth() + 1: 获取目标日期的月份，并加1，因为月份是从0开始计数的，需要进行修正。

  6. month = month >= 10 ? month : '0' + month: 如果月份小于10，就在前面补0，确保月份是两位数的字符串格式。

  7. const firstDay = new Date(year, targetDate.getMonth(), 1): 获取目标月份的第一天的日期对象。

  8. const lastDay = new Date(year, targetDate.getMonth() + 1, 0): 获取目标月份的最后一天的日期对象。这里将月份加1，然后日期设为0，相当于得到了目标月份的最后一天。

  9. const monthDates = []: 创建一个空数组，用于存储该月份的日期信息。

  10. for (let d = firstDay; d <= lastDay; d.setDate(d.getDate() + 1)) {: 使用 for 循环遍历从第一天到最后一天的日期。

  11. const day = d.getDate(): 获取当前日期的日份。

  12. const dayOfWeek = d.getDay(): 获取当前日期是星期几，返回值是一个从0到6的整数，0 代表星期日。

  13. const isTodayBefore = d.getTime() < today.setHours(0, 0, 0, 0): 判断当前日期是否在今天之前。getTime() 返回日期的毫秒数，通过比较毫秒数可以确定日期的先后顺序。

  14. monthDates.push({ day, week: dayOfWeek, isTodayBefore, yymmdd: ����−year−{month}-${day >= 10 ? day : ‘0’ + day} }): 将当前日期的信息以对象的形式添加到 monthDates 数组中，包括日期、星期几、是否在今天之前以及日期的格式化字符串（年-月-日）。

  15. return { year, month, dates: monthDates }: 返回包含年份、月份和该月份日期信息的对象。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/571354.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

分布式与一致性协议之CAP(一)

分布式与一致性协议之CAP(一)

CAP理论 概述。 在开发分布式系统的时候&#xff0c;会遇到一个非常棘手的问题&#xff0c;那就是如何根据业务特点&#xff0c;为系统设计合适的分区容错一致性模型&#xff0c;以实现集群能力。这个问题棘手在当发生分区错误时&#xff0c;应该如何保障系统稳定运行而不影响…
阅读更多...
C++多态(个人笔记)

C++多态(个人笔记)

C多态 1.多态的定义以及实现1.1多态的构成条件1.2虚函数1.3虚函数的重写1.4override和final1.5函数重载&#xff0c;覆盖&#xff08;重写&#xff09;&#xff0c;隐藏&#xff08;重定义&#xff09;区别 2.抽象类2.1接口继承和实现继承的区别 3.多态原理3.1虚函数表3.2多态的…
阅读更多...
SpringBoot整合七牛云实现图片的上传管理

SpringBoot整合七牛云实现图片的上传管理

唠嗑部分 各位小伙伴大家好&#xff0c;我是全栈小白&#xff0c;今天我们来分享一下SpringBoot如何整合七牛云存储实现图片的上传与存储 首先我们来说说图片存储&#xff0c;在项目中图片几乎是必不可少的&#xff0c;那么大家会选择怎样存储呢&#xff0c;当然有几种方案 …
阅读更多...
软件游戏缺失d3dcompiler_43.dll怎么修复？分享多种靠谱的解决方法

软件游戏缺失d3dcompiler_43.dll怎么修复？分享多种靠谱的解决方法

在我们日常频繁地操作和使用电脑的过程中&#xff0c;时常会遇到一些突发的技术问题。其中一种常见的情况是&#xff0c;在尝试启动或运行某个应用程序时&#xff0c;系统会弹出一个错误提示窗口&#xff0c;明确指出当前电脑环境中缺少了一个至关重要的动态链接库文件——d3dc…
阅读更多...
算法学习笔记Day9——动态规划初探

算法学习笔记Day9——动态规划初探

一、介绍 本文解决几个问题&#xff1a;动态规划是什么&#xff1f;解决动态规划问题有什么技巧&#xff1f;如何学习动态规划&#xff1f; 1. 动态规划问题的一般形式就是求最值。动态规划其实是运筹学的一种最优化方法&#xff0c;只不过在计算机问题上应用比较多&#xff…
阅读更多...
STM32cubemx和HAL库的使用入门--点亮一颗LED

STM32cubemx和HAL库的使用入门--点亮一颗LED

一&#xff1a;流程介绍 &#xff08;1&#xff09;环境搭建 1 &#xff1a;stm32cubemx安装 2 &#xff1a;stm32xxFW安装 3 &#xff1a;MDK5安装 4 &#xff1a;生成MDK版本project &#xff08;2&#xff09;stm32cubemx创建工程&#xff0c;选择芯片型…
阅读更多...
删除链表的倒数第n个节点的最优算法实现

删除链表的倒数第n个节点的最优算法实现

给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 提示&#xff1a; 链表中结点的数目为 sz 1 < sz < 300 < Node.val < 1001 < n < sz 你能尝试使用一趟扫描实现吗&#xff1f; 具体实现 要删除链表的倒数第 n 个…
阅读更多...
OpenHarmony语言基础类库【@ohos.url (URL字符串解析)】

OpenHarmony语言基础类库【@ohos.url (URL字符串解析)】

说明&#xff1a; 本模块首批接口从API version 7开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import Url from ohos.url URLParams9 URLParams接口定义了一些处理URL查询字符串的实用方法。 constructor9 constructor(init?…
阅读更多...
基于Spring Boot的家具销售电商平台设计与实现

基于Spring Boot的家具销售电商平台设计与实现

基于Spring Boot的家具销售电商平台设计与实现 开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/idea 系统部分展示 系统功能界面图&#xff0c;在系统首页可以查看首页…
阅读更多...
代码随想录第44天|动态规划：完全背包理论基础 518.零钱兑换II 377. 组合总和 Ⅳ

代码随想录第44天|动态规划：完全背包理论基础 518.零钱兑换II 377. 组合总和 Ⅳ

动态规划&#xff1a;完全背包理论基础 代码随想录 (programmercarl.com) 动态规划之完全背包&#xff0c;装满背包有多少种方法&#xff1f;组合与排列有讲究&#xff01;| LeetCode&#xff1a;518.零钱兑换II_哔哩哔哩_bilibili 完全背包和01背包问题唯一不同的地方就是&…
阅读更多...
xilinx Mailbox 中的ipi message地址计算方式

xilinx Mailbox 中的ipi message地址计算方式

适用于openAmp mailbox ipi id对应的ipi message地址计算方式 官方openamp硬件配置解析 OpenAMP Base Hardware Configurations - Xilinx Wiki - Confluence openamp官方设备树 meta-openamp/meta-xilinx-tools/recipes-bsp/device-tree/files/zynqmp-openamp.dtsi at rel-v2…
阅读更多...
C++:构造函数与析构函数

C++:构造函数与析构函数

目录 构造函数 构造函数的概念 析构函数的作用 自定义构造函数与默认构造函数 自定义构造函数 默认构造函数 调用自定义构造函数 析构函 自定义析构函数和默认构造函数 自定义构造函数 默认析构函数 构造函数 构造函数的概念 我们通常的函数是都需要有返回值的,但…
阅读更多...
共享单车数据分析与需求预测项目

共享单车数据分析与需求预测项目

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; 项目背景 自动自行车共享系统是传统自行车租赁的新一代&#xff0c;整个会员、租赁和归还过程都变得自动化。通过这些系统&#xff0c;用户可以…
阅读更多...
Jupyter的下载与安装

Jupyter的下载与安装

1.下载&#xff1a; 在anaconda的指定环境中 conda install nb_conda_kernels 2.打开 在anaconda指定环境中使用命令&#xff1a; jupyter notebook 3.输入指令后&#xff0c;会显示如下&#xff0c;根据显示地址打开 3. 在右边的new按钮处&#xff0c;选择相应环境&…
阅读更多...
DTU如何用VPN

DTU如何用VPN

在工业物联网的应用中&#xff0c;数据传输单元&#xff08;DTU&#xff09;作为关键的通信设备&#xff0c;承担着现场设备与远程服务器之间的数据传输任务。然而&#xff0c;在某些情况下&#xff0c;由于网络环境的限制或安全需求&#xff0c;我们需要通过虚拟私人网络&…
阅读更多...
SpringCloud系列（13）--Eureka服务名称修改和服务IP显示

SpringCloud系列（13）--Eureka服务名称修改和服务IP显示

前言&#xff1a;在上一章节中我们把服务提供者做成了集群&#xff0c;而本章节则是一些关于服务信息的配置&#xff0c;这部分知识对集群整体影响不大&#xff0c;不过最好还是掌握&#xff0c;毕竟万一有用到的地方呢 1、修改服务的名称 有时候我们想要修改服务的名称&#…
阅读更多...
【深度学习】DDoS-Detection-Challenge aitrans2024 入侵检测，基于机器学习（深度学习）判断网络入侵

【深度学习】DDoS-Detection-Challenge aitrans2024 入侵检测，基于机器学习（深度学习）判断网络入侵

当了次教练&#xff0c;做了个比赛的Stage1&#xff0c;https://github.com/AItransCompetition/DDoS-Detection-Challenge&#xff0c;得了100分。 一些记录&#xff1a; 1、提交的flowid不能重复&#xff0c;提交的是非入侵的数量和数据flowid,看check.cpp可知。 2、Stage…
阅读更多...
redis底层数据结构之ziplist

redis底层数据结构之ziplist

目录 一、概述二、ziplist结构三、Entry结构四、为什么ZipList特别省内存五、ziplist的缺点 redis底层数据结构已完结&#x1f44f;&#x1f44f;&#x1f44f;&#xff1a; ☑️redis底层数据结构之SDS☑️redis底层数据结构之ziplist☑️redis底层数据结构之quicklist☑️red…
阅读更多...
Docker的资源控制管理——Cgroups

Docker的资源控制管理——Cgroups

目录 引言&#xff1a; 一、CPU资源控制 1、简介 2、cgroup的四大功能&#xff1a; ①资源限制&#xff1a; ②优先级分配&#xff1a; ③资源统计&#xff1a; ④任务控制&#xff1a; 3、设置cpu使用率上限 4、查看CPU默认配置&#xff1a; 5、CPU压力测试 6、设…
阅读更多...
H264编码标准中游程编码应用介绍

H264编码标准中游程编码应用介绍

H264编码标准 H.264编码标准&#xff0c;也被称作MPEG-4 AVC&#xff08;Advanced Video Coding&#xff09;&#xff0c;是一种被广泛使用的数字视频压缩标准。它由国际电信联盟&#xff08;ITU-T&#xff09;和国际标准化组织&#xff08;ISO&#xff09;共同开发&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站