21xrx.com
2025-04-02 22:30:09 Wednesday
文章检索 我的文章 写文章
从案例学习HTML、CSS、JavaScript编程
2023-06-11 07:11:26 深夜i     11     0
HTML CSS JavaScript

HTML、CSS、JavaScript是构成Web页面的三大基础技术， HTML用于定义文档结构，CSS用于样式表达，而JavaScript实现动态交互效果。在本文中，将从三个经典案例学习HTML、CSS、JavaScript编程，让读者了解这三种技术如何结合使用。

案例1：用HTML和CSS制作底部悬浮条

底部悬浮条是一种常见的网站布局形式，一般用于放置网站版权信息或常用链接。以下是底部悬浮条HTML和CSS代码:

版权信息 © 2022
   
 
      
  关于我们
      
  联系我们
ss
.footer
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #f1f1f1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
.footer p
  margin: 0;
.footer li
  display: inline-block;
  margin-left: 20px;
.footer a
  color: #333;

案例2：用JavaScript实现轮播图效果

轮播图是一种展示多张图片的交互效果，在网站首页或产品展示页面常用。以下是JavaScript实现轮播图代码：

ss

.slider


  position: relative;


  width: 500px;


  height: 300px;


  margin: 0 auto;


.slider-content


  position: absolute;


  top: 0;


  left: 0;


  width: 100%;


  height: 100%;


  list-style: none;


  margin: 0;


  padding: 0;


.slider-content li


  position: absolute;


  top: 0;


  left: 0;


  width: 100%;


  height: 100%;


  opacity: 0;


.slider-content li.active


  opacity: 1;


.slider-dots {


  position: absolute;


  bottom: 20px;


  left: 50%;


  transform: translateX(-50%);


  list-style: none;


  margin: 0;


  padding: 0;


}


.slider-dots li


  display: inline-block;


  width: 10px;


  height: 10px;


  border-radius: 50%;


  margin-right: 10px;


  background-color: #ccc;


  cursor: pointer;


.slider-dots li.active


  background-color: #333;


script

const sliderContent = document.querySelector(".slider-content");


const sliderItems = Array.from(sliderContent.children);


const dotsContainer = document.querySelector(".slider-dots");


const dots = Array.from(dotsContainer.children);


let currentIndex = 0;


let timerId;


function handleDotClick(e) {


  const { target } = e;


  if (target.tagName !== "LI") return;


  const index = dots.indexOf(target);


  if (index === currentIndex) return;


  activateDot(index);


  slideTo(index);


}


function activateDot(index) {


  dots[currentIndex].classList.remove("active");


  dots[index].classList.add("active");


  currentIndex = index;


}


function slideTo(index) {


  const currentSlide = sliderItems[currentIndex];


  const targetSlide = sliderItems[index];


  currentSlide.classList.remove("active");


  targetSlide.classList.add("active");


}


dotsContainer.addEventListener("click", handleDotClick);


function autoSlide() {


  if (currentIndex === sliderItems.length - 1) {


    activateDot(0);


  } else {


    activateDot(currentIndex + 1);


  }


  slideTo(currentIndex);


  timerId = setTimeout(autoSlide, 4000);


}


timerId = setTimeout(autoSlide, 4000);

案例3：用JavaScript实现简单的计算器

计算器是一种经典的交互应用程序，以下是HTML、CSS和JavaScript构成的计算器代码：




 
  

 
  

 

  
    

  
    

  
    

  
    

  
    

  
    

  
    

  
    

  
    

  
    

  
    

  
    

  
    

  
    

  
    

  
    

  
  

 




ss

.calculator {


  width: 300px;


  margin: 0 auto;


  padding: 20px;


  background-color: #f1f1f1;


  border-radius: 5px;


  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);


}


.screen


  width: 100%;


  margin-bottom: 20px;


  padding: 10px;


  font-size: 20px;


.buttons


  display: flex;


  flex-wrap: wrap;


button


  width: 64px;


  height: 48px;


  margin-right: 10px;


  margin-bottom: 10px;


  color: #333;


  font-size: 20px;


  background-color: #fff;


  border-radius: 5px;


  border: none;


  cursor: pointer;


button:hover


  background-color: #ccc;


.clear


  background-color: #ff4d4d;


  color: #fff;


.equals


  background-color: #4dff4d;


  color: #fff;


script

const screen = document.querySelector(".screen");


const buttons = document.querySelectorAll("button");


let currentOperation = "";


let leftOperand = "";


let rightOperand = "";


let shouldClearScreen = false;


function handleButtonClick(e) {


  const buttonText = e.target.textContent;


  switch (buttonText) {


    case "C":


      clearScreen();


      break;


    case "+":


    case "-":


    case "*":


    case "/":


      handleOperator(buttonText);


      break;


    case "=":


      handleEquals();


      break;


    default:


      handleNumber(buttonText);


      break;


  }


}


function clearScreen()


  screen.value = "";


  currentOperation = "";


  leftOperand = "";


  rightOperand = "";


function handleOperator(operator) {


  if (currentOperation !== "") {


    calculate();


  }


  currentOperation = operator;


  leftOperand = screen.value;


  shouldClearScreen = true;


}


function handleEquals() {


  if (currentOperation === "" || rightOperand !== "")


    return;


  


  rightOperand = screen.value;


  calculate();


  currentOperation = "";


  leftOperand = "";


  rightOperand = "";


}


function handleNumber(number) {


  if (shouldClearScreen)


    screen.value = "";


    shouldClearScreen = false;


  


  screen.value += number;


}


function calculate() {


  const left = parseFloat(leftOperand);


  const right = parseFloat(rightOperand !== "" ? rightOperand : screen.value);


  switch (currentOperation) {


    case "+":


      screen.value = left + right;


      break;


    case "-":


      screen.value = left - right;


      break;


    case "*":


      screen.value = left * right;


      break;


    case "/":


      screen.value = left / right;


      break;


  }


}


buttons.forEach(button => {


  button.addEventListener("click", handleButtonClick);


});

本文从实用角度出发，通过三个经典案例，学习了HTML、CSS、JavaScript的基础应用，希望对初学者有所帮助。

  
  

评论区