前端学习——Web API (Day4)

news2024/11/28 22:46:36

日期对象

在这里插入图片描述

实例化

在这里插入图片描述

日期对象方法

在这里插入图片描述

案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 40px;
      border: 1px solid pink;
      text-align: center;
      line-height: 40px;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    function getMyDate() {
      const date = new Date()
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return `今天是：${date.getFullYear()}年${date.getMonth() + 1}月${date.getDay()}日 ${h}:${m}:${s}`
    }
    div.innerHTML = getMyDate()
    setInterval(function () {
      div.innerHTML = getMyDate()
    }, 1000)


  </script>

</body>

</html>

在这里插入图片描述

时间戳

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .countdown {
      width: 240px;
      height: 305px;
      text-align: center;
      line-height: 1;
      color: #fff;
      background-color: brown;
      /* background-size: 240px; */
      /* float: left; */
      overflow: hidden;
    }

    .countdown .next {
      font-size: 16px;
      margin: 25px 0 14px;
    }

    .countdown .title {
      font-size: 33px;
    }

    .countdown .tips {
      margin-top: 80px;
      font-size: 23px;
    }

    .countdown small {
      font-size: 17px;
    }

    .countdown .clock {
      width: 142px;
      margin: 18px auto 0;
      overflow: hidden;
    }

    .countdown .clock span,
    .countdown .clock i {
      display: block;
      text-align: center;
      line-height: 34px;
      font-size: 23px;
      float: left;
    }

    .countdown .clock span {
      width: 34px;
      height: 34px;
      border-radius: 2px;
      background-color: #303430;
    }

    .countdown .clock i {
      width: 20px;
      font-style: normal;
    }
  </style>
</head>

<body>
  <div class="countdown">
    <p class="next">今天是2023年7月11日</p>
    <p class="title">下班倒计时</p>
    <p class="clock">
      <span id="hour">00</span>
      <i>:</i>
      <span id="minutes">25</span>
      <i>:</i>
      <span id="second">20</span>
    </p>
    <p class="tips">18:30:00下课</p>
  </div>
  <script>
    // 函数封装
    function getCountTime() {
      // 1. 得到当前时间戳
      const now = +new Date()

      // 2. 得到将来时间戳
      const last = +new Date('2023-7-11 18:30:00')

      // 3. 得到剩余的时间戳 转换为秒数
      const count = (last - now) / 1000

      // let d = parseInt(count / 60 / 60 / 24) // 计算天数
      // 4. 转换为时分秒
      let h = parseInt(count / 60 / 60 % 24) // 计算小时
      h = h < 10 ? '0' + h : h
      let m = parseInt(count / 60 % 60) // 计算分数
      m = m < 10 ? '0' + m : m
      let s = parseInt(count % 60) // 计算当前秒数
      s = s < 10 ? '0' + s : s

      // 把时分秒写进盒子
      const hour = document.querySelector('#hour')
      const minutes = document.querySelector('#minutes')
      const second = document.querySelector('#second')

      hour.innerHTML = h
      minutes.innerHTML = m
      second.innerHTML = s
    }

    getCountTime()
    setInterval(getCountTime, 1000)
    
  </script>
</body>

</html>

在这里插入图片描述

节点操作

DOM节点

在这里插入图片描述在这里插入图片描述

查找节点

在这里插入图片描述
在这里插入图片描述

案例

