html + css + js简单的项目

如果您想要一个简单的HTML、CSS和JavaScript项目，可以尝试创建一个简单的网页，其中包含一些交互性元素。以下是一个简单的计算器示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单计算器</title>
<style>
  .calculator {
    margin: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
  }
  input[type="text"] {
    width: 200px;
    margin-bottom: 10px;
    padding: 8px 4px;
    font-size: 16px;
    border: 1px solid #ccc;
  }
  input[type="button"] {
    width: 50px;
    margin: 5px;
    padding: 8px 4px;
    font-size: 16px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
  }
</style>
</head>
<body>
 
<div class="calculator">
  <input type="text" id="display" disabled>
  <input type="button" value="1" onclick="press('1')">
  <input type="button" value="2" onclick="press('2')">
  <input type="button" value="3" onclick="press('3')">
  <input type="button" value="+" onclick="press('+')">
  <input type="button" value="4" onclick="press('4')">
  <input type="button" value="5" onclick="press('5')">
  <input type="button" value="6" onclick="press('6')">
  <input type="button" value="-" onclick="press('-')">
  <input type="button" value="7" onclick="press('7')">
  <input type="button" value="8" onclick="press('8')">
  <input type="button" value="9" onclick="press('9')">
  <input type="button" value="*" onclick="press('*')">
  <input type="button" value="0" onclick="press('0')">
  <input type="button" value="Clear" onclick="clearDisplay()">
  <input type="button" value="=" onclick="calculate()">
  <input type="button" value="/ " onclick="press('/')">
</div>
 
<script>
  let operator = "";
  let firstNumber = 0;
  let waitingForOperand = true;
 
  function press(buttonText) {
    const display = document.getElementById("display");
    const input = display.value;
 
    if (buttonText === "Clear") {
      display.value = "";
    } else if (waitingForOperand) {
      display.value = "";
      waitingForOperand = false;
    }
 
    if (input === "0" && buttonText !== ".") {
      display.value = buttonText;
    } else if (buttonText !== "." || !input.includes(".")) {
      display.value = input + buttonText;
    }
  }
 
  function clearDisplay() {
    const display = document.getElementById("display");
    operator = "";
    firstNumber = 0;
    waitingForOperand = true;
    display.value =

html + css + js简单的项目

评论已关闭

推荐阅读