(el-Time-Picker)操作(不使用 ts)：Element-plus 中 TimePicker 组件的使用及输出想要时间格式需求的解决过程

news2024/9/24 9:19:40

Ⅰ、Element-plus 提供的 TimePicker 时间选择器组件与想要目标情况的对比：

1、Element-plus 提供 TimePicker 组件情况：

其一、Element-ui 自提供的 TimePicker 代码情况为(示例的代码)：

在这里插入图片描述



// Element-plus 提供的组件代码:
<template>
  <div class="example-basic">
    <el-time-picker v-model="value1" placeholder="Arbitrary time" />
    <el-time-picker
      v-model="value2"
      arrow-control
      placeholder="Arbitrary time"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref()
const value2 = ref()
</script>

<style>
.example-basic .el-date-editor {
  margin: 8px;
}
</style>

代码地址：https://element-plus.org/zh-CN/component/time-picker.html

其二、页面的显示情况为：

在这里插入图片描述

其三、页面想要的显示情况为：

在这里插入图片描述

Ⅱ、在项目中使用 TimePicker 组件遇到的问题：

1、遇到的问题：



使用该 TimePicker 组件遇到的问题：
其一、主要是处理后台返回的数据值，使其能在时间属性中正常展示;
其二、摸索该 TimePicker 组件，使其输出数据类型为：19:54:28;

2、无默认值，默认输出类型为：Thu Aug 08 2024 11:15:18 GMT+0800 (中国标准时间)(输出时间对象)

其一、代码为：

// 注意：此时没有从后台获取值来展示，而只是切换 el-time-picker 值后下发的数据类型;



//第一步：
const dateConfigurationForm = ref({})


//第二步：从后台拿值并处理数据;
dateConfigurationForm.value.hourValue = resp.data.sys_clock_time[0].time


//第三步：
<el-form-item label="时间[HH:MM:SS]:" prop="hourValue">
      <el-time-picker v-model="dateConfigurationForm.hourValue" format="HH:mm:ss" placeholder="选择时间" />
</el-form-item>


//第四步：提交的操作;
dateTimeObj.time = dateConfigurationForm.value.hourValue
其二、截图为：

//不给时间属性设置初始值时，输出的数据类型为：Thu Aug 08 2024 11:15:18 GMT+0800 (中国标准时间)(输出时间对象)
在这里插入图片描述

3、无默认值，默认输出类型为：20:32:16(使用格式)

其一、代码为：

// 注意：此时没有从后台获取值来展示，而只是切换 el-time-picker 值后下发的数据类型;



//第一步：
const dateConfigurationForm = ref({})


//第二步：从后台拿值并处理数据;
dateConfigurationForm.value.hourValue = resp.data.sys_clock_time[0].time


//第三步：
<el-form-item label="时间[HH:MM:SS]:" prop="hourValue">
      <el-time-picker v-model="dateConfigurationForm.hourValue" format="HH:mm:ss" value-format="HH:mm:ss" placeholder="选择时间" />
</el-form-item>


//第四步：提交的操作;
dateTimeObj.time = dateConfigurationForm.value.hourValue
其二、截图为：

//不给时间属性设置初始值时，输出的数据类型为：20:32:16(使用格式)
在这里插入图片描述

4、无默认值，默认输出类型为：19/33/36(使用格式)

其一、代码为：

// 注意：此时没有从后台获取值来展示，而只是切换 el-time-picker 值后下发的数据类型;



//第一步：
const dateConfigurationForm = ref({})


//第二步：从后台拿值并处理数据;
dateConfigurationForm.value.hourValue = resp.data.sys_clock_time[0].time


//第三步：
<el-form-item label="时间[HH:MM:SS]:" prop="hourValue">
      <el-time-picker v-model="dateConfigurationForm.hourValue" format="HH:mm:ss" value-format="HH/mm/ss" placeholder="选择时间" />
</el-form-item>


//第四步：提交的操作;
dateTimeObj.time = dateConfigurationForm.value.hourValue
其二、截图为：

//不给时间属性设置初始值时，输出的数据类型为：19/33/36(使用格式)
在这里插入图片描述

5、无默认值，默认输出类型为：1723131516000(时间戳)

其一、代码为：

// 注意：此时没有从后台获取值来展示，而只是切换 el-time-picker 值后下发的数据类型;



