程序员经验分享-hwhale

vue3手动封装一个点击滚动，左右切换的商品展示效果图，纯js

2023-11-20

 展示效果

效果图如下，默认展示第一张图片，只有两边有按钮切换，也可以点击图片切换

点击的图片从第三个开始时居中显示

 

分析一波

从底部的第三张图片开始到末尾的第八张图片都是居中显示。点击左右要进行切换，也要居中显示。所以我在这里用的的时在X轴上进行平移来进行实现。

过程

我是以十张图片为例子：

body部分代码

imgs里面的类容是上面的显示大图，用v-if来判断是否显示。

imgs2里面是下面控制的显示的小图，自定义class类名，主要根据这个类名进行判断是否显示当前点击的图片。

给imgs2的父节点绑定点击事件：@click=zhanshi

 <div class="detail">
          <div>
            <div class="imgs">
              <img
                v-if="index == 1"
                src="https://pic1.ajkimg.com/display/anjuke/36b903-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/9f212ffe4ef6210c6a478b7c6d37f90d-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 2"
                src="https://pic1.ajkimg.com/display/anjuke/36b903-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/9f212ffe4ef6210c6a478b7c6d37f90d-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 3"
                src="https://pic1.ajkimg.com/display/anjuke/11d225-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/971db4bdcae486d82c3fc22968303303-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 4"
                src="https://pic1.ajkimg.com/display/anjuke/add4c1-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/91ddb254a4154fbc576120d6ab917515-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 5"
                src="https://pic1.ajkimg.com/display/anjuke/f7167c-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/57311e438d4977c7ce1f8c8fbe49c01b-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 6"
                src="https://pic1.ajkimg.com/display/anjuke/6dd413-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/e834ff8faf4c1e4fd53e09229293913e-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 7"
                src="https://pic1.ajkimg.com/display/anjuke/4be035-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/c6712ca73a7a5bea397760189791f6ea-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 8"
                src="https://pic1.ajkimg.com/display/anjuke/0ae9e5-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/cbd662e82bb68d247f3405dd5f5f01bc-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 9"
                src="https://pic1.ajkimg.com/display/anjuke/6c7b2e-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/2f14341af2fe8c08a11c23e2575a74a0-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 10"
                src="https://pic1.ajkimg.com/display/anjuke/424ebf-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/ca1cb31cd00ca7dfcc0a1c5ad9e3887d-800x650.jpg?frame=1"
                alt=""
              />
            </div>
            <div class="left_imgs" @click="zhanshi">
              <div class="icons" style="margin-right: 5px">
           &lt;
              </div>
              <div class="imgs2">
                <img
                  class="1"
                  src="https://pic1.ajkimg.com/display/anjuke/36b903-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/9f212ffe4ef6210c6a478b7c6d37f90d-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="2"
                  src="https://pic1.ajkimg.com/display/anjuke/36b903-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/9f212ffe4ef6210c6a478b7c6d37f90d-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="3"
                  src="https://pic1.ajkimg.com/display/anjuke/11d225-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/971db4bdcae486d82c3fc22968303303-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="4"
                  src="https://pic1.ajkimg.com/display/anjuke/add4c1-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/91ddb254a4154fbc576120d6ab917515-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="5"
                  src="https://pic1.ajkimg.com/display/anjuke/f7167c-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/57311e438d4977c7ce1f8c8fbe49c01b-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="6"
                  src="https://pic1.ajkimg.com/display/anjuke/6dd413-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/e834ff8faf4c1e4fd53e09229293913e-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="7"
                  src="https://pic1.ajkimg.com/display/anjuke/4be035-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/c6712ca73a7a5bea397760189791f6ea-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="8"
                  src="https://pic1.ajkimg.com/display/anjuke/0ae9e5-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/cbd662e82bb68d247f3405dd5f5f01bc-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="9"
                  src="https://pic1.ajkimg.com/display/anjuke/6c7b2e-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/2f14341af2fe8c08a11c23e2575a74a0-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="10"
                  src="https://pic1.ajkimg.com/display/anjuke/424ebf-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/ca1cb31cd00ca7dfcc0a1c5ad9e3887d-800x650.jpg?frame=1"
                  alt=""
                />
              </div>
              <div class="icons2" style="margin-left: 10px">
                >
              </div>
            </div>
          </div>
          <div>2</div>
        </div>

 初始化元素

before是用保存点击图片的前一次的类名，用来跟这一次的做比较，以此来得出位移的距离

flag是用来判断是否点击过了，主要是用来判断是不是第一次点击class为5，因为它的位移要多一倍。

