入门JavaScript编程：上手实践四个常见操作和一个轮播图案例

部分数据来源：ChatGPT

简介

        JavaScript是一门广泛应用于Web开发的脚本语言，它主要用于实现动态效果和客户端交互。下面我们将介绍几个例子，涵盖了JavaScript中一些常见的操作，包括：字符串、数组、对象、事件等。

例子1 — 搜索字符

        这个例子用于搜索一个字符串中是否包含特定字符。对于网站的搜索框功能，搜索词汇是一个经常被使用的特性。在JavaScript中，我们可以使用字符串的indexOf()方法来判断一个字符串中是否包含特定的字符。

const searchText = 'This is a test string.';
const searchChar = 'a';

if (searchText.indexOf(searchChar) !== -1) {
    console.log(`'${searchText}' contains the character '${searchChar}'.`);
} else {
    console.log(`'${searchText}' does not contain the character '${searchChar}'.`)
}

        上面代码中，我们先声明了一个需要被搜索的字符串searchText和需要查找的字符searchChar，然后使用indexOf()方法在searchText中查找searchChar，如果返回值不为-1，则说明searchChar被找到了，否则就是没找到。

例子2 — 数组排序

        这个例子用于对一个数组进行排序，使其按照一定的规则排列。在JavaScript中，我们可以使用数组的sort()方法来对其进行排序。

const unsortedArray = [3, 7, 1, 9, 2, 5, 8, 4, 6];

console.log(`Unsorted Array: ${unsortedArray}`);

const sortedArray = unsortedArray.sort((a, b) => a - b);

console.log(`Sorted Array: ${sortedArray}`);

        上面的代码中，我们定义了一个未经排序的数组unsortedArray，然后使用sort()方法按照升序排列其中的元素，最后在控制台中输出了排序前和排序后的数组。

例子3 — 对象属性读取和修改

        这个例子用于读取一个对象的属性值，然后修改其中的某个值。在JavaScript中，我们可以通过.运算符或[]运算符来读取对象中的属性值，而我们可以直接对对象的属性进行修改。

const myObject = {
    name: 'John',
    age: 35,
    job: 'Developer'
};

console.log(`Before: ${myObject.age}`);

myObject.age += 1;

console.log(`After: ${myObject.age}`);

        上述代码中，我们定义了一个对象myObject，它包含了三个属性：name、age和job。接着，我们通过console.log函数打印出了这个对象中age属性的初始值。之后，我们直接对myObject对象的age属性进行了修改。最后，我们打印了修改后的age属性。

例子4 — 事件监听器

        这个例子用于监听页面中鼠标点击事件，并在点击页面时输出一条消息。在JavaScript中，我们可以使用addEventListener()方法为网页元素添加事件监听器。

<!DOCTYPE html>
<html>
    <head>
        <title>Event Listener Example</title>
    </head>
    <body>
        <h1>Click anywhere on this page to log a message.</h1>
        <script>
            const message = 'You clicked the page!';
            document.addEventListener('click', () => {
                console.log(message);
            });
        </script>
    </body>
</html>

        这个例子的HTML文件中包含一个文本信息和一个JavaScript代码块。在JavaScript中，我们使用addEventListener()方法将一个回调函数注册到document对象上，来监听页面的点击事件。当页面被点击时，回调函数被调用，输出message的值到开发者控制台。

例子5 - 轮播图

        这个例子用于实现网页轮播图的效果。一个典型的轮播图包含多个图片和导航按钮，通过定时器和样式变换来实现图片的自动轮播和导航按钮样式的切换。在JavaScript中，我们可以使用定时器、样式属性和事件监听器来实现网页轮播图。

<!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>
<style>
  .slider-container {
    position: relative;
    overflow: hidden;
    width: 640px;
    height: 360px;
  }

  .slider-list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .slider-list li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 360px;
    text-align: center;
  }

  .slider-nav {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .slider-nav button {
    background: none;
    border: none;
    font-size: 24px;
    padding: 10px;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
  }

  .slider-prev {
    position: absolute;
    left: 0;
  }

  .slider-next {
    position: absolute;
    right: 0;
  }

  .slider-nav button:hover,
  .slider-nav button:focus {
    color: #333;
    /* 箭头的颜色 */
    opacity: 1;
    outline: none;
  }

  .slider-nav button:active {
    opacity: 0.5;
  }

  .slider-nav button:focus {
    outline: none;
  }

  .slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .slider-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #ddd;
    margin-right: 10px;
    cursor: pointer;
  }

  .slider-dot.active {
    background-color: #333;
  }

  .slider-nav button {
    background: none;
    border: none;
    font-size: 24px;
    padding: 10px;
    cursor: pointer;
    opacity: 0.5;
    /* 初始透明度为 0.5 */
    transition: opacity 0.2s ease-in-out;
  }

  .slider-nav button:hover,
  .slider-nav button:focus {
    color: #333;
    opacity: 1;
    /* 鼠标放上去时透明度为 1 */
    outline: none;
  }

  .slider-nav button:active {
    opacity: 0.5;
    /* 鼠标按下去时透明度为 0.5 */
  }
