前端学习笔记-Web APIs篇-01

news2024/11/15 1:24:17

变量声明

变量声明有三个 var let 和 const

建议: const 优先,尽量使用const,

原因是:

  • const 语义化更好
  • 很多变量我们声明的时候就知道他不会被更改了,那为什么不用 const呢?
  • 实际开发中也是,比如react框架,基本const

有了变量先给const,如果发现它后面是要被修改的,再改为let

  1. const 声明的值不能更改,而且const声明变量的时候需要里面进行初始化
  2. 但是对于引用数据类型,const声明的变量,里面存的不是 值,是 地址

为什么const声明的对象可以修改里面的属性?

  • 因为对象是引用类型,里面存储的是地址,只要地址不变,就不会报错
  • 建议数组和对象使用 const 来声明

什么时候使用let声明变量?

  • 如果基本数据类型的值或者引用类型的地址发生变化的时候,需要用let
  • 比如 一个变量进行加减运算,比如 for循环中的 i++ 

 Web API 基本认知

作用和分类

作用: 就是使用 JS 去操作 html 和浏览器

分类DOM (文档对象模型)、BOM浏览器对象模型)

什么是DOM

DOM(Document Object Model——文档对象模型)

是用来呈现以及与任意 HTML 或 XML文档交互的API

白话文:DOM是浏览器提供的一套专门用来 操作网页内容 的功能

DOM作用:开发网页内容特效和实现用户交互

DOM树

将 HTML 文档以树状结构直观的表现出来,我们称之为文档树或 DOM 树

描述网页内容关系的名词

作用:文档树直观的体现了标签与标签之间的关系

DOM对象

DOM对象:浏览器根据html标签生成的 JS对象 ,所有的标签属性都可以在这个对象上面找到,修改这个对象的属性会自动映射到标签身上。

DOM的核心思想:把网页内容当做对象来处理

document 对象:是 DOM 里提供的一个对象,所以它提供的属性和方法都是用来访问和操作网页内容的【例:document.write() 】,网页所有内容都在document里面。

1. DOM 树是什么?

  • 将 HTML 文档以树状结构直观的表现出来,我们称之为文档树或 DOM 树
  • 作用:文档树直观的体现了标签与标签之间的关系

2. DOM对象怎么创建的?

  • 浏览器根据html标签生成的 JS对象(DOM对象)  
  • DOM的核心就是把内容当对象来处理

3. document 是什么?

  • 是 DOM 里提供的一个对象
  • 网页所有内容都在document里面

获取DOM对象 

查找元素DOM元素就是利用 JS 选择页面中标签元素

根据CSS选择器来获取DOM元素 (重点)

1. 选择匹配的第一个元素

语法:document.querySelector('css选择器')

参数: 包含一个或多个有效的CSS选择器 字符串

返回值: CSS选择器匹配的第一个元素,一个 HTMLElement对象。 如果没有匹配到,则返回null

document.querySelector() - Web API | MDN (mozilla.org)

2. 选择匹配的多个元素

语法:document.querySelectorAll('css选择器')

参数: 包含一个或多个有效的CSS选择器 字符串

返回值: CSS选择器匹配的NodeList 对象集合

得到的是一个伪数组:

有长度有索引号的数组,但是没有 pop() push() 等数组方法。哪怕只有一个元素,通过querySelectAll()获取过来的也是一个伪数组,里面只有一个元素而已。

想要得到里面的每一个对象,则需要遍历(for)的方式获得。 

1. 获取一个DOM元素我们使用谁?能直接操作修改吗?

  • querySelector()
  • 可以

2. 获取多个DOM元素我们使用谁?能直接修改吗? 如果不能可以怎么做到修改 ?

  • querySelectorAll()
  • 不可以, 只能通过遍历的方式一次给里面的元素做修改 

3. 获取页面中的标签我们最终常用那两种方式?

  • querySelectorAll() 、querySelector()

4. 他们两者的区别是什么?

  • querySelector() 只能选择一个元素, 可以直接操作
  • querySelectorAll() 可以选择多个元素,得到的是伪数组,需要遍历得到每一个元素

5. 他们两者小括号里面的参数有什么注意事项?

  • 里面写css选择器,必须是字符串,也就是必须加引号。

其他获取DOM元素方法(了解) 

