21xrx.com
2025-03-13 23:36:17 Thursday
登录
文章检索 我的文章 写文章
JavaScript前端开发案例教程——黑马程序员课后实践
2023-06-16 14:49:20 深夜i     --     --
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);
  
  

评论区

{{item['qq_nickname']}}
()
回复
回复