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

狗蛋的博客之旅

已于 2023-05-21 21:58:08 修改

阅读量1.2k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2023-05-21 21:36:54 首次发布

本文链接：https://blog.csdn.net/weixin_43263566/article/details/130797155

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

部分数据来源：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;
}