JavaScript前端开发案例教程——黑马程序员课后实践 |21xrx.com

JavaScript前端开发案例教程——黑马程序员课后实践

2023-06-16 14:49:20 深夜i 13 0

JavaScript 前端开发案例教程

JavaScript作为Web前端开发的主要语言之一，越来越受到开发者的重视。而一个好的学习方法就是实践，在黑马程序员的课程中，也有许多经典案例供学员练手。下面，我们就来看一下其中的几个案例。

1. 原生JavaScript实现轮播图

轮播图是Web页面中常用的一种元素，它可以有效地展示多张图片或信息。以下是一个基于原生JavaScript实现的轮播图代码案例：

js
// 首先获取轮播元素和图片容器
let slider = document.querySelector('.slider');
let slides = document.querySelectorAll('.slides > img');
// 当前图片和索引
let current = 0;
let length = slides.length;
slides[0].style.zIndex = 1;
// 自动轮播
setInterval(function () {
  slides[current].style.zIndex = 0;
  current = (current + 1) % length;
  slides[current].style.zIndex = 1;
}, 2000);

2. JavaScript实现计算器

计算器是一个简单而有趣的项目，可以让你练习JavaScript中的表达式和函数。以下是一个基于JavaScript实现的计算器代码案例：

js
// 定义操作数和操作符
let num1 = '';
let num2 = '';
let operator = '';
// 获取数字和运算符
function press(num) {
  if (operator === '') {
    num1 += num;
    screen.value = num1;
  } else {
    num2 += num;
    screen.value = num2;
  }
}
function opPress(op)
  operator = op;
// 计算结果
function equal() {
  let result = 0;
  switch (operator) {
    case '+':
      result = +num1 + +num2;
      break;
    case '-':
      result = +num1 - +num2;
      break;
    case '*':
      result = +num1 * +num2;
      break;
    case '/':
      result = +num1 / +num2;
      break;
  }
  screen.value = result;
}
// 清空数据
function clear()
  num1 = '';
  num2 = '';
  operator = '';
  screen.value = '';

3. JavaScript实现倒计时

倒计时是Web页面中常见的一种元素，通常用于活动、秒杀等场景。以下是一个基于JavaScript实现的倒计时代码案例：

js
let countDownDate = new Date("Jan 1, 2022 00:00:00").getTime();
let countdownFunction = setInterval(function () {
  var now = new Date().getTime();
  var distance = countDownDate - now;
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  document.getElementById("timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
  if (distance < 0) {
    clearInterval(countdownFunction);
    document.getElementById("timer").innerHTML = "EXPIRED";
  }
}, 1000);

上一篇: idea打包java可执行jar包

下一篇: C语言简单数据类型包括哪些

评论区

相似文章