操作元素的内容 

DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。 就是操作对象使用的点语法。

如果想要修改标签元素的里面的内容,则可以使用如下几种方式:1.对象.innerText 属性 2. 对象.innerHTML 属性。

1. 元素innerText 属性

文本内容添加/更新到任意标签位置

显示纯文本,不解析标签

2. 元素.innerHTML 属性 

文本内容添加/更新到任意标签位置

会解析标签,多标签建议使用模板字符

年会抽奖案例

需求:从数组随机抽取一等奖、二等奖和三等奖,显示到对应的标签里面。 

<!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>年会抽奖</title>
  <style>
    .wrapper {
      width: 840px;
      height: 420px;
      background: url(./images/bg01.jpg) no-repeat center / cover;
      padding: 100px 250px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <strong>传智教育年会抽奖</strong>
    <h1>一等奖:<span id="one">???</span></h1>
    <h3>二等奖:<span id="two">???</span></h3>
    <h5>三等奖:<span id="three">???</span></h5>
  </div>
  <script>
    // 1.声明数组
    const personArr = ['周杰伦', '刘德华', '周星驰', 'Pink老师', '张学友']
    // 2. 先做一等奖
    // 2.1 随机数 数组的下标
    const random = Math.floor(Math.random() * personArr.length)
    // console.log(personArr[random])
    // 2.2 获取one 元素 
    const one = document.querySelector('#one')
    // 2.3 把名字给 one
    one.innerHTML = personArr[random]
    // 2.4 删除数组这个名字
    personArr.splice(random, 1)
    // console.log(personArr)

    // 3. 二等奖
    // 2.1 随机数 数组的下标
    const random2 = Math.floor(Math.random() * personArr.length)
    // console.log(personArr[random])
    // 2.2 获取one 元素 
    const two = document.querySelector('#two')
    // 2.3 把名字给 one
    two.innerHTML = personArr[random2]
    // 2.4 删除数组这个名字
    personArr.splice(random2, 1)

    // 4. 三等奖
    // 2.1 随机数 数组的下标
    const random3 = Math.floor(Math.random() * personArr.length)
    // console.log(personArr[random])
    // 2.2 获取one 元素 
    const three = document.querySelector('#three')
    // 2.3 把名字给 one
    three.innerHTML = personArr[random3]
    // 2.4 删除数组这个名字
    personArr.splice(random3, 1)
  </script>
</body>
</html>

操作元素属性

操作元素常用属性

还可以通过 JS 设置/修改标签元素属性,比如通过 src更换 图片

最常见的属性比如: href、title、src 等

语法:对象.属性 = 值

案例:

页面刷新 图片随机更换


操作元素样式属性

比如通过 轮播图小圆点自动更换颜色样式

点击按钮可以滚动图片,这是移动的图片的位置 left 等等

1.通过 style 属性操作CSS

语法:对象.style.样式属性 = 值

案例:

页面刷新,页面随机更换背景图片

2. 操作类名(className) 操作CSS

如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式。

语法:元素.className ='active'【active 是一个css类名】 

 注意:

1. 由于class是关键字, 所以使用className去代替

2. className是使用新值旧值, 如果需要添加一个类,需要保留之前的类名【直接使用 className 赋值会覆盖以前的类名】

3. 通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名,我们可以通过classList方式追加和删除类名

语法

// 追加一个类
元素.classList.add('类名')
//删除一个类元素.
元素.classList.remove('类名')
// 切换一个类元素.
元素.classList.toggle('类名')

使用 className 和classList的区别

  • 修改大量样式的更方便
  • 修改不多样式的时候方便
  • classList 是追加和删除不影响以前类名 

案例:轮播图随机版

需求:当我们刷新页面,页面中的轮播图会显示不同图片以及样式 

<!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>轮播图点击切换</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .slider-wrapper {
      width: 100%;
      height: 320px;
    }

    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了?</p>
      <ul class="slider-indicator">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // const arr = [1, 3]
    // arr[0]
    // 1. 初始数据
    const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了?', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说!', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了!', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚:让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题!!!', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢!', color: 'rgb(99, 72, 114)' },
    ]


    // 1. 需要一个随机数 
    const random = parseInt(Math.random() * sliderData.length)
    // console.log(sliderData[random])
    // 2. 把对应的数据渲染到标签里面
    // 2.1 获取图片
    const img = document.querySelector('.slider-wrapper img')
    // 2.2. 修改图片路径  =  对象.url
    img.src = sliderData[random].url
    // 3. 把p里面的文字内容更换
    // 3.1 获取p
    const p = document.querySelector('.slider-footer p')
    // 3.2修改p
    p.innerHTML = sliderData[random].title
    // 4. 修改背景颜色
    const footer = document.querySelector('.slider-footer')
    footer.style.backgroundColor = sliderData[random].color
    // 5. 小圆点
    const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)
    // 让当前这个小li 添加 active这个类
    li.classList.add('active')
  </script>