</style>

<body>
  <div class="slider-container">
    <ul class="slider-list">
      <li><img src="https://via.placeholder.com/640x360/?text=Slide+1" alt="Slide 1"></li>
      <li><img src="https://via.placeholder.com/640x360/?text=Slide+2" alt="Slide 2"></li>
      <li><img src="https://via.placeholder.com/640x360/?text=Slide+3" alt="Slide 3"></li>
    </ul>
    <div class="slider-nav">
      <button class="slider-prev">&#10094;</button>
      <button class="slider-next">&#10095;</button>
    </div>
    <div class="slider-dots"></div>
  </div>
</body>
<script>
  // 获取轮播图相关元素
  const slider = document.querySelector('.slider-container');
  const sliderList = slider.querySelector('.slider-list');
  const sliderItems = sliderList.querySelectorAll('li');
  const sliderPrev = slider.querySelector('.slider-prev');
  const sliderNext = slider.querySelector('.slider-next');
  const sliderDots = slider.querySelector('.slider-dots');

  // 设置轮播图相关样式
  let index = 0; // 当前轮播图的下标
  let timerId = null; // 定时器ID

  sliderItems.forEach((item, i) => {
    item.style.display = 'none'; // 隐藏所有图片
    const dot = document.createElement('div');
    dot.classList.add('slider-dot');
    if (i === index) {
      dot.classList.add('active');
    }
    dot.addEventListener('click', () => {
      index = i;
      showSlider();
    });
    sliderDots.appendChild(dot);
  });

  sliderItems[index].style.display = 'block'; // 显示当前图片

  // 自动播放轮播图
  function startAutoPlay() {
    timerId = setInterval(() => {
      index++;
      if (index >= sliderItems.length) {
        index = 0;
      }
      showSlider();
    }, 3000);
  }

  startAutoPlay();

  // 鼠标悬停暂停轮播图
  slider.addEventListener('mouseenter', () => {
    clearInterval(timerId);
  });

  slider.addEventListener('mouseleave', () => {
    startAutoPlay();
  });

  // 上一张和下一张轮播图按钮的事件监听器
  sliderPrev.addEventListener('click', () => {
    index--;
    if (index < 0) {
      index = sliderItems.length - 1;
    }
    showSlider();
  });

  sliderNext.addEventListener('click', () => {
    index++;
    if (index >= sliderItems.length) {
      index = 0;
    }
    showSlider();
  });
  // 显示当前图片和对应的小圆点
  function showSlider() {
    // 显示对应的图片
    sliderItems.forEach(item => {
      item.style.display = 'none';
    });
    sliderItems[index].style.display = 'block';

    // 更新对应的小圆点
    const dots = sliderDots.children;
    Array.from(dots).forEach((dot, i) => {
      if (i === index) {
        dot.classList.add('active');
      } else {
        dot.classList.remove('active');
      }
    });
  }

</script>

</html>

        在这个例子中，我们首先定义了一个具有轮播图效果的HTML模板，其中包含了三张图片和导航按钮。接着，我们使用JavaScript获取了页面中的相关元素和样式，并为其添加了事件监听器和样式变换实现了图片和按钮的轮播效果。最后，我们定义了用于自动播放、上一张和下一张图片和对应导航点的切换以及鼠标悬停暂停轮播功能的函数showSlider()，来实现由按钮和自动化的轮播图效果。

效果图

        总的来说，这些例子展示了JavaScript的一些常见特性和操作，可以帮助大家更好地理解和使用此门编程语言。无论你是小白还是有经验的开发人员，这些例子都是可以进行实践和修改的，以满足不同的需求。

将这个案例改成vue的组件