//第一步：
const dateConfigurationForm = ref({})


//第二步：从后台拿值并处理数据;
dateConfigurationForm.value.hourValue = resp.data.sys_clock_time[0].time


//第三步：
<el-form-item label="时间[HH:MM:SS]:" prop="hourValue">
      <el-time-picker v-model="dateConfigurationForm.hourValue" format="HH:mm:ss" value-format="x" placeholder="选择时间" />
</el-form-item>


//第四步：提交的操作;
dateTimeObj.time = dateConfigurationForm.value.hourValue
其二、截图为：

//不给时间属性设置初始值时，输出的数据类型为：1723131516000(使用格式)

在这里插入图片描述

6、有初始值类型为：19:54:28，可设置输出类型为：19:54:28(使用格式)

其一、代码为：


//第一步：
const dateConfigurationForm = ref({})


//第二步：从后台拿值并处理数据;
dateConfigurationForm.value.hourValue = resp.data.sys_clock_time[0].time


//第三步：
<el-form-item label="时间[HH:MM:SS]:" prop="hourValue">
      <el-time-picker v-model="dateConfigurationForm.hourValue" format="HH:mm:ss" value-format="HH:mm:ss"  placeholder="选择时间" />
</el-form-item>


//第四步：提交的操作;
dateTimeObj.time = dateConfigurationForm.value.hourValue
其二、截图为：

// 给时间属性设置初始值时，初始值为：19:54:28(后台返回数据格式)

在这里插入图片描述

其三、页面展示与数据下发类型的说明：

A、不设置 format 属性的情况下：

而 value-format 属性不设置，没有弹出时间配置的框，不能被识别，页面抛错且控制台抛错;

在这里插入图片描述

而 value-format 属性设置为 value-format="HH:mm:ss"，下发的数据结果为：19:54:28;
注意：此时无论手动切换时间的值还是不切换，下发的数据都是 19:54:28(即：以返回值的数据格式为主);

在这里插入图片描述

而 value-format 属性设置为 value-format="HH/mm/ss"，下发的数据结果为：19/54/28;
注意：此时是手动切换过时间的值，否则下发的数据都是 19:54:28 (即：以返回值的数据格式为主);

在这里插入图片描述

而 value-format 属性设置为 value-format="x"，没有弹出时间配置的框，不能选择，有问题且控制台抛错;
在这里插入图片描述
B、 format 属性设置为 format="HH:mm:ss" 的情况下：

而 value-format 属性不设置，没有弹出时间配置的框，不能选择，有问题且控制台抛错;

在这里插入图片描述

而 value-format 属性设置为 value-format="HH:mm:ss"，下发的数据结果为：19:54:28;
注意：此时无论手动切换时间的值还是不切换，下发的数据都是 19:54:28(即：以返回值的数据格式为主);

在这里插入图片描述

而 value-format 属性设置为 value-format="HH/mm/ss"，下发的数据结果为：19/54/28;
注意：此时是手动切换过时间的值，否则下发的数据都是 19:54:28 (即：以返回值的数据格式为主);

在这里插入图片描述

而 value-format 属性设置为 value-format="x"，没有弹出时间配置的框，不能选择，有问题且控制台抛错;

在这里插入图片描述

C、format 属性设置为 format="HH/mm/ss" 的情况下：

而 value-format 属性不设置，没有弹出时间配置的框，不能选择，有问题且控制台抛错;

在这里插入图片描述

而 value-format 属性设置为 value-format="HH:mm:ss"，下发的数据结果为：19:54:28;
注意：此时无论手动切换时间的值还是不切换，下发的数据都是 19:54:28(即：以返回值的数据格式为主);

在这里插入图片描述

而 value-format 属性设置为 value-format="HH/mm/ss"，下发的数据结果为：19/54/28;
注意：此时是手动切换过时间的值，否则下发的数据都是 19:54:28 (即：以返回值的数据格式为主);

在这里插入图片描述

而 value-format 属性设置为 value-format="x"，没有弹出时间配置的框，不能选择，有问题且控制台抛错;

在这里插入图片描述

D、format 属性设置为 format="x" 的情况下：

而 value-format 属性不设置，没有弹出时间配置的框，不能选择，有问题且控制台抛错;

在这里插入图片描述

