当前位置: 首页 > news >正文

HMTL+CSS+JS-新手小白循序渐进案例入门

简易计算器1.0

一、HTML 基础结构解析

首先看整个 HTML 文档的基本结构,基本如下:

<!DOCTYPE html>
<html>
<head><title>简单表单</title>
</head>
<body><!-- 页面内容(省略) -->
</body>
</html>
  1. <!DOCTYPE html> - 这是文档类型声明,告诉浏览器这是一个 HTML5 文档。
  2. <html>标签 - 整个 HTML 文档的根标签,所有内容都包含在其中。
  3. <head>标签 - 包含文档的元数据,如标题、字符编码、引入的外部资源等。
  4. <title>标签 - 设置浏览器标签页上显示的标题。
  5. <body>标签 - 包含所有可见的页面内容,如文本、按钮、图片等。

二、页面内容详解

现在设计一个简易计算器1.0页面:就包括一个名称,一个输入框,一个“计算”的按钮。

<div style="text-align: center;"><h3>简单计算器</h3><input type="text" id="userInput" placeholder="输入内容"><button onclick="calculate()">计算</button><p id="result"></p></div>
  1. <div style="text-align: center;"> - 创建一个区块容器,并将其中的内容居中显示。

  2. <input>标签 - 创建一个输入框:

    • type="text" - 指定输入框类型为文本输入
    • id="userInput" - 为元素指定唯一标识符,方便后续通过 JavaScript 访问
    • placeholder="输入内容" - 提供提示文本,当输入框为空时显示
  3. <button>标签 - 创建一个按钮:

    • onclick="calculate()" - 定义按钮的点击事件,当按钮被点击时执行calculate()函数

三、JavaScript 交互详解

接下来看页面底部的<script>标签:

<script>function calculate() {const input = document.getElementById('userInput').value;document.getElementById('result').innerHTML = '计算结果:' + input;}</script>
  1. <script>标签 - 用于包含 JavaScript 代码,可放在 HTML 文档的任何位置,通常放在<body>标签的末尾以便页面元素先加载完成。

  2. function calculate() { ... } - 定义了一个名为calculate的函数,这就是按钮点击时会执行的函数。

  3. document.getElementById('userInput') - 通过元素的 id 获取输入框元素。document是 JavaScript 中表示整个 HTML 文档的对象,getElementById是它的一个方法,用于查找具有指定 id 的元素。

  4. .value - 获取输入框中的值。所有表单元素 (如 input、textarea 等) 都有一个value属性,用于获取或设置其内容。

  5. document.getElementById('result').innerHTML = ... - 通过 id 获取结果段落元素,并设置其innerHTML属性。innerHTML表示元素内部的 HTML 内容,可以用来动态更新页面显示。

  6. '计算结果:' + input - 将字符串 "计算结果:" 与用户输入的值拼接起来,形成最终要显示的内容。

四、完整工作流程

当用户访问这个页面并进行交互时,发生的事情是这样的:

  1. 浏览器加载 HTML 文件,解析并显示页面元素
  2. 用户在输入框中输入一些文本
  3. 用户点击 "计算" 按钮
  4. 按钮的onclick事件触发calculate()函数
  5. JavaScript 代码获取输入框的值
  6. JavaScript 代码将结果显示在页面上

五、完整代码与显示页面效果

<!DOCTYPE html>
<html>
<head><title>简单表单</title>
</head>
<body><div style="text-align: center;"><h3>简单计算器</h3><input type="text" id="userInput" placeholder="输入内容"><button onclick="calculate()">计算</button><p id="result"></p></div><script>function calculate() {const input = document.getElementById('userInput').value;document.getElementById('result').innerHTML = '计算结果:' + input;}</script>
</body>
</html>

 

PS:这里的运算逻辑暂时先不考虑,主要是为了学习前端页面。


简易计算器2.0

接下来继续设计简易计算器2.0,加入CSS的学习

一、添加内联 CSS 样式

首先,我们在<head>标签中添加一个<style>标签,用来存放 CSS 代码:

<!DOCTYPE html>
<html>
<head><title>简单表单</title><style>...此处省略...</style>
</head>
<body><!-- 页面内容(省略) -->
</body>
</html>

往style标签里面添加CSS代码,先一步一步来:

1.选择器与声明块

body {font-family: Arial, sans-serif;background-color: #f4f4f4;
}
  • body 是选择器,选中 HTML 中的 body 元素
  • 大括号内是声明块,包含一个或多个属性值对
  • font-family 设置字体,多个字体是备用方案
  • background-color 设置背景颜色,使用十六进制颜色码

2.类选择器