<template>
  <div class="slider-container">
    <ul class="slider-list">
      <li v-for="(item, index) in items" :key="index">
        <img :src="item.src" :alt="item.alt" />
      </li>
    </ul>
    <div class="slider-nav">
      <button class="slider-prev" @click="prevSlide">&#10094;</button>
      <button class="slider-next" @click="nextSlide">&#10095;</button>
    </div>
    <div class="slider-dots">
      <span
        v-for="(item, index) in items"
        :key="index"
        class="slider-dot"
        :class="{ active: index === currentIndex }"
        @click="currentIndex = index"
      ></span>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data() {
    return {
      items: [
        { src: 'https://via.placeholder.com/640x360/?text=Slide+1', alt: 'Slide 1' },
        { src: 'https://via.placeholder.com/640x360/?text=Slide+2', alt: 'Slide 2' },
        { src: 'https://via.placeholder.com/640x360/?text=Slide+3', alt: 'Slide 3' }
      ],
      currentIndex: 0, // 当前轮播图的下标
      timerId: null // 定时器ID
    }
  },
  created() {
    this.startAutoPlay()
  },
  methods: {
    // 自动播放轮播图
    startAutoPlay() {
      this.timerId = setInterval(() => {
        this.currentIndex++
        if (this.currentIndex >= this.items.length) {
          this.currentIndex = 0
        }
      }, 3000)
    },
    // 停止自动轮播
    stopAutoPlay() {
      clearInterval(this.timerId)
    },
    // 上一张图片的处理函数
    prevSlide() {
      this.currentIndex--
      if (this.currentIndex < 0) {
        this.currentIndex = this.items.length - 1
      }
    },
    // 下一张图片的处理函数
    nextSlide() {
      this.currentIndex++
      if (this.currentIndex >= this.items.length) {
        this.currentIndex = 0
      }
    }
  },
  watch: {
    // 监听 currentIndex 的变化来做对应的操作
    currentIndex(val) {
      this.items.forEach((item, index) => {
        let el = this.$el.querySelector(`.slider-list li:nth-child(${index + 1})`)
        if (index === val) {
          el.style.display = 'block'
        } else {
          el.style.display = 'none'
        }
      })

      let dots = this.$el.querySelectorAll('.slider-dot')
      dots.forEach((dot, index) => {
        if (index === val) {
          dot.classList.add('active')
        } else {
          dot.classList.remove('active')
        }
      })
    }
  },
  // 通过mounted方法获取DOM元素
  mounted() {
    this.$nextTick(() => {
      let firstEl = this.$el.querySelector(`.slider-list li:first-child`)
      firstEl.style.display = 'block'
    })
  },
  // 在组件销毁的时候清除定时器
  beforeDestroy() {
    this.stopAutoPlay()
  }
}
</script>