而 value-format 属性设置为 value-format="HH:mm:ss"，页面能展示数值信息，但没有弹出时间配置的框，不能选择，有问题且控制台抛错;

在这里插入图片描述

而 value-format 属性设置为 value-format="HH/mm/ss"，下发的数据结果为：19/54/28;
注意：此时是手动切换过时间的值，否则下发的数据都是 19:54:28 (即：以返回值的数据格式为主)，但弹出来时间配置的框，貌似有问题，少了秒;

在这里插入图片描述

而 value-format 属性设置为 value-format="x"，没有弹出时间配置的框，不能选择，有问题且控制台抛错;

在这里插入图片描述

7、有初始值类型为：19/54/28，可设置输出类型为：19/54/28(使用格式)

其一、代码为：


//第一步：
const dateConfigurationForm = ref({})


//第二步：从后台拿值并处理数据;
dateConfigurationForm.value.hourValue = resp.data.sys_clock_time[0].time


//第三步：
<el-form-item label="时间[HH:MM:SS]:" prop="hourValue">
      <el-time-picker v-model="dateConfigurationForm.hourValue" format="HH/mm/ss" value-format="HH/mm/ss"  placeholder="选择时间" />
</el-form-item>


//第四步：提交的操作;
dateTimeObj.time = dateConfigurationForm.value.hourValue
其二、截图为：

// 给时间属性设置初始值时，初始值为：19/54/28(后台返回数据格式)

在这里插入图片描述

其三、页面展示与数据下发类型的说明：

// format 与 value-format 的配合总共有 16 种;
// 此时只展示拿什么类型的数据就配置什么类型的数据：

format 属性设置为 format="HH/mm/ss" 且 value-format 属性设置为 value-format="HH/mm/ss" 的情况下，下发的数据结果为：19/54/28;
注意：此时无论手动切换时间的值还是不切换，下发的数据都是 19/54/28(即：以返回值的数据格式为主);

在这里插入图片描述

8、有初始值类型为：43200000，可设置输出类型为：74156036400000(使用格式)

其一、代码为：


//第一步：
const dateConfigurationForm = ref({})


//第二步：从后台拿值并处理数据;
dateConfigurationForm.value.hourValue = resp.data.sys_clock_time[0].time


//第三步：
<el-form-item label="时间[HH:MM:SS]:" prop="hourValue">
      <el-time-picker v-model="dateConfigurationForm.hourValue" format="x" value-format="x"  placeholder="选择时间" />
</el-form-item>


//第四步：提交的操作;
dateTimeObj.time = dateConfigurationForm.value.hourValue
其二、截图为：

// 给时间属性设置初始值时，初始值为：43200000(后台返回数据格式)

在这里插入图片描述

9、对 Time Picker 组件可能有用的参数值：

在这里插入图片描述

其三、页面展示与数据下发类型的说明：

// format 与 value-format 的配合总共有 16 种;
// 此时只展示拿什么类型的数据就配置什么类型的数据：
// 关于下发的 74156036400000 数据值，再切换时间的时候，前面四五个数据值 7415 不动，具体待深究;

format 属性设置为 format="x" 且 value-format 属性设置为 value-format="x" 的情况下，下发的数据结果为：74156036400000;
注意：此时无论手动切换时间的值还是不切换，下发的数据都是 74156036400000(即：以返回值的数据格式为主);

在这里插入图片描述

Ⅲ、整体代码的面貌：

其一、整体代码为：



<script setup>