.container {max-width: 400px;margin: 0 auto;
}
  • .container 选中所有 class="container" 的元素
  • max-width 设置最大宽度,使容器在大屏幕上不会太宽
  • margin: 0 auto 水平居中元素

3.元素组合选择器

input, button {width: 100%;padding: 10px;
}
  • 逗号分隔的选择器同时应用样式
  • width: 100% 让元素占满父容器宽度
  • padding 设置内边距,增加元素内部空间

4.伪类选择器

button:hover {background-color: #45a049;
}
  • :hover 是伪类,当鼠标悬停在元素上时生效
  • 这里实现了按钮的悬停效果,让颜色变深

5.ID 选择器

#result {margin-top: 15px;background-color: #e8f5e9;
}
  • #result 选中 id="result" 的元素
  • 为结果区域添加了上边距和背景色

二、修改 HTML 结构应用样式

div标签应用上class选择器,Input标签应用上id选择器

<div class="container"><h3>简单计算器</h3><input type="text" id="userInput" placeholder="输入内容"><button onclick="calculate()">计算</button><p id="result"></p>
</div>

PS:

  • id选择器对应的是
  • class选择器对应的是.

三、完整代码与显示页面效果

<!DOCTYPE html>
<html><head><title>简单表单</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;}.container {max-width: 400px;margin: 0 auto;padding: 20px;background-color: white;border-radius: 5px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);}input, button {width: 100%;padding: 10px;margin: 8px 0;box-sizing: border-box;}button {background-color: #4CAF50;color: white;border: none;cursor: pointer;}button:hover {background-color: #45a049;}#result {margin-top: 15px;padding: 10px;background-color: #e8f5e9;border-radius: 3px;}</style></head>
<body><div class="container"><h3>简单计算器</h3><input type="text" id="userInput" placeholder="输入内容"><button onclick="calculate()">计算</button><p id="result"></p></div><script>function calculate() {const input = document.getElementById('userInput').value;document.getElementById('result').innerHTML = '计算结果:' + input;}</script>
</body>
</html>

 

 


简易计算器3.0

现在不想要输入框了,想改成1234567890和加减乘除一个一个的按钮,并且上方有一个显示框,用户点击数字或者运算符可以显示在显示框内,计算按钮不变。大体是这样,模仿传统计算器。

直接给出完整代码(里面都有注释):

<!DOCTYPE html>                      <!--文档类型声明,告诉浏览器这是一个 HTML5 文档--><html lang="en">                 <!--根标签, 设置文档语言为英语--><head>                       <!--包含文档的元数据,如标题、字符编码、引入的外部资源等--><title>简单表单</title><address>Written by island.</br>Time:2025-06-10</address><!-- 存放 CSS 代码 --><style>body {                              /* 选择器,选中 HTML 中的 body 元素 */font-family:Arial, sans-serif;  /* 设置页面的字体, 多个字体是备用方案*/background-color: #f4f4f4;      /* 设置页面背景颜色, 使用十六进制颜色码*/}.container {                       /* 选中所有 class="container" 的元素来应用 CSS 样式 */max-width: 300px;          /* 设置容器的最大宽度 */margin: 0 auto;           /* 水平居中容器 */padding: 20px;            /* 设置容器内边距 */background-color: #fff;   /* 设置容器背景颜色 */border-radius: 5px;       /* 设置容器圆角 */box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 设置容器阴影 */}.display {width: 100%;               /* 输入框和按钮宽度占满容器 */padding: 10px;            /* 设置输入框和按钮内边距 */margin-bottom: 15px;box-sizing: border-box;text-align: right;font-size: 1.2em;border: 1px solid #ddd;border-radius: 3px;             /* 设置圆角 */ }.buttons {                     display: grid;            /* 使用网格布局 */grid-template-columns: repeat(4, 1fr); /* 设置四列等宽 */gap: 10px;                /* 设置按钮之间的间距 */}button {padding: 10px;background-color: #f1f1f1;border: 1px solid #ddd;border-radius: 3px;cursor: pointer;           /* 鼠标悬停时显示手型光标 */font-size: 1em;        /* 设置按钮文字大小 */}button:hover {                      /* :hover 是伪类,当鼠标悬停在元素上时生效 */background-color: #e1e1e1; /* 鼠标悬停时改变按钮背景颜色 */}.operator {                     /* 选中 class="operator" 的元素来应用 CSS 样式 */background-color: #4CAF50; /* 设置运算符按钮的背景颜色 */color: white;              /* 设置运算符按钮文字颜色为白色 */}.operator:hover {background-color: #45a049;}.calculate {background-color: #2196F3;color: white;grid-column: span 4;}.calculate:hover {background-color: #0b7dda;}    </style></head><body>                        <!--文档的主体内容, 包含所有可见的页面内容,如文本、按钮、图片等--><div class="container">   <!--使用类名 container 来应用 CSS 样式--><h3>Island的计算器</h3><input type="text" id="display" class="display" readonly>     <!--readonly 属性使输入框只读,用户无法编辑内容--><div class="buttons"><button onclick="appendToDisplay('7')">7</button>          <!--将字符串 '7' 作为参数传入函数appendToDisplay--><button onclick="appendToDisplay('8')">8</button><button onclick="appendToDisplay('9')">9</button><button class="operator" onclick="appendToDisplay('+')">+</button><button onclick="appendToDisplay('4')">4</button><button onclick="appendToDisplay('5')">5</button><button onclick="appendToDisplay('6')">6</button><button class="operator" onclick="appendToDisplay('-')">-</button><button onclick="appendToDisplay('1')">1</button><button onclick="appendToDisplay('2')">2</button><button onclick="appendToDisplay('3')">3</button><button class="operator" onclick="appendToDisplay('*')">*</button><button onclick="appendToDisplay('0')">0</button><button onclick="clearDisplay()">C</button>                <!--点击 C 按钮时调用 clearDisplay 函数--><button onclick="appendToDisplay('.')">.</button><button class="operator" onclick="appendToDisplay('/')">/</button><button class="calculate" onclick="calculate()">计算</button>         <!--点击等于按钮时调用 calculate 函数--></div><!--id: 为元素指定唯一标识符,方便后续通过 JavaScript 访问 ;  placeholder: 提供提示文本,当输入框为空时显示--><!--按钮点击时触发 JavaScript 函数 calculate(),计算输入的表达式--><p id="result"></p></div><!--JavaScript 代码通常放在<body>标签的末尾以便页面元素先加载完成--><script>// appendToDisplay 函数用于将按钮点击的数字或运算符添加到显示区域function appendToDisplay(value) {// document.getElementById('display') 获取 id 为 display 的元素const display = document.getElementById('display');// 将传入的 value 添加到显示区域的当前值后面display.value += value;}function clearDisplay() {// 清空显示区域document.getElementById('display').value = '';}function calculate(){try {// document是 JavaScript 中表示整个 HTML 文档的对象,getElementById是它的一个方法,用于查找具有指定 id 的元素// innerHTML表示元素内部的 HTML 内容,可以用来动态更新页面显示const expression = document.getElementById('display').value; // 获取显示区域的值const result = eval(expression); // 使用 eval 函数计算表达式的值document.getElementById('result').innerHTML = '计算结果: ' + result; // 显示计算结果} catch (error) {document.getElementById('result').innerHTML = '错误: ' + error.message; // 如果计算出错,显示错误信息}}</script></body></html>

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.dtcms.com/a/241850.html

相关文章:

  • Neo4j 图数据库安装教程(2024最新版)—— Windows / Linux / macOS 全平台指南
  • java生成PDF合并单元格
  • 电路图识图基础知识-电机顺序启动控制电路解析(二十二)
  • 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | EventKey Codes(键盘码)
  • 滑动窗口最大值和最小值
  • 【靶场】xxe漏洞2
  • 【AI论文精读7】GraphRAG
  • 下载WinLibs时UCRT Runtime和MSVCRT Runtime(针对旧版本Windows)的区别
  • 基于“SpringBoot+uniapp的考研书库微信小程序设计与实现7000字论文
  • Monorepo + PNPM 搭建高效多项目管理
  • 云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?
  • 深入浅出掌握 Axios(持续更新)
  • 深入解析 Nacos MCP Router:云原生时代的 MCP 服务调度中枢
  • 云原生核心技术 (4/12): Docker 进阶:镜像优化实战与 Docker Compose 揭秘
  • uniapp+vue2+h5图片下载保存,微信浏览器、非微信浏览器
  • spark数据处理练习题番外篇【上】
  • Spring Boot集成Mina的Socket资源管理:从稳定通信到高性能优化
  • Windows上SSH连接Ubuntu失败
  • XWPFTemplate生成word
  • 置信水平、置信区间
  • 一体系数据平台的进化:基于阿里云 EMR Serverless Spark的持续演进
  • ESP32读取DHT11温湿度数据
  • 带eachers的html转word
  • 笔记 操作系统复习
  • 小程序的工具库-miniprogram-licia
  • AWS S3 SDK FOR JAVA 基本使用及如何兼容七牛云
  • 云计算——弹性云服务器(ECS)和裸金属服务器(BMS)
  • 小程序中的状态管理库-mobx-miniprogram
  • CentOS下的运维监控Grafana部署
  • 云计算——弹性云计算器(ECS)