</body>

</html>

操作 表单元素 属性

表单很多情况,也需要修改属性,比如点击眼睛,可以看到密码,本质是把表单类型转换为文本框

正常的有属性有取值的 跟其他的标签属性没有任何区别

获取: DOM对象.属性名

设置: DOM对象.属性名 = 新值

表单.value ='用户名'

表单.type ='password'

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性

比如: disabled、checked、selected


自定义属性

标准属性:

标签天生自带的属性 比如class id title等, 可以直接使用点语法操作

比如: disabled、checked、 selected

自定义属性:

  • 在html5中推出来了专门的data-自定义属性
  • 在标签上一律以data-开头
  • 在DOM对象上一律以dataset对象方式获取

定时器-间歇函数 

网页中经常会需要一种功能:每隔一段时间需要自动执行一段代码,不需要我们手动去触发

例如:网页中的倒计时 ,要实现这种需求,需要定时器函数,定时器函数有两种

定时器函数可以开启和关闭定时器

1. 开启定时器 

setInterval(函数,间隔时间)

作用:每隔一段时间调用这个函数

间隔时间单位是毫秒

2. 关闭定时器 

let 变量名 = setInterval(函数,间隔时间)

clearInterval(变量名)【关闭定时器】

注意: 1. 函数名字不需要加括号 2. 定时器返回的是一个id数字

一般不会刚创建就停止,而是满足一定条件再停止

案例 阅读注册协议

需求:按钮60秒之后才可以使用

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户!在您注册过程中,您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议,请您务必仔细阅读、充分理解协议中的条款内容后再点击同意(尤其是以粗体或下划线标识的条款,因为这些条款可能会明确您应履行的义务或对您的权利有所限制)。
        【请您注意】如果您不同意以下协议全部或任何条款约定,请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息,阅读并点击同意上述协议且完成全部注册流程后,即表示您已充分阅读、理解并接受协议的全部内容,并表明您同意我们可以依据协议内容来处理您的个人信息,并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方(详情查看
    </textarea>
    <br>
    //刚开始把按钮禁用
    <button class="btn" disabled>我已经阅读用户协议(5)</button>
    <script>
        // 1. 获取元素
        const btn = document.querySelector('.btn')
        // console.log(btn.innerHTML)  butto按钮特殊用innerHTML
        // 2. 倒计时
        let i = 5
        // 2.1 开启定时器
        let n = setInterval(function () {
            i--
            btn.innerHTML = `我已经阅读用户协议(${i})`
            if (i === 0) {
                clearInterval(n)  // 关闭定时器
                // 定时器停了,我就可以开按钮
                //不禁用disabled
                btn.disabled = false
                btn.innerHTML = '同意'
            }
        }, 1000)

    </script>
</body>

</html>

案例 轮播图定时器版

需求:每隔一秒钟切换一个图片APIs-day1-92-综合案例-轮播图定时版_哔哩哔哩_bilibili

<!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>轮播图点击切换</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .slider-wrapper {
      width: 100%;
      height: 320px;
    }

    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了?</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始数据
    const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了?', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说!', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了!', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚:让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题!!!', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢!', color: 'rgb(99, 72, 114)' },
    ]
    // 1. 获取元素 
    const img = document.querySelector('.slider-wrapper img')
    const p = document.querySelector('.slider-footer p')
    let i = 0  // 信号量 控制图片的张数
    // 2. 开启定时器
    // console.log(sliderData[i])  拿到对应的对象啦
    setInterval(function () {
      i++
      // 无缝衔接位置  一共八张图片,到了最后一张就是 8, 数组的长度就是 8
      if (i >= sliderData.length) {
        i = 0
      }
      // console.log(i)
      // console.log(sliderData[i])
      // 更换图片路径  
      img.src = sliderData[i].url
      // 把字写到 p里面
      p.innerHTML = sliderData[i].title
      // 小圆点
      // 先删除以前的active
      document.querySelector('.slider-indicator .active').classList.remove('active')
      // 只让当前li添加active
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    }, 1000)

  </script>