import axios from 'axios';
import { ref,inject,onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const dateConfigurationFormRef = ref(null)
const dateConfigurationForm = ref({})
const value1 = ref('')
const rootapi = inject("rootapi");


const checkZone = (rule, value,callback) => {
  if(/^[\da-zA-Z!@#$%&?_-]{3,31}$/.test(value)) {
    callback()
  } else {
    callback(new Error('请填写3至31个字母、数字或 -,_,!,@,#,$,%,&,?'))
  }
}

const rules = ref({
  dateValue: [
    { required: true, message: '日期不能为空', trigger: 'blur' },
  ],
  hourValue: [
    { required: true, message: '时间不能为空', trigger: 'blur' },
  ],
  zone: [
    { required: true, message: '时区名称不能为空', trigger: 'blur' },
    { validator: checkZone, trigger: 'blur' }
  ],
  flags: [
    { required: true, message: '时区偏移类型不能为空', trigger: 'change' },
  ],
  offsetHourValue: [
    { required: true, message: '时区偏移量不能为空', trigger: 'blur' },
  ]
})

const options = [
  {
    value: 1,
    label: 'add',
  },
  {
    value: 2,
    label: 'minus',
  }
]


const date_configuration_submit = async() => {
  if (!dateConfigurationFormRef) return;
  dateConfigurationFormRef.value.validate( async(valid) => {
    if (valid) {
      let dateTimeUrl, dateTimeObj={}, zoneTimeUrl, zoneTimeObj={}

      dateTimeUrl = "/api/system/clock_time/set"
      dateTimeObj.date = dateConfigurationForm.value.dateValue
      // dateTimeObj.date = value1.value
      dateTimeObj.time = dateConfigurationForm.value.hourValue

      zoneTimeUrl = "/api/system/clock_time_zone/set"
      zoneTimeObj.zone = dateConfigurationForm.value.zone
      zoneTimeObj.flags = dateConfigurationForm.value.flags
      zoneTimeObj.time = dateConfigurationForm.value.offsetHourValue

      try {
    
        // (后面需要放开的二次认证)
        // let result = await rootapi.post_crit_auth(url, {dummy: "dummy"}, count);
        // if (!result) return;

        // await axios.post(url,new URLSearchParams(ruleForm.value)).then(response => {
        //   console.log(response,111);
        // }).catch(error => {
        //   console.log(error,222);
        // })
        const dateTimeRequest = await axios.post(dateTimeUrl, new URLSearchParams(dateTimeObj))
        const zoneTimeRequest = await axios.post(zoneTimeUrl, new URLSearchParams(zoneTimeObj))
        axios.all([dateTimeRequest, zoneTimeRequest]).then(axios.spread(function(dateTimeRes, zoneTimeRes) { 
          if(dateTimeRes.status === 200 && zoneTimeRes.status === 200) {
            ElMessage({ message: '提交成功！',type: 'success',})
            // 更新时间配置表;
            date_configuration_refresh()
          } else {
            ElMessage.error('提交失败！'+ res.message)
          }
        }))
      } catch(err) {
        if (err.response) {
          let resp = err.response;
          rootapi.show_dialog(
              "unexpected error for " + "POST" + " " + dateTimeUrl + ":", 
              resp.data, true);
        }
        else {
            rootapi.show_dialog(
                "unexpected frontend error:", 
                err.message, true);
        }
      }
    } else {
      return false;
    }
  });
}

onMounted(() => {
  date_configuration_refresh()
  let obj1 = 123
  let obj2 = '456'
  console.log(obj1.toString());
  console.log(typeof(obj1.toString()),123456789)
  console.log(obj2.toString());
  console.log(typeof(obj2.toString()),987654321)
})

// 刷新及获取数据操作
const date_configuration_refresh = () => {
  get_date_time()
  get_zone_time()
}

// 获取页面日期和时间的信息展示：
const get_date_time = async() => {
  // console.log("TODO: GET /api/system/clock_time/get");
  // const resp = await axios.get("/api/system/clock_time/get");
  const resp = {
    "data": {
        "sys_clock_time": [
            {
                "date": "2024-08-07",
                "time": "19:54:28"
            }
        ]
    },
    "status": 200,
    "statusText": "OK",
    "headers": {
        "content-type": "application/json",
        "transfer-encoding": "chunked"
    },
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "method": "get",
        "url": "/api/system/clock_time/get"
    },
    "request": {}
  }
  console.log(resp,1111111);
  console.log(resp.data,222222);

  console.log(resp.data.sys_clock_time,33333333);
  if(resp?.status === 200 && resp?.data?.sys_clock_time) {
    dateConfigurationForm.value.dateValue = resp.data.sys_clock_time[0].date
    dateConfigurationForm.value.hourValue = resp.data.sys_clock_time[0].time
  }
}

// 获取页面时区的信息展示：
const get_zone_time = async() => {
  // console.log("TODO: GET /api/system/clock_time_zone/get");
  // const resp = await axios.get("/api/system/clock_time_zone/get");
  const resp ={
    "data": {
        "sys_clock_time_zone": [
            {
                "zone": "Beijing",
                "flags": 1,
                "time": "08:00:00"
            }
        ]
    },
    "status": 200,
    "statusText": "OK",
    "headers": {
        "content-type": "application/json",
        "transfer-encoding": "chunked"
    },
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "method": "get",
        "url": "/api/system/clock_time_zone/get"
    },
    "request": {}
  }

  console.log(resp,1111111);
  console.log(resp.data,222222);
  
  console.log(resp.data.sys_clock_time_zone,33333333);
  if(resp?.status === 200 && resp?.data?.sys_clock_time_zone) {
    dateConfigurationForm.value.zone = resp.data.sys_clock_time_zone[0].zone
    dateConfigurationForm.value.flags = resp.data.sys_clock_time_zone[0].flags
    dateConfigurationForm.value.offsetHourValue = resp.data.sys_clock_time_zone[0].time     
  }
}