李伟兴 09:31:13
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: relative;
      width: 1000px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      text-align: center;
      font-size: 50px;
      line-height: 200px;
      font-weight: 700;
    }

    .box1 {
      position: absolute;
      right: 20px;
      top: 10px;
      width: 20px;
      height: 20px;
      background-color: skyblue;
      text-align: center;
      line-height: 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="box">
    我是广告
    <div class="box1">X</div>
  </div>
  <div class="box">
    我是广告
    <div class="box1">X</div>
  </div>
  <div class="box">
    我是广告
    <div class="box1">X</div>
  </div>
  <script>
    // // 1. 获取事件源
    // const box1 = document.querySelector('.box1')
    // // 2. 事件侦听
    // box1.addEventListener('click', function () {
    //   this.parentNode.style.display = 'none'
    // })

    // 1. 获取三个关闭按钮
    const closeBtn = document.querySelectorAll('.box1')
    for (let i = 0; i < closeBtn.length; i++) {
      closeBtn[i].addEventListener('click', function () {
        // 关闭我的爸爸 所以只关闭当前的父元素
        this.parentNode.style.display = 'none'
      })
    }
  </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

增加节点

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <li>我是老大</li>
  </ul>
  <script>
    // // 1. 创建节点
    // const div = document.createElement('div')
    // // console.log(div)
    // 2. 追加节点  作为最后一个子元素
    // document.body.appendChild(div)
    const ul = document.querySelector('ul')
    const li = document.createElement('li')
    li.innerHTML = '我是li'
    // ul.appendChild(li)
    // ul.children
    // 3. 追加节点
    // insertBefore(插入的元素, 放到哪个元素的前面)
    ul.insertBefore(li, ul.children[0])
  </script>
</body>

</html>

案例

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>学车在线首页</title>
  <link rel="stylesheet" href="./css/style.css">
  <style>

  </style>
</head>

<body>

  <!-- 4. box核心内容区域开始 -->
  <div class="box w">
    <div class="box-hd">
      <h3>精品推荐</h3>
      <a href="#">查看全部</a>
    </div>
    <div class="box-bd">
      <ul class="clearfix">

      </ul>
    </div>
  </div>
  <script>
    // 1. 重构  
    let data = [
      {
        src: 'images/course01.png',
        title: 'Think PHP 5.0 博客系统实战项目演练',
        num: 1125
      },
      {
        src: 'images/course02.png',
        title: 'Android 网络动态图片加载实战',
        num: 357
      },
      {
        src: 'images/course03.png',
        title: 'Angular2 大前端商城实战项目演练',
        num: 22250
      },
      {
        src: 'images/course04.png',
        title: 'Android APP 实战项目演练',
        num: 389
      },
      {
        src: 'images/course05.png',
        title: 'UGUI 源码深度分析案例',
        num: 124
      },
      {
        src: 'images/course06.png',
        title: 'Kami2首页界面切换效果实战演练',
        num: 432
      },
      {
        src: 'images/course07.png',
        title: 'UNITY 从入门到精通实战案例',
        num: 888
      },
      {
        src: 'images/course08.png',
        title: 'Cocos 深度学习你不会错过的实战',
        num: 590
      },
    ]

    const ul = document.querySelector('.box-bd ul')

    // 1. 根据数据个数创建对应li
    for (let i = 0; i < data.length; i++) {
      // 2. 创建新li
      const li = document.createElement('li')

      // 把内容给li
      li.innerHTML = `
          <a href="#">
                    <img src=${data[i].src} alt="">
                    <h4>
                        ${data[i].title}
                    </h4>
                    <div class="info">
                        <span>高级</span> • <span>${data[i].num}</span>人在学习
                    </div>
                </a>
          `
      // 3. ul追加li
      ul.appendChild(li)
    }
  </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    // 1 克隆节点  元素.cloneNode(true)
    // const li1 = ul.children[0].cloneNode(true)
    // console.log(li1)
    // 2. 追加
    ul.appendChild(ul.children[0].cloneNode(true))
  </script>
</body>

</html>

删除结点

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      display: none;
    }
  </style>
</head>

<body>
  <div class="box">123</div>
  <ul>
    <li>没用了</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    // 删除节点  父元素.removeChlid(子元素)
    ul.removeChild(ul.children[0])
  </script>
</body>

</html>

M端事件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    // 1. 触摸
    div.addEventListener('touchstart', function () {
      console.log('开始摸我了')
    })
    // 2. 离开
    div.addEventListener('touchend', function () {
      console.log('离开了')
    })
    // 3. 移动
    div.addEventListener('touchmove', function () {
      console.log('一直摸，移动')
    })
  </script>
</body>

</html>

JS插件

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/swiper.min.css">
  <style>
    .box {
      position: relative;
      width: 800px;
      height: 300px;
      background-color: pink;
      margin: 100px auto;
    }

    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      overflow: hidden;
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>

</head>

<body>
  <div class="box">
    <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
      <div class="swiper-pagination"></div>
    </div>


  </div>
  <script src="./js/swiper.min.js"></script>
  <script>
    var swiper = new Swiper(".mySwiper", {
      // 小圆点
      pagination: {
        el: ".swiper-pagination",
      },
      // 自动播放
      autoplay: {
        delay: 1000,//1秒切换一次
        disableOnInteraction: false,  // 鼠标点击 触摸之后，自动继续播放
      },
      // 可以键盘控制
      keyboard: {
        enabled: true,
        onlyInViewport: true,
      },
    });
  </script>
</body>

</html>