</body>

</html>

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

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

相关文章

如何使用ssm实现基于ssm的软考系统+vue

TOC ssm321基于ssm的软考系统vue 系统概述 1.1 研究背景 如今互联网高速发展&#xff0c;网络遍布全球&#xff0c;通过互联网发布的消息能快而方便的传播到世界每个角落&#xff0c;并且互联网上能传播的信息也很广&#xff0c;比如文字、图片、声音、视频等。从而&#x…

11 索引

目录 没有索引&#xff0c;可能会有什么问题认识磁盘 1. 没有索引&#xff0c;可能会有什么问题 所以&#xff1a;提高数据库的性能&#xff0c;索引是物美价廉的东西。不用加内存&#xff0c;不用改程序&#xff0c;不用调sql&#xff0c;只要执行正确的create index&#x…

Python 数据分析笔记— Numpy 基本操作

文章目录 学习内容&#xff1a;一、什么是数组、矩阵二、创建与访问数组三、矩阵基本操作 学习内容&#xff1a; 一、什么是数组、矩阵 数组&#xff08;Array&#xff09;&#xff1a;是有序的元素序列&#xff0c;可以是一维、二维、多维。 array1 [1,2,3] 或[a, b, c, d…

Littorine生物合成糖基转移酶和酰基转移酶-文献精读39

Functional genomics analysis reveals two novel genes required for littorine biosynthesis 功能基因组学分析揭示了两个Littorine生物合成所需的新基因&#xff0c;基因组挖掘很有效果~ 摘要 一些茄科药用植物能够生产药用莨菪烷类生物碱&#xff08;TAs&#xff09;&am…

MYSQL:简述对B树和B+树的认识

MySQL的索引使用B树结构。 1、B树 在说B树之前&#xff0c;先说说B树&#xff0c;B树是一个多路平衡查找树&#xff0c;相较于普通的二叉树&#xff0c;不会发生极度不平衡的状况&#xff0c;同时也是多路的。 B树的特点是&#xff1a;他会将数据也保存在非叶子节点。而这个…

样本存储需要注意的事项

在实验室和研究机构中&#xff0c;有一些样本是非常重要且需要特殊保护的&#xff0c;这些样本可能包括珍贵的细胞培养物、生物医学样本、药物试剂等等&#xff0c;为了保证这些样本的质量和完整性&#xff0c;采取一些特殊的措施来进行存储管理非常重要。 一旦这些珍贵样本出…

Undertow 性能、配置

一、性能对比 Tomcat vs Jetty vs Undertow性能对比,详细文章: Tomcat vs Jetty vs Undertow性能对比-腾讯云开发者社区-腾讯云 (tencent.com)https://cloud.tencent.com/developer/article/1699803压测指标的结果: 吞吐量:Undertow > Jetty > Tomcat响应时间&…

World of Warcraft [CLASSIC][80][Shushia] Call to Arms: Alterac Valley

Alterac Valley 奥特兰克山谷 明明能拿7000-9000荣誉&#xff0c;白送的大战场&#xff0c;废材太多&#xff0c;看不下去了&#xff0c;动不动就杀女人&#xff0c;丢墓地&#xff0c;最终拿什么3000荣誉&#xff0c;也不知道脑子装啥。 我们55级的时候就能把联盟打的不要不要…

物料类型 UNBW 和 NLAG

业务示例 公司的广告部门负责采购广告业务并承担相应的费用。这些宣传册不应该存储在广告部门&#xff1b;而应该存储在物料仓库中。并且需要基于数量而不是金额进行库存管理。因此这些物料的物料类型为未评估物料(UNBW)。 物料类型 UNBW 物料类型UNBW表示未评估物料。可以通…

第20讲 动画讲解轻松学会STM32的PWM