<style scoped>
.slider-container {
  position: relative;
}
.slider-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.slider-list li {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
.slider-list li:first-child {
  display: block;
}
.slider-nav {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.slider-prev,
.slider-next {
  background: white;
  border: none;
  color: #999;
  font-size: 2rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.slider-prev:hover,
.slider-next:hover {
  cursor: pointer;
}
.slider-prev {
  left: 10px;
}
.slider-next {
  right: 10px;
}
.slider-dots {
  text-align: center;
  margin-top: 10px;
}
.slider-dot {
  background: #ccc;
  border-radius: 50%;
  display: inline-block;
  height: 12px;
  margin: 0 5px;
  transition: background 0.3s;
  width: 12px;
}
.slider-dot.active {
  background: #f00;
}

 

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

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

相关文章

rk3568 适配rk809音频

rk3568 适配rk809音频

rk3568 适配rk809音频 RK809是一款集成了多种功能的电源管理芯片&#xff0c;主要用于笔记本电脑、平板电脑、工控机等设备的电源管理。以下是RK809的详细功能介绍&#xff1a; 电源管理&#xff1a;控制电源的开关、电压、电流等参数&#xff0c;保证设备的稳定运行。音频管…
阅读更多...
Unity之使用Photon PUN开发多人游戏教程

Unity之使用Photon PUN开发多人游戏教程

前言 Photon是一个网络引擎和多人游戏平台，可以处理其服务器上的所有请求，我们可以在 Unity（或其他游戏引擎）中使用它，并快速把游戏接入Photon的网络中，而我们就可以专注于在项目中添加逻辑，专注于游戏玩法和功能了。 PUN（Photon Unity Networking）是一种开箱即用的解…
阅读更多...
什么是DevOps?如何理解DevOps思想？

什么是DevOps?如何理解DevOps思想？

博文参考总结自&#xff1a;https://www.kuangstudy.com/course/play/1573900157572333569 仅供学习使用&#xff0c;若侵权&#xff0c;请联系我删除&#xff01; 1、什么是DevOps? DevOps是一种思想或方法论&#xff0c;它涵盖开发、测试、运维的整个过程。DevOps强调软件开…
阅读更多...
Maven方式构建Spring Boot项目

Maven方式构建Spring Boot项目

文章目录 一&#xff0c;创建Maven项目二&#xff0c;添加依赖三&#xff0c;创建入口类四&#xff0c;创建控制器五&#xff0c;运行入口类六&#xff0c;访问Web页面七&#xff0c;修改访问映射路径八&#xff0c;定制启动标语1、创建标语文件2、生成标语字符串3、编辑标语文…
阅读更多...
DNDC模型在土地利用变化、未来气候变化下的建模方法及温室气体时空动态模拟实践技术

DNDC模型在土地利用变化、未来气候变化下的建模方法及温室气体时空动态模拟实践技术

DNDC模型讲解 1.1 碳循环模型简介 1.2 DNDC模型原理 1.3 DNDC下载与安装 1.4 DNDC注意事项 ​ DNDC初步操作 2.1 DNDC界面介绍 2.2 DNDC数据及格式 2.3 DNDC点尺度模拟 2.4 DNDC区域尺度模拟 2.5 DNDC结果分析 ​ DNDC气象数据制备 3.1 数据制备中的遥感和GIS技术 3…
阅读更多...
Vue3 + TypeScript + Uniapp 开发小程序【医疗小程序完整案例·一篇文章精通系列】

Vue3 + TypeScript + Uniapp 开发小程序【医疗小程序完整案例·一篇文章精通系列】

当今的移动应用市场已经成为了一个日趋竞争激烈的领域&#xff0c;而开发一个既能在多个平台上运行&#xff0c;又能够高效、可维护的应用则成为了一个急需解决的问题。 在这个领域中&#xff0c;Vue3 TypeScript Uniapp 的组合已经成为了一种受欢迎的选择&#xff0c;特别…
阅读更多...
ODB 2.4.0 使用延迟指针 lazy_shared_ptr 时遇到的问题

ODB 2.4.0 使用延迟指针 lazy_shared_ptr 时遇到的问题

最近在学习使用C下的ORM库——ODB&#xff0c;来抽象对数据库的CURD&#xff0c;由于C的ORM实在是太冷门了&#xff0c;ODB除了官方英语文档&#xff0c;几乎找不到其他好用的资料&#xff0c;所以在使用过程中也是遇到很多疑惑&#xff0c;也解决很多问题。近期遇到的一个源码…
阅读更多...
推荐系统系列之推荐系统概览（下）

推荐系统系列之推荐系统概览（下）

在推荐系统概览的第一讲中&#xff0c;我们介绍了推荐系统的常见概念&#xff0c;常用的评价指标以及首页推荐场景的通用召回策略。本文我们将继续介绍推荐系统概览的其余内容&#xff0c;包括详情页推荐场景中的通用召回策略&#xff0c;排序阶段常用的排序模型&#xff0c;推…
阅读更多...
Keil Debug 逻辑分析仪使用

Keil Debug 逻辑分析仪使用

Keil Debug 逻辑分析仪使用 基础配置 更改对应的bebug窗口参数 两边的 Dialog DLL 更改为&#xff1a;DARMSTM.DLL两边的 Parameter &#xff08;这里的根据单片机型号更改&#xff09;更改为&#xff1a;-pSTM32F103VE 选择左边的 Use Simulator 选项。 打开Debug和其中的逻…
阅读更多...
数据全生命周期管理

数据全生命周期管理

数据存储 时代"海纳百川&#xff0c;有容乃大"意味结构化、半结构和非结构化多样化的海量的 &#xff0c;也意味着批数据和流数据多种数据形式的存储和计算。面对不同数据结构、数据形式、时效性与性能要求和存储与计算成本等因素考虑&#xff0c;应该使用适合的存储…
阅读更多...
iptables防火墙（二）

iptables防火墙（二）

iptables防火墙&#xff08;二&#xff09; 一、SNAT策略1、SNAT策略简述2、配置实验 二、DNAT策略1、DNAT策略简述2、配置实验 三、Linux抓包工具tcpdump四、防火墙规则保存 一、SNAT策略 1、SNAT策略简述 SNAT策略就是将从内网传给外网的数据包的源IP由私网IP转换成公网IP&…
阅读更多...
四川省信创联盟2023年第一次理事会顺利召开，MIAOYUN荣获“信创企业优秀奖”！

四川省信创联盟2023年第一次理事会顺利召开，MIAOYUN荣获“信创企业优秀奖”！

5月18日&#xff0c;四川省技术创新促进会信创工委会&#xff08;四川省信创产业联盟&#xff09;在成都市高新区新川科技园成功召开《2023年第一次理事单位&#xff08;扩大&#xff09;会议》&#xff0c;四川省技术创新促进会专家组杜纯文副组长、四川省技术创新促进会任渝英…
阅读更多...
EasyRecovery16适用于Windows和Mac的专业硬盘恢复软件

EasyRecovery16适用于Windows和Mac的专业硬盘恢复软件

无论你对数据恢复了解多少&#xff0c; 我们将为您处理所有复杂的流程并简化恢复!适用于Windows和Mac的 专业硬盘恢复软件 硬盘数据无法保证绝对安全。有时会发生数据丢失&#xff0c;需要使用硬盘恢复工具。支持恢复不同存储介质数据&#xff1a;硬盘、光盘、U盘/移动硬盘、数…
阅读更多...
AC规则-1

AC规则-1

本文主要参考规范 GPD_Secure Element Access Control_vxxx.pdf OMA 架构 基本定义 GP(GlobalPlatform)定义了一套允许各应用提供方独立且安全地管理其在SE上的应用的安全框架&#xff0c;而AC(Access Control)&#xff0c;顾名思义&#xff0c;是对外部应用进行SE上应用访问…
阅读更多...
网络知识点之-动态路由

网络知识点之-动态路由

动态路由是指路由器能够自动地建立自己的路由表&#xff0c;并且能够根据实际情况的变化适时地进行调整。 中文名&#xff1a;动态路由外文名&#xff1a;dynamic routing 简述 动态路由是与静态路由相对的一个概念&#xff0c;指路由器能够根据路由器之间的交换的特定路由信息…
阅读更多...
【Python redis】零基础也能轻松掌握的学习路线与参考资料

【Python redis】零基础也能轻松掌握的学习路线与参考资料

Python redis是一种非常流行的缓存数据库&#xff0c;对于Python Web应用程序开发非常有用&#xff0c;能快速地处理大量的数据请求。Python redis的学习路线需要对Python语言有深刻的理解&#xff0c;并了解使用redis的API。在掌握了Python redis的基本知识后&#xff0c;就可…
阅读更多...
Java设计模式-策略模式

Java设计模式-策略模式

简介 在软件开发中&#xff0c;设计模式是为了解决常见问题而提供的一套可重用的解决方案。策略模式&#xff08;Strategy Pattern&#xff09;是其中一种常见的设计模式&#xff0c;它属于行为型模式。该模式的核心思想是将不同的算法封装成独立的策略类&#xff0c;使得它们…
阅读更多...
【halcon资料】取出区域的轮廓上所有转折点

【halcon资料】取出区域的轮廓上所有转折点

一、说明 在区域运算的时候&#xff0c;有时候需要用图形的顶点来描述&#xff0c;比如&#xff0c;两个图中对象需要对齐&#xff0c;或者仿射变换&#xff0c;于是特征点是需要提取的。本文给出一个提取顶点的示例。 二、算子 1.1 get_region_polygon算子 &#xff08;1&a…
阅读更多...
高级树结构

高级树结构

二叉排序树 左子树中所有结点的值&#xff0c;均小于其根结点的值。 右子树中所有结点的值&#xff0c;均大于其根结点的值。 二叉搜索树的子树也是二叉搜索树。 注意&#xff1a; 1.二叉查找树不能插入重复元素 2.中序遍历是一个递增的数列 3.高度越小查询效率越高 二叉排序…
阅读更多...
设备采购信息管理系统

设备采购信息管理系统

系列文章 任务14 设备采购信息管理系统 文章目录 系列文章一、实践目的与要求1、目的2、要求 二、课题任务三、总体设计1.存储结构及数据类型定义2.程序结构3.所实现的功能函数4、程序流程图 四、小组成员及分工五、 测试界面展示添加采购信息按编号查找采购信息按设备编号查找…
阅读更多...
最新文章

Copyright @ 2022~2023