综合案例

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>学生信息管理</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
      color: #721c24;
    }

    h1 {
      text-align: center;
      color: #333;
      margin: 20px 0;

    }

    table {
      margin: 0 auto;
      width: 800px;
      border-collapse: collapse;
      color: #004085;
    }

    th {
      padding: 10px;
      background: #cfe5ff;

      font-size: 20px;
      font-weight: 400;
    }

    td,
    th {
      border: 1px solid #b8daff;
    }

    td {
      padding: 10px;
      color: #666;
      text-align: center;
      font-size: 16px;
    }

    tbody tr {
      background: #fff;
    }

    tbody tr:hover {
      background: #e1ecf8;
    }

    .info {
      width: 900px;
      margin: 50px auto;
      text-align: center;
    }

    .info input,
    .info select {
      width: 80px;
      height: 27px;
      outline: none;
      border-radius: 5px;
      border: 1px solid #b8daff;
      padding-left: 5px;
      box-sizing: border-box;
      margin-right: 15px;
    }

    .info button {
      width: 60px;
      height: 27px;
      background-color: #004085;
      outline: none;
      border: 0;
      color: #fff;
      cursor: pointer;
      border-radius: 5px;
    }

    .info .age {
      width: 50px;
    }
  </style>
</head>

<body>
  <h1>新增学员</h1>
  <form class="info" autocomplete="off">
    姓名：<input type="text" class="uname" name="uname" />
    年龄：<input type="text" class="age" name="age" />
    性别:
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    薪资：<input type="text" class="salary" name="salary" />
    就业城市：<select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">录入</button>
  </form>

  <h1>就业榜</h1>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 
        <tr>
          <td>1001</td>
          <td>欧阳霸天</td>
          <td>19</td>
          <td>男</td>
          <td>15000</td>
          <td>上海</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr> 
        -->
    </tbody>
  </table>
  <script>
    // 获取元素
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const gender = document.querySelector('.gender')
    const salary = document.querySelector('.salary')
    const city = document.querySelector('.city')
    const tbody = document.querySelector('tbody')
    const items = document.querySelectorAll('[name]')

    // 声明一个空数组，增加和删除都是对这个数组进行操作
    const arr = []

    // 1. 录入模块
    // 1.1 表单提交事件
    const info = document.querySelector('.info')
    info.addEventListener('submit', function (e) {

      // 阻止默认行为 不跳转
      e.preventDefault()

      // 这里进行表单验证  如果不通过，直接中断，不需要添加数据
      // 先遍历循环
      for (let i = 0; i < items.length; i++) {
        if (items[i].value === '') {
          return alert('输入内容不能为空')
        }
      }

      // 创建新对象
      const obj = {
        stuId: arr.length + 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value
      }

      // 追加给数组里面
      arr.push(obj)

      // 清空表单
      this.reset()

      // 调用渲染函数
      render()

    })

    // 2. 渲染函数
    function render() {

      //先清空tbody，把最新数组里面的数据渲染完毕 
      tbody.innerHTML = ''

      for (let i = 0; i < arr.length; i++) {

        // 生成tr
        const tr = document.createElement('tr')
        tr.innerHTML = `
        <td>${arr[i].stuId}</td>
        <td>${arr[i].uname}</td>
        <td>${arr[i].age}</td>
        <td>${arr[i].gender}</td>
        <td>${arr[i].salary}</td>
        <td>${arr[i].city}</td>
        <td>
            <a href="javascript:" data-id=${i}>删除</a>
          </td>
        `
        // 追加元素
        tbody.appendChild(tr)
      }

      // 3. 删除操作
      // 3.1 事件委托
      tbody.addEventListener('click', function (e) {
        if (e.target.tagName === 'A') {

          //得到当前元素自定义属性
          arr.splice(e.target.dataset.id, 1)
          console.log(arr)
          // 重新渲染一次
          render()
        }
      })
    }

  </script>

</body>

</html>

在这里插入图片描述

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

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

相关文章

【前端】网页开发精讲与实战 CSS Day 2

【前端】网页开发精讲与实战 CSS Day 2

&#x1f680;Write In Front&#x1f680; &#x1f4dd;个人主页&#xff1a;令夏二十三 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd; &#x1f4e3;系列专栏&#xff1a;前端 &#x1f4ac;总结&#xff1a;希望你看完之后&#xff0c;能对你有…
阅读更多...
『点云处理任务 』用PCL库 还是 深度学习模型？

『点云处理任务 』用PCL库 还是 深度学习模型？