来源&#xff1a;【STM32】动画讲解轻松学会STM32的PWM_哔哩哔哩_bilibili 基本概念 周期/频率 计算公式&#xff1a;PWM周期1个高电平用时1个低电平用时 PWM的频率1/周期 如图所示此时周期为1ms&#xff0c;即1s内存在1000组这样的高低电平&#xff0c;PWM的频率为1000hz。…

selenium启动总报错 WebDriverManager总是异常

我的环境用这个自动管理驱动的工具 WebDriverManager 总是报错 尝试过很多方法都没有&#xff0c;只好手动指定浏览器的位置 System.setProperty("webdriver.chrome.driver", "C:\\Users\\27224\\.cache\\selenium\\chromedriver\\win64\\128.0.6613.84\\chrome…

030集—CAD 实现钟表时针动态转动效果——vba代码实现

cad图中显示动图案例如下&#xff1a; 部分代码如下&#xff1a; &#xff08;按下Esc键可退出&#xff09; #If VBA7 Then 64位系统声明Declare PtrSafe Sub Sleep Lib "kernel32" (ByVal dwMilliseconds As Long) #Else 32位系统声明Declare Sub Sleep Lib "k…

95.SAP MII功能详解(08)Workbench-Transaction介绍

目录 1.Transaction 2.Properties of transaction 1.Transaction You use transactions to access data from multiple sources and execute processes, which are triggered synchronously or asynchronously.您可以使用事务从多个源访问数据并执行同步或异步触发的流程。…

期权新手交易必看!50ETF期权和沪深300ETF期权分享

今天带你了解期权新手交易必看&#xff01;50ETF期权和沪深300ETF期权分享。上证 50ETF期权和沪深 300ETF期权是国内ETF期权最早上市的两个品种&#xff0c;也是交易量及活跃度最高的两个品种。 50ETF期权 上证50ETF期权就是在你支付一定额度的权利金后&#xff0c;获得了在未…

构建一个资源控制面板:模拟 CPU 和内存负载

构建一个资源控制面板&#xff1a;模拟 CPU 和内存负载 每个人都会有一段异常艰难的时光。生活的压力&#xff0c;工作的失意&#xff0c;学业的压力&#xff0c;爱的惶惶不可终日&#xff0c;挺过来的,人生就会豁然开朗&#xff0c;挺不过来的、时间也会教你&#xff0c;怎么与…

记一次事务里发普通消息的线上问题排查过程

1 结论 结论先行&#xff1a;事务MQ的使用场景&#xff0c;使用方式一定得正确&#xff0c;稍有不慎&#xff0c;可能就会带来数据不一致问题。 2 问题背景及现象 3 排查过程 3.1 初次分析 发现问题&#xff0c;及时修复&#xff0c;加完锁上线&#xff0c;以为问题修复了&a…

const、inline、nullptr的使用

目录 1.const引用 1.1权限的放大 1.2权限的缩小 2.inline 3.nullptr 1.const引用 可以引用一个const对象&#xff0c;但是必须用const引用。const引用也可以引用普通对象&#xff0c;因为对象的访 问权限在引用过程中可以缩小&#xff0c;但是不能放大。 不需要注意的是…

C#从入门到精通(20)—C#目录类Directory用法总结

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff01;人工智能学习网站 前言&#xff1a; 大家好&#xff0c;我是上位机马工&#xff0c;硕士毕业4年年入40万&#xff0c;目前在一家自动化公司担任…

【硬核】开源的高性能轻量级ORM框架

简介 easy-orm是一款简洁、轻量高效的数据库对象关系映射框架&#xff0c;它的代码编写规范基于SQL语义&#xff0c;学习成本低&#xff0c;可以快速掌握。 下图是与业界mybatis-plus框架相比。 功能mybatis-pluseasy-orm单表CRUD√√多表CRUD√子查询x√多数据源√预编译√…

一文带你深度了解FreeRTOS信号量——二值信号量

本篇文章深度讲述FreeRTOS信号量——二值信号量的知识&#xff0c;希望我的分享对你有所帮助&#xff01; 关于FreeRTOS信号量的相关介入&#xff0c;大家可以参考一下这篇文章&#xff1a; 一文带你初探FreeRTOS信号量_freertos 二进制信号量-CSDN博客 目录 一、二值信号量简…