num是点击一次左边按钮或者右边按钮来进行自增自减，以此控制图片的切换

let before = ref(3)
let flag = ref(false)
let num=ref(1)

黑框显示，控制图片的显示

 js代码：点击下面的小图还要出现一个黑框框，我们用if排除掉imgs2父节点的其他children。保证我们得到的imgs2，再找出imgs2的children。

显示当前点击的图片，出现黑框。主要用到排他法，找到imgs2的所有孩子节点，利用for循环把所有的黑框都去掉；结束后再单独给当前点击的节点添加黑框。

// 点击的img图片
  if (
    e.target.className != 'detail' &&
    e.target.className != 'left_imgs' &&
    e.target.className != 'imgs2'&&e.target.className!="icons"&&e.target.className!="icons2"
  ) {
   // index.value用来获取点击的类型，在body中渲染元素
   index.value = e.target.className * 1;
    num.value=e.target.className*1;
    let nodes = e.target.parentNode.children
    for (let i = 0; i < nodes.length; i++) {
      let box = document.getElementsByClassName(nodes[i].className)[0]
      box.style.border = '0'
    }
    box.style.border = '2px solid #000'
  }

位移的计算，点击图片部分

从第三个开始和第八个都是居中显示，用个if进行判断，其余节点就不会进行位移。

// img部分 用before来控制位移的距离，这一次-前一次=before，用位移的距离*before
  if ((e.target.className * 1 >= 3 && e.target.className * 1 < 9)) {
// 首次进去，判断首次是不是点击的类名为5的，为5整体向前移动294px
    if (e.target.className * 1 != 5 || flag.value) {
      flag.value = true
// 上一次的值为10的话，这次为7.我们最开始定义的就是8为最后一个中间值，before只用移动一次就可以了
      if(before.value==10&&e.target.className*1==7){
        before.value=-1;
      }else 
// 这次的类型是8，上一次的是9或者10，就不用移动
if((e.target.className*1==8&&before.value==9)||(e.target.className*1==8&&before.value==10)||(e.target.className*1==8&&before.value==10)){
        before.value=0
      }else 
// 一排我们能看见的只有五个元素，第三个为中心，最大也只能向左或者向右移动两次，大于的2次的情况比如说上一次点击的是1，这次点击的是5，差值为4，但是根本就移动不能那么多次。
if(Math.abs(e.target.className-before.value)>=2){
        if(e.target.className-before.value<0){
          before.value=-2
        }else{
          before.value=2
        }
      }else{
        before.value=e.target.className-before.value;
      }
      for (let j = 1; j <= 10; j++) {
        let box = document.getElementsByClassName(j + '')[0]
        let n = document.defaultView
          .getComputedStyle(box, null)
          .transform.substring(7)
          .split(',')[4]
        if (n) {
       box.style.transform = `translateX(${
            -1 * 147 * before.value+ n * 1
          }px)`
        } else {
// 第三次是不需要移动的
          if (e.target.className * 1 == 3) {
            box.style.transform = `translateX(0)`
          } else {
            box.style.transform = `translateX(-147px)`
          }
        }
      }
      before.value = e.target.className * 1;
    }
// 类型为5，把flag重新赋值，每一个节点都向前移动294的排序
  else {
      flag.value = true
      for (let j = 1; j <= 10; j++) {
        let box = document.getElementsByClassName(j + '')[0]
// n用来得到元素的transition的translateX的值
        let n = document.defaultView
          .getComputedStyle(box, null)
          .transform.substring(7)
          .split(',')[4]
// 用位移就用上一次的位移值加上这次的
        if (n) {
          box.style.transform = `translateX(-${294 - n * 1}px)`
        } else {
          box.style.transform = `translateX(-294px)`
        }
      }
// 操作执行完了之后，把这次的类型赋值给before，方便下次计算
      before.value = e.target.className * 1;
    }
  }

位移的计算，点击左右按钮部分