</script>

<template>
  <div class="date_configuration_project">
    <div class="date_project">
      <div class="project_title">时间配置</div>
      <el-form 
        ref="dateConfigurationFormRef" 
        :model="dateConfigurationForm" 
        :rules="rules"
        label-width="180px" 
        class="demo-ruleForm"
      >
        <el-form-item label="日期[YYYY-MM-DD]:" prop="dateValue">
          <el-date-picker v-model="dateConfigurationForm.dateValue" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="选择日期"/>
        </el-form-item>
        <el-form-item label="时间[HH:MM:SS]:" prop="hourValue">
          <el-time-picker v-model="dateConfigurationForm.hourValue" format="HH:mm:ss" value-format="HH:mm:ss" placeholder="选择时间" />
          <!-- format="HH:mm:ss" -->
        </el-form-item>
        <el-form-item label="时区名称:" prop="zone">
          <el-input v-model="dateConfigurationForm.zone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="时区偏移类型:" prop="flags">
          <el-select v-model="dateConfigurationForm.flags" class="m-2" placeholder="选择" >
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="时区偏移量[HH:MM:SS]:" prop="offsetHourValue" >
          <el-time-picker v-model="dateConfigurationForm.offsetHourValue" value-format="HH:mm:ss"  placeholder="选择偏移量" />
        </el-form-item>
        <!-- 
          报错原因：format="HH:mm:ss"
         -->
        <!-- <el-form-item label="时间[HH:MM:SS]:" prop="hourValue">
          <el-time-picker v-model="dateConfigurationForm.hourValue" value-format="HH:mm:ss" placeholder="Arbitrary time"/>
        </el-form-item> -->
      </el-form>
      <div class="project_footer">
        <el-button type="primary" @click="date_configuration_submit"><el-icon :size="20" style="margin-right: 5px;"><CircleCheckFilled /></el-icon>提交</el-button>
        <el-button @click="date_configuration_refresh"><el-icon :size="20" style="margin-right: 5px;"><Refresh /></el-icon>刷新</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.date_configuration_project {
  margin: 30px auto;
  width: 470px;
  background-color: #e6f1f9;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 40px 0px;
  .date_project {
    margin: 20px;
    .project_title {
      text-align: center;
      font-weight: 700;
      margin-bottom: 20px;
    }
    .project_footer {
      text-align: center;
      margin: 10px 0 20px;
    }
  }

  // 日期
  .demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
  }
  .demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
  }
  .demo-date-picker .block:last-child {
    border-right: none;
  }
  .demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
  }

  // 时间
  .example-basic .el-date-editor {
    margin: 8px;
  }
}
</style>

其二、整体页面的展示为：

在这里插入图片描述

Ⅳ、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
其四、再有兴趣的话，也可以多多关注这个专栏(Java)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

七、1 ADC模数转换器介绍+有关知识点

七、1 ADC模数转换器介绍+有关知识点

目录 1、介绍 &#xff08;1&#xff09;ADC&#xff0c;模拟信号转换为数字信号 &#xff08;2&#xff09;DAC和PWM&#xff0c;数字信号转换为模拟信号 &#xff08;3&#xff09;ADC的两个关键参数 &#xff08;4&#xff09; &#xff08;5&#xff09; &#xff08…
阅读更多...
深度学习代码运行RuntimeError:No such operator torchvision::nms解决方案

深度学习代码运行RuntimeError:No such operator torchvision::nms解决方案