深度学习和PCL库都可以用来做点云处理任务&#xff0c;但是二者侧重点有所不同。 1、PCL库&#xff08;点云库&#xff09;是一个专门用于点云处理和三维几何分析的开源类库&#xff0c;常用于以下任务&#xff1a; 1、点云滤波&#xff1a;用于去除噪音、下采样和平滑等操作&…
阅读更多...
GM/T0015-2012学习笔记

GM/T0015-2012学习笔记

GM/T0015-2012学习笔记 文章目录 GM/T0015-2012学习笔记数字证书数字证书特性用户证书形式 数字证书格式DER资料1资料2 //TODO 吐槽一下&#xff1a;既然是标准&#xff0c;就应该是广而告知&#xff0c;被一些信息查的网站&#xff0c;高价出售。 我从“密码行业标准化技术委…
阅读更多...
一文读懂单分子标签UMI

一文读懂单分子标签UMI

背景 在整理分子标签&#xff08;unique molecular identifier&#xff0c;UMI&#xff09;之前&#xff0c;先了解下&#xff1a; NGS 中潜在的错误来源有哪些&#xff1f; 1. 来源建库过程&#xff1a;文库制备、靶向序列捕获和测序均涉及 DNA 聚合酶以及扩增步骤。这些过程…
阅读更多...
和LangChain CEO一起讲解深度学习在数据领域的应用；如何识别语音DeepFake？

和LangChain CEO一起讲解深度学习在数据领域的应用；如何识别语音DeepFake？

&#x1f989; AI新闻 &#x1f680; 如何识别语音DeepFake&#xff1f; 摘要&#xff1a;加拿大滑铁卢大学的研究人员开发了一种语音DeepFake软件&#xff0c;成功qipian语音认证系统概率高达99%。其他安全研究人员也开始应对这一技术挑战&#xff0c;亚马逊研究人员尝试检查…
阅读更多...
【实验四】多态

【实验四】多态