// 判断是不是点击的左右两边的按钮    
if((e.target.className=="icons2"||e.target.className=='icons')){
// 判断点击的右边按钮
    if(e.target.className=="icons2"){
// 点击就自增
      num.value=++num.value;
      flag.value=true;
// 判断不能超过最大值 10，超过就轮回到第一张
      if(num.value==11){
        num.value=1;
// 每一图片都要移动，所有用个for 循环
        for (let j = 1; j <= 10; j++) {
        let box = document.getElementsByClassName(j + '')[0]
          box.style.transform = `translateX(0)`
      }
      }else{
        if ((num.value > 3 && num.value < 9))
        for (let j = 1; j <=10; j++) {
        let box = document.getElementsByClassName(j + '')[0]
        let n = document.defaultView
          .getComputedStyle(box, null)
          .transform.substring(7)
          .split(',')[4];
        if (n) {
             box.style.transform = `translateX(${
            -147 + n * 1
          }px)`
        } else{
          box.style.transform = `translateX(${
            -147
          }px)`
        }
      }
      }
// 判断是不是点击的左边按钮
    }else if(e.target.className=="icons"){
      flag.value=true;
      num.value=--num.value
      console.log(num.value,before.value);
      if(num.value!=8&&before.value!=9){
        if(num.value==0){
        num.value=10;
        for (let j = 1; j <= 10; j++) {
        let box = document.getElementsByClassName(j + '')[0]
          box.style.transform = `translateX(-735px)`
      }
      }else{
        if ((num.value > 3 && num.value < 9))
           for (let j = 1; j <= 10; j++) {
        let box = document.getElementsByClassName(j + '')[0]
        let n = document.defaultView
          .getComputedStyle(box, null)
          .transform.substring(7)
          .split(',')[4];
          if(num.value==10){
            n=0;
          }
        if (n) {
          box.style.transform = `translateX(${147 + n * 1}px)`
        }else
        if(num.value==7)
          box.style.transform = `translateX(${147}px)`
        }
      }
      }
    }
// 把自增的值赋给index，以此来展示对应的图片
    index.value=num.value;
// 把自增过后的类名赋值给before，用来保存上一次的值，如果点完按钮再进去点击图片会有个参照
    before.value=num.value;
    let box2=document.getElementsByClassName(num.value+'')[0];   
    let nodes = e.target.parentNode.children[1].childNodes
    for (let i = 0; i < nodes.length; i++) {
      let box = document.getElementsByClassName(nodes[i].className)[0]
      box.style.border = '0'
    }
    box2.style.border = '2px solid #000'

  }

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

前端

vue3手动封装一个点击滚动，左右切换的商品展示效果图，纯js 的相关文章

  • Chart.js 在初始化时设置活动段

    我正在使用 Chart js v2 并且尝试在加载图表时模拟圆环图上某个段的 悬停状态 因此看起来有一个部分已突出显示 我已经搜索和梳理了代码一天 但找不到一个好的方法来做到这一点 提前致谢 设置片段的悬停样式有点令人困惑 因为它没有真正记

  • JavaScript 中的埃拉托斯特尼筛法对大量数据无限运行

    我一直在尝试写埃拉托斯特尼筛法 http en wikipedia org wiki Sieve of EratosthenesJavaScript 中的算法 基本上我只是按照以下步骤操作 创建从 2 到 n 1 的连续整数列表 令第一个素

  • Eslint errorring 导入没有扩展名的 jsx

    我正在尝试在 es6 中导入 jsx 文件而不需要 jsx 扩展名 import LoginErrorDialog from LoginErrorDialogView Not import LoginErrorDialog from Log

  • 为什么 iife 在一个简单的例子中不起作用？

    我不明白为什么函数表达式调用不起作用并抛出错误 你能给我解释一下吗 var a function x alert x function a 1 谢谢大家 任务比我想象的要容易得多 这是因为 JS 将 IIFE 解析为函数的参数调用 这样做时

  • 如何修改每个JSON对象javascript

    我想修改里面的每个 JSON 值cooldown object cooldown user 1 This user2 0 This 在 Javascript 中使用 for 语句 我研究了好几个小时 只找到了内部的 blocks Edit

  • React-Redux：state.setIn() 和 state.set() 有什么区别？

    我见过使用setIn and set 在一些react redux代码中 state setIn state set 我在这里找到了一些文档https facebook github io immutable js https facebo

  • 在 HTML5 画布中，如何用我选择的背景遮盖图像？

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect

  • Javascript split 不是一个函数

    嘿朋友们 我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息 但是我收到此错误friendId split 不是函数 这是我的代码 function recommendToFr

  • Vuejs 2：去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不

  • Three.js 各种大小的粒子

    我是 Three js 的新手 正在尝试找出添加 1000 个粒子的最佳方法 每个粒子都有不同的大小和颜色 每个粒子的纹理是通过绘制画布创建的 通过使用粒子系统 所有粒子都具有相同的颜色和大小 为每个粒子创建一个粒子系统是非常低效的 有没有

  • 使用 Vue 的多模式组件

    我在 Vue 中实现动态模式组件时遇到问题 A common approach I follow to display a set of data fetched from the db is I dump each of the rows

  • Vue 和 Vuex：处理依赖的计算属性

    我的应用程序是一个使用 Vuex 在 Vue 中构建的精简电子表格 关键组件是TableCollection Table and Row The TableCollection有一个包含多个的数组Table对象 每个Table有一个包含多个

  • 对于只触及我的工作表的 Google 表格脚本，收到“此应用程序未经验证”

    我正在编写一个 Google Sheets 脚本 我只想访问与 gs 文件关联的同一电子表格中的数据 似乎我应该有权在自己的电子表格中运行脚本 但是每当我运行一个函数时 我都会得到一个This app isn t verified信息 我该

  • 在 JavaScript 循环之外声明变量可以提高速度和内存？

    C 也有类似的问题 但我们没有看到 JavaScript 的任何问题 在循环内声明变量是否可以接受 假设循环有 200 次迭代 使用样本 2 相对于样本 1 是否有性能要求 内存和速度 我们使用 jQuery 来循环 它提高了我们将 var

  • 在 Javascript 中连接空数组

    我正在浏览一些代码 我想知道这有什么用处 grid push concat row 根据我的理解 它等同于 grid push row 为什么要大惊小怪 连接 你想使用 concat当您需要展平数组并且没有由其他数组组成的数组时 例如 va

  • 如何隐藏/禁用 Highcharts.js 中的图例框？

    我想问是否可以使用 HighCharts js 库隐藏图表中的所有图例框 var chart object chart renderTo render to type graph type colors graph colors title

  • Javascript - 水波纹效果

    我需要 JS 上的脚本 它将以 水波纹 样式更改 images html 抱歉 6MB GIF 文件 http fcuunited ru temp listening2 gif http fcunited ru temp listening

  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何

  • 如何在执行新操作时取消先前操作的执行？

    我有一个动作创建器 它会进行昂贵的计算 并在每次用户输入内容时调度一个动作 基本上是实时更新 但是 如果用户输入多个内容 我不希望之前昂贵的计算完全运行 理想情况下 我希望能够取消执行先前的计算并只执行当前的计算 没有内置功能可以取消Pro

  • 如何使用asm.js进行测试和开发？

    最近我读到asm js规范 看起来很酷 但是是否有任何环境 工具来开发和测试这个工具 这还只是处于规范阶段吗 您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它 有关 asm js 的链接