RuntimeError: No such operator torchvision::nms解决方案 跑代码的时候碰到了"RuntimeError: No such operator torchvision::nms"&#xff0c;找到的资料显示大多是"torch"和"torchvision"版本不匹配&#xff0c;让二者版本一致即可解决。但我…
阅读更多...
抱抱脸自动下载模型地址

抱抱脸自动下载模型地址

HuggingFace模型自动下载找保存地址 问题&#xff1a;OSError: Incorrect path_or_model_id: THUDM/cogvlm2-llama3-chat-19B/model.safetensors.index.json. Please provide either the path to a local folder or the repo_id of a model on the Hub. 解决&#xff1a;MODEL_…
阅读更多...
多叉树的深度优先遍历（以电话号码的字母组合为例）

多叉树的深度优先遍历（以电话号码的字母组合为例）

在我们的座机上&#xff0c;都有这种数字与字母对应的按键。 以此为例&#xff0c;讲解多叉树的深度优先遍历 问题 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同…
阅读更多...
奥运新项目带来新增长，小众运动攀岩相关商品成交额同比增长 160%

奥运新项目带来新增长，小众运动攀岩相关商品成交额同比增长 160%

巴黎奥运会临近收官&#xff0c;中国健儿在乒乓球、网球、跳水、游泳等众多项目中表现出色&#xff0c;不仅吸引了全球目光&#xff0c;更在国内掀起了一股强劲的“奥运热”。抖音电商数据显示&#xff0c;7月20日-8月2日“热力先锋季”主题活动期间&#xff0c;抖音电商体育类…
阅读更多...
“名字说我俩挺配的”：解锁姓名背后的神秘共鸣，带你玩转名字魔法！

“名字说我俩挺配的”：解锁姓名背后的神秘共鸣，带你玩转名字魔法！

引言&#xff1a;从姓名中挖掘灵魂共鸣 大家好&#xff0c;欢迎来到“姓名共鸣者”的世界&#xff01;不管你是想知道自己的名字和暗恋对象的名字有多配&#xff0c;还是好奇自己和某个历史人物之间的缘分&#xff0c;或者只是想找点乐子&#xff0c;“姓名共鸣者”都能满足你…
阅读更多...
[qt] 数据库基本概念

[qt] 数据库基本概念

一 数据和数据库 1.1 数据 数据可以是被计算机接受处理和处理的符号。可以有数字、文字、表格、图形、图像和声音等 1.2 数据库 顾名思义就是存放数据的仓库 1.2.1 特点 数据按照数据模型组织&#xff0c;是高度结构化的&#xff0c;可供多个用户共享并且具有一定的安全性…
阅读更多...
视频怎么转换成mp3音频？视频转mp3音频的几个批量方法

视频怎么转换成mp3音频？视频转mp3音频的几个批量方法

视频怎么转换成mp3音频&#xff1f;在现代的工作场景中&#xff0c;多媒体文件的处理已经成为许多工作任务中不可或缺的一部分。特别是在处理视频和音频文件时&#xff0c;有时候需要将视频文件转换成MP3音频格式。这一操作不仅仅是简单的格式转换&#xff0c;更是为了适应不同…
阅读更多...
微信小程序实现Canvas画板

微信小程序实现Canvas画板

这个小demo适用于 快递实名签收等业务逻辑 源码如下&#xff1a; js文件&#xff1a; Page({data: {ctx: "", // 保存 canvas 上下文pen: 5, // 画笔默认的宽度color: "#000", // 画笔默认的颜色},startX: 0, // 保存 X 坐标startY: 0, // 保存 Y 坐标o…
阅读更多...
人在职场，格局越小，破事越多

人在职场，格局越小，破事越多

人在职场&#xff0c;面对同样的琐碎、倾轧&#xff0c;有人处理得游刃有余&#xff0c;有人总是战战兢兢&#xff0c;表面上看起来&#xff0c;是能力水平的差别&#xff0c;归根究底&#xff0c;是格局的不同。 格局越小的人&#xff0c;眼里的破事越多&#xff1b;格局越大…
阅读更多...
【限流与Sentinel超详细分析】

【限流与Sentinel超详细分析】