1、完成第133页实验题目2 import java.util.Scanner;public class Application{private UserDao dao;public Application(UserDao dao){this.daodao;}public void setDao(UserDao dao){this.dao dao;}public void registe()//注册函数{Scanner scnnew Scanner(System.in);//获…
阅读更多...
10分钟理解RNN、LSTM、Transformer结构原理！

10分钟理解RNN、LSTM、Transformer结构原理！

文章目录 一、RNN1.1 RNN基本架构1.2 RNN经典的三种结构1.2.1 vector-to-sequence结构1.2.2 sequence-to-vector结构1.2.3 Encoder-Decoder结构 1.3 RNN常用领域1.4 RNN的优缺点1.5 RNN中为什么会出现梯度消失 二、LSTM2.1 LSTM与RNN差异2.2 LSTM核心思想图解2.2.1 忘记层门2.2…
阅读更多...
小程序上传头像功能

小程序上传头像功能

前台wxml代码 点击navigator&#xff0c;跳转到裁剪页面 <navigator url"/pages/cropper/cropper?userid{{user._id}}&&imgSrc{{user.img}}" hover-class"none"><view class"user-logo-section"><text class"user…
阅读更多...
1亿条数据批量插入 MySQL，哪种方式最快？

1亿条数据批量插入 MySQL，哪种方式最快？

利用JAVA向Mysql插入一亿数量级数据—效率测评 这几天研究mysql优化中查询效率时&#xff0c;发现测试的数据太少&#xff08;10万级别&#xff09;&#xff0c;利用 EXPLAIN 比较不同的 SQL 语句&#xff0c;不能够得到比较有效的测评数据&#xff0c;大多模棱两可&#xff0c…
阅读更多...
深化校企合作，开源网安为软件安全人才培养按下“加速键”

深化校企合作，开源网安为软件安全人才培养按下“加速键”

开源网安一直以来十分重视网络安全人才的培养&#xff0c;已陆续与湖北大学、武汉工业大学、桂林电子科技大学等多所高校建立战略合作&#xff0c;打造产学研协同的多类型人才培养模式。6月29日&#xff0c;开源网安与桂林电子科技大学携手举办了软件安全开发与DevSecOps实训课…
阅读更多...
简要介绍 | 心脏机械-电耦合理论：原理、研究现状与未来展望

简要介绍 | 心脏机械-电耦合理论：原理、研究现状与未来展望

注1&#xff1a;本文系“简要介绍”系列之一&#xff0c;仅从概念上对心脏机械-电耦合理论进行非常简要的介绍&#xff0c;不适合用于深入和详细的了解。 心脏机械-电耦合理论&#xff1a;原理、研究现状与未来展望 心脏中精密的血流局部调控机制&#xff1a;electro-metabolic…
阅读更多...
使用ChatGPT进行个性化学习

使用ChatGPT进行个性化学习

推荐&#xff1a;将 NSDT场景编辑器 加入你的3D工具链 3D工具集&#xff1a; NSDT简石数字孪生 在这篇文章中&#xff0c;您将发现 ChatGPT 作为机器学习和数据科学爱好者的个人导师的好处。特别是&#xff0c;您将学习 如何让ChatGPT引导你学习抽象代数如何让 ChatGPT 帮助您…
阅读更多...
代码随想录day9

代码随想录day9

28. 找出字符串中第一个匹配项的下标 思路&#xff1a; 没有。。。。真不会。。。。下次再来吧 代码&#xff1a; def strStr(self, haystack: str, needle: str) -> int:if not needle:return 0next [0] * len(needle)self.getNext(next, needle)j -1for i in range(…
阅读更多...
路径规划算法：基于猎食者优化的路径规划算法- 附代码

路径规划算法：基于猎食者优化的路径规划算法- 附代码

路径规划算法&#xff1a;基于猎食者优化的路径规划算法- 附代码 文章目录 路径规划算法&#xff1a;基于猎食者优化的路径规划算法- 附代码1.算法原理1.1 环境设定1.2 约束条件1.3 适应度函数 2.算法结果3.MATLAB代码4.参考文献 摘要&#xff1a;本文主要介绍利用智能优化算法…
阅读更多...
如何搭建自己的图床(GitHub版)

如何搭建自己的图床(GitHub版)

文章目录 1.图床的概念2.用GitHub创建图床服务器2.1.新建仓库2.2.生成Token令牌2.3.创建img分支和该分支下的img文件夹(可选) 3.使用PicGo软件上传图片3.1 下载PicGo软件3.2配置PicGo3.3用PicGo实现上传 4. Typora实现自动上传5.免费图片网站 前言&#xff1a; 如果没有自己的服…
阅读更多...
暑假第六天打卡

暑假第六天打卡

离散&#xff1a; 极小项&#xff1a; &#xff08;1&#xff09;简单合取式 &#xff08;2&#xff09;每个字母只出现一次 &#xff08;3&#xff09;按字典顺序排列 &#xff08;4&#xff09;成真赋值&#xff0c;且化为十进制 极大项 &#xff08;1&#xff09;简单…
阅读更多...
智能化客流系统-实时监测人流趋势，助力商场销售策略优化

智能化客流系统-实时监测人流趋势，助力商场销售策略优化

随着人们对安全和便利性的要求不断提高&#xff0c;智慧客流人数管理系统的应用已经成为各类场所管理的必备工具。它可以帮助管理者实时监测人流情况&#xff0c;提供精准的服务和安全保障。 一、案例展示 智慧客流人数管理系统在图书馆的应用&#xff0c;通过实时监测和数据…
阅读更多...
avue 表单绑定值；avue表单项根据某项的值去联动显隐或是联动下拉数据

avue 表单绑定值；avue表单项根据某项的值去联动显隐或是联动下拉数据

效果&#xff1a;发布type为shp时 数据相关的都隐藏&#xff0c;当发布type为postgis时则显示 1.avue表单绑定值 html <avue-form :option"option" v-model"publishForm"></avue-form> js data中定义 data() {return {publishForm: {},optio…
阅读更多...
移动端APP组件化架构实践 | 京东云技术团队

移动端APP组件化架构实践 | 京东云技术团队

前言 对于中大型移动端APP开发来讲&#xff0c;组件化是一种常用的项目架构方式。个人最近几年在工作项目中也一直使用组件化的方式来开发&#xff0c;在这过程中也积累了一些经验和思考。主要是来自在日常开发中使用组件化开发遇到的问题以及和其他开发同学的交流探讨。 本文…
阅读更多...
惊，全国快递/外卖员近1亿，程序员有多少？

惊，全国快递/外卖员近1亿，程序员有多少？

最近有一组数据备受关注&#xff0c;中华全国总工会消息&#xff0c;目前&#xff0c;全国职工总数4.02亿人左右&#xff0c;新就业形态劳动者8400万人。 其中“新就业形态劳动者”主要指大家熟悉的外卖员、快递员、网约车司机、代驾司机等群体。也就是说&#xff0c;当前有近…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023