随机推荐

  • Oracle块损坏处理(MOS)

    处理 Oracle 块损坏 文档 ID 1526911 1 适用于 Oracle Database Enterprise Edition 版本 7 0 16 0 到 11 2 0 2 0 发行版 7 0 到 11 2 本文档所含信息适用于所

  • 微信小程序 如何返回上一个页面并实现刷新

    转载地址 https blog csdn net u011088792 article details 87938213 删除或编辑 之后返回 上一级并刷新 var pages getCurrentPages var beforePage

  • R语言实现RMF模型

    RMF模型说明 RMF模型是客户管理中 常被用来衡量客户价值和客户创利能力的重要方法 它主要考量三个指标 最近一次消费 Recency 近期购买的客户倾向于再度购买 消费频率 Frequency 经常购买的客户再次购买概率高 消费金额 Mo

  • 8年测试经验分享 —— 从0铸造测试技术壁垒

    前言 相信所有从事着软件测试或相关工作的同学都会思考一个问题 如何在持续且部分重复的测试活动中有效的进行测试技术积累 这个有趣的问题我先不予回答 我们先谈谈如何有效保证软件质量 作为团队中的质量保证者 需要深刻的意识到 验证系统原有功能是否

  • oracle 12c recover table恢复单表

    在 Oracle 12c 之前 如果误删一张表 常规的方法是 Flashback 闪回或 TSPITR 如果需要恢复的表空间过大 TSPITR 会耗时非常久 而开启 flashback 会消耗磁盘空间 在 12C 中oracle提供一个新功

  • java接口的详解

    文章目录 接口 1 1 接口的概念 1 2 接口语法规则 1 3 接口使用 1 4 接口特性 1 5 实现多个接口 1 6 接口间的继承 1 7 特殊的接口 1 7 1 Comparable接口实现compareTo方法 1 7 2 Com

  • 5. 一线大厂高并发缓存架构实战与性能优化

    分布式缓存技术Redis 1 冷热数据分离 2 缓存设计 2 1 缓存击穿 失效 2 2 缓存穿透 2 3 缓存雪崩 3 大V直播带货导致线上商品系统崩溃原因分析 4 突发性热点缓存重建导致系统压力暴增问题 5 缓存数据库双写不一致问题 6

  • pytest+UI自动化测试结果回填到excel并发送excel测试报告邮件

    现在写的脚本是web UI自动化 这个和接口自动化区别非常大 没法像接口那样请求 返回 校验结果 UI自动化 一个用例跑下来 是页面 页面 页面 完成 这样 但是还是想实现一种结果回填到excel中 看测试结果就直接看excel就可以了 一

  • WPF 路径动画PathAnimations的使用

    在wpf中让一个控件按照一定的路径运行的动画 叫做路径动画 这个示例演示了让一个rectangle按照一个s形曲线反复运行的动画 效果 只有一个文件 全部代码如下

  • 第三章 创建主窗口

    创建一个主窗口 具有菜单 工具栏 状态栏和对话框之类的界面和功能 实现电子制表软件的主窗口框架 效果 mainwindow h 头文件就不做太多解释 以注释的方式解释函数 ifndef MAINWINDOW H define MAINWIN

  • 收藏！超全机器学习资料合集！（附下载）

    来源 机器学习算法与自然语言处理 本文长度为1098字 建议阅读3分钟 本文为你分享机器学习爱好者必备的资源 最近在群里发现一些小伙伴在寻找资料的时候总是无处可找 网上出现很多收集免费资料再去打包收钱的人 我看不惯这样的人 所以把自己收集的

  • 深度学习03—手写数字识别实例（Tensorflow版实验）

    目录 0 实验概述 1 利用Tensorflow自动加载mnist数据集 2 手写数字识别体验 2 1 准备网络结构与优化器 2 2 计算损失函数与输出 2 3 梯度计算与优化 2 4 循环 2 5 完整代码 补充 os environ T

  • linux学习2：定时任务

    1 crontab命令 crontab e 编辑crontab定时任务 crontab l 查询定人任务 crontab r 删除当前用户所有的定时任务 1 1 每分钟将home路径下的详细信息保存到 home ls txt中 cronta

  • prometheus告警模块ALTERMANAGER中抑制规则的使用

    prometheus服务端通过配置文件可以设置告警 下面是一个告警设置的配置文件alert yml groups name goroutines monitoring rules alert TooMuchGoroutines expr g

  • 【算法】动态规划

    动态规划的定义 动态规划是运筹学的一个分支 是求解决策过程的最优化的数学方法 20世纪50年代初美国数学家R E Bellman等人在研究多阶段决策过程的优化问题时 提出了著名的最优化原理 把多阶段过程转化为一系列单阶段问题 利用各阶段之间

  • 漏洞扫描工具大全，妈妈再也不用担心我挖不到漏洞了

    1 常见漏洞扫描工具 NMAP AWVS Appscan Burpsuite x ray Goby 2 端口扫描之王NMAP Nmap是一款非常强大的实用工具 包含的功能如下 主机探测 端口扫描 服务版本扫描 主机系统指纹识别 密码破解 漏

  • 机器学习 day27（反向传播）

    1 导数 函数在某点的导数为该点处的斜率 用height width表示 可以看作若当w增加 J w b 增加k倍的 则k为该点的导数 2 反向传播 tensorflow中的计算图 由有向边和节点组成 从左向右为正向传播 神经网络模型使用正

  • 程序员的浪漫—利用Matlab 实现圣诞树动态显示

    一 前言 圣诞节是基督教纪念耶稣诞生的重要节日 亦称耶稣圣诞节 主降生节 天主教亦称耶稣圣诞瞻礼 耶稣诞生的日期 圣经 并无记载 公元336年罗马教会开始在12月25日过此节 12月25日原是罗马帝国规定的太阳神诞辰 有人认为选择这天庆祝圣

  • MES11大标准模块（ISA95）

    1 资源分配及状态管理 ResourceAllocationandStatus 该功能管理机床 工具 人员物料 其它设备以及其它生产实体 满足生产计划的要求对其所作的预定和调度 用以保证生产的正常进行 提供资源使用情况的历史记录和实时状态信

  • vue3手动封装一个点击滚动，左右切换的商品展示效果图，纯js

    展示效果 效果图如下 默认展示第一张图片 只有两边有按钮切换 也可以点击图片切换 点击的图片从第三个开始时居中显示 分析一波 从底部的第三张图片开始到末尾的第八张图片都是居中显示 点击左右要进行切换 也要居中显示 所以我在这里用的的时在X轴

热门标签