Sentinel 随着微服务的流行&#xff0c;服务和服务之间的稳定性变得越来越重要。Sentinel 是面向分布式服务架构的流量控制组件&#xff0c;主要以流量为切入点&#xff0c;从流量控制、熔断降级、系统自适应保护等多个维度来保障微服务的稳定性。 1 Sentinel 基本概念 资源…
阅读更多...
OpenAI开发ChatGPT“反作弊神器”，99.9%超高命中率，还没上线

OpenAI开发ChatGPT“反作弊神器”，99.9%超高命中率，还没上线

检查内容是否用了ChatGPT&#xff0c;准确率高达99.9%&#xff01; OpenAI又左右互搏上了&#xff0c;给AI生成的文本打水印&#xff0c;高达99.9&#xff05;准确率抓「AI枪手」作弊代写。其能够精准识别出论文或研究报告是否由ChatGPT撰写&#xff0c;甚至能追溯其使用的具体…
阅读更多...
C++ | Leetcode C++题解之第328题奇偶链表

C++ | Leetcode C++题解之第328题奇偶链表

题目&#xff1a; 题解&#xff1a; class Solution { public:ListNode* oddEvenList(ListNode* head) {if (head nullptr) {return head;}ListNode* evenHead head->next;ListNode* odd head;ListNode* even evenHead;while (even ! nullptr && even->next…
阅读更多...
VScode的环境编译器选择

VScode的环境编译器选择

按快捷键 Ctrl Shift P 选择即可
阅读更多...
中国移动机顶盒【山东】魔百和CM201-2芯片HI3798MV300刷机过程、心得（朝歌代工）【免拆刷机】过程心得

中国移动机顶盒【山东】魔百和CM201-2芯片HI3798MV300刷机过程、心得（朝歌代工）【免拆刷机】过程心得

中国移动【山东】魔百和CM201-2芯片HI3798MV300刷机过程、心得&#xff08;朝歌代工&#xff09;【免拆刷机】过程心得 先上主板图(虽然是【免拆刷机】但是为了防止刷机失败&#xff0c;建议大家拆一下对比一下主板是否一致&#xff09; 添加图片注释&#xff0c;不超过 140 字…
阅读更多...
前端web开发HTML+CSS3+移动web（0基础,超详细）——第3天

前端web开发HTML+CSS3+移动web（0基础,超详细）——第3天

目录 一&#xff0c;列表-无序和有序的定义列表 二&#xff0c;表格-基本使用与表格结构标签 三&#xff0c;合并单元格 四&#xff0c;表单-input标签 五&#xff0c;表单-下拉菜单 六&#xff0c;表单-文本域 七&#xff0c;表单-label标签 八&#xff0c;表单-按钮 …
阅读更多...
git 如何把A仓库中的代码提交到B仓库分支

git 如何把A仓库中的代码提交到B仓库分支

1. git clone A仓库代码到本地 首先将A仓库代码克隆到本地(地址为A仓库地址&#xff0c;替换自己的即可) git clone http://gitlab.cn/sourceA/A.git 2. 添加目标B仓库为远程仓库 git remote add target http://gitlab.cn/targentB/B.git 3. 查看当前远程仓库地址 git remo…
阅读更多...
C++ --- std::array容器与std::vector容器的区别

C++ --- std::array容器与std::vector容器的区别

std::array和std::vector的区别 一、内存管理和大小固定性二、性能三、功能特性四 、使用场景 在C中&#xff0c;array和vector都是用于存储一系列相同类型元素的容器&#xff0c;但它们之间存在几个关键的区别。这些区别主要体现在内存管理、大小固定性、性能以及功能特性等方…
阅读更多...
18 数据在内存中的存储

18 数据在内存中的存储

目录 一、整数在内存中的存储 二、大小端字节序和字节序判断 &#xff08;一&#xff09;什么是大小端 &#xff08;二&#xff09;为什么会有大小端 &#xff08;三&#xff09;练习 1、设计一个小程序来判断当前机器的字节序 2、练习二 3、练习三 4、练习四 5、练习五…
阅读更多...
73 属性

73 属性

① 公开的数据成员可以在外部随意访问和修改&#xff0c;很难保证用户进行修改时提供新数据的合法性&#xff0c;数据很容易被破坏&#xff0c;也不符合类的封装性要求。解决这一问题的常用方法是定义私有数据成员&#xff0c;然后设计公开的成员方法来提供对私有数据成员的读取…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023