HTML表单和CSS属性以及DOM实现网页版计算器

news/2024/5/5 12:29:13/文章来源:https://blog.csdn.net/weixin_64916311/article/details/129998128

目录

1、效果展示

2、源码

2.1HTML+CSS源码

2.2JS源码

3、CSS属性

3.1width、height属性

3.2font-size属性

3.3margin属性

3.4padding属性

3.5background-color属性

3.6border属性

3.7border-radius属性

3.8text-align属性

4、DOM

4.1根据id获取元素

4.2根据name获取元素

4.3根据类名获取元素

4.4根据css选择器获取元素

1、效果展示

加法：

 减法：

 乘法：

 除法：

 除数为0：

2、源码

2.1HTML+CSS源码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="cal.js"></script><style>* {margin: 0;padding: 0;}.cal {width: 400px;background-color: skyblue;margin: 50px auto;border-radius: 10px;}.cal h1 {background-color: rebeccapurple;height: 60px;line-height: 60px;border-radius: 10px 10px 0  0;text-align: center;color: azure;}.from-control {padding: 25px 50px;}.form-control label {text-align: right;}.form-control,input {padding: 5px 10px;height: 20px;border: 1px black;border-radius: 5px;}.form-control,button{width: 67px;height: 32px;font-size: 25px;border-radius: 5px;border: none;background-color: forestgreen;}.result {height: 25px;width: 200px;}</style></head><body><div class="cal"><h1>COUNTER</h1><div class="from-control"><label>NumberOne</label><input type="text" id="num1"/></div><div class="from-control"><label>NumberTwo</label><input type="text" id="num2"/></div><div class="from-control"><button id="plus">+</button><button id="reduce">-</button><button id="mul">*</button><button id="dev">/</button></div><div class="from-control"><label >RESULT</label><input type="text" class="result"/></div></div></body>
</html>

2.2JS源码

window.addEventListener('load',function(){document.querySelector('#plus').onclick = function() {cal('+');}document.querySelector('#reduce').onclick = function() {cal('-');}document.querySelector('#mul').onclick = function() {cal('*');}document.querySelector('#dev').onclick = function() {cal('/');}function cal(symbom) {let num1 = document.getElementById('num1').value;let num2 = document.getElementById('num2').value;let result = document.querySelector('.result');if(symbom == '/') {if(num2 == 0) {result.value = "除数不能为零";}else {result.value = num1 / num2;}}else {result.value = eval(num1 + symbom + num2);}}
})

3、CSS属性

3.1width、height属性

width设置宽度，height设置高度。

	<body><input type="button" value="按钮"/></body>

 原始的按钮大小：

 经过width、height修饰后：

	<style>#but{height: 60px;width: 100px;}</style><body><input type="button" value="按钮" id="but"/></body>

3.2font-size属性

font-size是设置字体大小大小的属性，它的常见单位为px。如，将一段话的字体设置为30px:

<style>.title {font-size: 30px;}</style><body><a class="title">这是一段话</a></body>

 经过font-size修饰后：

3.3margin属性

margin属性是修饰边距的一个属性，margin拥有四个参数值。因此，有四种边距情况。

情况1

margin:10px,15px,20px,30px;
  • 上外边距是 10px
  • 右外边距是 15px
  • 下外边距是 20px
  • 左外边距是 30px

情况2

margin:20px,30px,15px
  • 上外边距是 20px
  • 右外边距是 30px
  • 下外边距是 15px

情况3

margin:10px,20px
  • 上外边距是 10px
  • 右外边距是 20px

情况4

margin:50px
  • 四个边距都是 50px

我们拿四个边距的情况来展示效果：

	<style>.ty {margin:50px ;}</style><body><div class="ty"><label>这是一个label:</label><input type="text" /></div></body>

3.4padding属性

上面我们知道了margin是设置外边距的，那么内边距是由padding来修饰的，也是有四种情况：

情况1

padding:10px,5px,15px,20px;
  • 上内边距是 10px
  • 右内边距是 5px
  • 下内边距是 15px
  • 左内边距是 20px

情况2

padding:10px,5px,15px;
  • 上内边距是 10px
  • 右内边距和左内边距是 5px
  • 下内边距是 15px

情况3

padding:10px,5px;
  • 上内边距和下内边距是 10px
  • 右内边距和左内边距是 5px

情况4

padding:100px;
  •  上、下、左、右内边距是 100px

我们情况4来举例：

	<style>.test {padding: 50px;}</style><body><table border="1"><tr><td class="test"></td></tr></table></body>

效果显示：

3.5background-color属性

background-color属性实现的效果就是背景颜色，如将一段文本的背景颜色设置为天蓝色：

<style>.title {background-color: skyblue;}</style><body><a class="title">这是一段话</a></body>

 显示效果:

3.6border属性

border属性是修饰边框的一个属性，我们可以设置边框的大小以及边框的颜色。语法为：border: 大小 solid 颜色；如果我们只有大小没有solid值的话，默认颜色为黑色。

	<style>.ty {border: 2px solid red;}</style><body><label>这是一个label:</label><input type="text" class="ty"/></body>

3.7border-radius属性

border-radius属性是修饰边框的“圆润程度”也就是为元素添加圆角边框，语法为:border-radius: 大小;如将一个边框设置圆角边框为10px程度。

	<style>.ty {border-radius: 10px;}</style><body><label>这是一个label:</label><input type="text" class="ty"/></body>

 效果显示:

3.8text-align属性

text-align属性是用来规定文本对齐方式的，对齐方式有left左对齐、center居中对齐、right右对齐。其中left左对齐是默认的对齐方式。

居中对齐：

	<style>.test {text-align: center;}</style><body><h1 class="test">这是一个标题</h1></body>

效果显示：

右对齐： 

	<style>.test {text-align: right;}</style><body><h1 class="test">这是一个标题</h1></body>

 效果展示:

4、DOM

4.1根据id获取元素

document.getElementById是根据id来获取元素的，如下代码展示：

	<body><div><label>Number:</label><input type="text" id="num1"/></div><div><button id="but">按钮</button></div><script>document.getElementById('but').onclick = function() {let num = document.getElementById('num1').value;console.log(num);}	</script></body>

当我输入55后，再点击按钮控制台就输出了55：

因此，在上述代码中document.getElementById后面加上.onclick代表着点击这个按钮就做出相应的操作，加上.value代表着获取这个id所对应的值。

4.2根据name获取元素

document.getElementByName是根据name来获取元素

	<body><p>请选择你的兴趣爱好(多选):</p><input type="checkbox" name="sports" value="拳击"/>拳击<input type="checkbox" name="sports" value="柔术"/>柔术<input type="checkbox" name="sports" value="摔跤"/>摔跤<input type="checkbox" name="sports" value="散打"/>散打<script>var sports = document.getElementsByName('sports');console.log(sports[0]);console.log(sports[1]);</script></body>

上述代码中，我们通过document.getElementsByName('sports')获取到了拳击和柔术这两个表单元素：

4.3根据类名获取元素

document.getElementByClassName是根据class来获取元素

	<body><div><p class="person1">阿珍</p><p class="person2">阿强</p></div><script>let person1 = document.getElementsByClassName('person1');console.log(person1[0]);</script></body>

4.4根据css选择器获取元素

document.querySelector是根据css选择器来获取元素的，如下方代码：

	<body><div class="mma">拳击</div><div class="mma">柔术</div><div class="mma">摔跤</div><script>//第一个divlet firstdiv = document.querySelector('.mma');console.log(firstdiv);//所有的divlet alldiv = document.querySelectorAll('.mma');console.log(alldiv);</script></body>

本编博文主要是对HTML中表单以及CSS属性加上JS中的DOM的一些讲解，文章中详细讲解了各个知识点的实现效果及用法。大家下来了一定要自己尝试去敲代码，只有我们实现了一些页面才能很好的理解这个知识点以及怎样实现某个效果。文章有也多处知识点未实现页面效果大家也可以自行测试一番，感受一下这些知识点的实现效果，加油！

本期博客到这里就结束啦，感谢您的阅读。如有收获还请给博主点个小小的关注，咱们下期再见。 

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

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

HTML5 ＜hr＞ 标签、HTML5 ＜h1＞ 至 ＜h6＞ 标签

HTML5 ＜hr＞ 标签、HTML5 ＜h1＞ 至 ＜h6＞ 标签

HTML5 <hr> 标签 实例 当内容的主题发生变化时&#xff0c;使用 <hr> 标签进行分隔&#xff1a; <h1>HTML</h1> <p>HTML 是用于描述 web 页面的一种语言。</p><hr><h1>CSS</h1> <p>CSS 定义如何显示 HTML 元素。…
阅读更多...
HarmonyOS/OpenHarmony应用开发-ArkTS画布组件CanvasRenderingContext2D对象（十一）

HarmonyOS/OpenHarmony应用开发-ArkTS画布组件CanvasRenderingContext2D对象（十一）

measureText measureText(text: string): TextMetrics 该方法返回一个文本测算的对象&#xff0c;通过该对象可以获取指定文本的宽度值。 示例&#xff1a; // xxx.etsEntryComponentstruct MeasureText { private settings: RenderingContextSettings new RenderingConte…
阅读更多...
如何压缩照片到30kb以下？三个方法

如何压缩照片到30kb以下？三个方法

如何压缩照片到30kb以下&#xff1f;随着网络的发展&#xff0c;我们经常要上传一些照片到网上&#xff0c;如公务员考试&#xff0c;教师招聘等&#xff0c;而且要求上传的照片大小不超过30kb&#xff0c;我们如何把照片压缩到30kb以下呢&#xff1f;现在很多平台上传图片时都…
阅读更多...
Ae：表达式应用基础

Ae：表达式应用基础

通过几个最常用的变量及函数&#xff08;方法&#xff09;来了解 Ae 表达式。有关表达式语言语法基础&#xff0c;请参阅&#xff1a;《Ae&#xff1a;表达式语法基础》◆ ◆ ◆时间相关time返回合成的当前时间值&#xff0c;以秒为单位。比如&#xff0c;当处于 1 秒的时间点…
阅读更多...
【论文总结】针对操作系统级虚拟化的抽象资源攻击

【论文总结】针对操作系统级虚拟化的抽象资源攻击

介绍 这是一篇来自2021CCS的论文&#xff0c;作者有Nanzi Yang, Wenbo Shen, Jinku Li, Yutian Yang, Kangjie Lu, Jietao Xiao, Tianyu Zhou, Chenggang Qin, Wang Yu, Jianfeng Ma, Kui Ren。 概述 本文的贡献如下&#xff1a; 新的攻击面&#xff1a;作者揭示了一个影响操…
阅读更多...
【从0学Python基础】Python的基础语法（一）

【从0学Python基础】Python的基础语法（一）

文章目录常量和表达式变量和类型变量的定义变量的使用变量的类型intfloatstrbool动态类型注释输入和输出输出输入运算符算数运算符关系运算符逻辑运算符赋值运算符其他常量和表达式 print(1 2 * 3)print是Python内置的一个函数&#xff0c;作用为输入打印到控制台形如1 2 * …
阅读更多...
Leetcode完成所有工作的最短时间2

Leetcode完成所有工作的最短时间2

我的解法&#xff1a; 先排序&#xff0c;然后让能工作最多的工人去做最长时间的工作&#xff0c;最短工作的工人去做最短时间的工作 class Solution:def minimumTime(self, jobs: List[int], workers: List[int]) -> int:jobs.sort()workers.sort()max_time-1for pointer…
阅读更多...
HDFS学习笔记 【Namenode/数据块管理】

HDFS学习笔记 【Namenode/数据块管理】

说明 Namenode关于数据块管理主要做两方面的事情。 文件系统对应数据块 数据块对应数据节点 Block的数据结构 通过Block&#xff0c;BlockInfo,BlocksMap,replica等数据结构表示数据块。 Block 唯一标识一个数据块 包含有比较方法&#xff0c;通过blockId进行比较 BlockI…
阅读更多...
前端自动化测试之葵花宝典

前端自动化测试之葵花宝典

作者&#xff1a;京东零售 杜兴文 首先聊一下概念&#xff0c;Web 前端自动化测试是一种通过编写代码来自动化执行 Web 应用程序的测试任务的方法&#xff0c;它通常使用 JavaScript 和测试框架 (如 Selenium、Appium 等) 来实现。 Web 前端自动化测试的优点是可以提高测试效…
阅读更多...
微服务+springcloud+springcloud alibaba学习笔记【基础知识+各个组件介绍+聚合父工程创建】(1/9)

微服务+springcloud+springcloud alibaba学习笔记【基础知识+各个组件介绍+聚合父工程创建】(1/9)

微服务springcloudspringcloud alibaba学习笔记 1/91、微服务简介1.1 微服务的自动化部署&#xff08;CI /CD&#xff09;(持续集成 持续交付&#xff09;1.2 服务集中化管理1.3 分布式架构1.4 熔断机制 Hystri2、SpringCloud 简介2.1 SpringCloud 版本对应关系2.2 SpringCloud…
阅读更多...
Node.js安装与配置（详细步骤）

Node.js安装与配置（详细步骤）

前言 本篇博文记录了Node.js安装与环境变量配置的详细步骤&#xff0c;旨在为将来再次配置Node.js时提供指导方法。 另外&#xff1a;Node.js版本请根据自身系统选择&#xff0c;安装位置、全局模块存放位置和环境变量应根据自身实际情况进行更改。 Node.js安装与配置 一、…
阅读更多...
windows命令执行的几种绕过方法

windows命令执行的几种绕过方法

windows命令执行的几种绕过方法介绍1、添加特殊符号2、定义变量3、切割字符串4、逻辑运算符在绕过中的作用5、利用for循环拼接命令介绍 反检测、反清理&#xff0c;是红队攻击中的重中之重&#xff0c;本文详细描述了几种windows执行命令的几种绕过手法。 1、添加特殊符号 w…
阅读更多...
【 Spring MVC 核心功能(一) - 使用注解实现 URL 路由映射】

【 Spring MVC 核心功能(一) - 使用注解实现 URL 路由映射】

文章目录引言一、RequestMapping 注解介绍1.1 RequestMapping 是 post 还是 get 请求&#xff1f;1.2 RequestMapping 指定一种请求方式二、GetMapping三、PostMapping四、总结引言 前面我们讲到&#xff0c;学习 Spring MVC 需要掌握三个核心功能即连接&#xff0c;获取参数&…
阅读更多...
webgl-attribute、uniform、varying三者的区别

webgl-attribute、uniform、varying三者的区别

通用js: let canvas document.getElementById(webgl) canvas.width window.innerWidth canvas.height window.innerHeight let ctx canvas.getContext(webgl) attribute&#xff1a; 范围: 只适用于vertexShader&#xff0c;将js代码中的数据传递给vertexShader。 使用方…
阅读更多...
软考-套接字（scoket）

软考-套接字（scoket）

&#x1f4a4;SocketSocket套接字&#xff1a;是由系统提供用于网络通信的技术&#xff0c;是基于TCP/IP协议的网络通信的基本操作单元。将OSI模型中从传输层到物理层封装起来的抽象层&#xff0c;把网络协议隐藏在Socket抽象层中&#xff0c;只对使用者暴露API接口&#xff0c…
阅读更多...
DDoS攻击实验笔记

DDoS攻击实验笔记

DoS&DDoS简介 DoS(Denial of Service)&#xff0c;拒绝服务攻击是通过一些方法影响服务的可用性&#xff0c;比如早期主要基于系统和应用程序的漏洞&#xff0c;只需要几个请求或数据包就能导致长时间的服务不可用&#xff0c;但易被入侵检测系统发现。 DDoS(Distributed D…
阅读更多...
Mysql通过行表中的行数据筛选主表数据

Mysql通过行表中的行数据筛选主表数据

有订单头表和订单行表。筛选出行表中包含某些商品的头表 文章目录1. 示例表test_ordertest_order_line2. 实现EXISTS(推荐)内联1. 示例表 test_order test_order_line 2. 实现 EXISTS(推荐) 优点&#xff1a; 使用内联&#xff0c;主表字段很多的情况下&#xff0c;需要写越…
阅读更多...
人员跌倒识别检测系统 yolov7

人员跌倒识别检测系统 yolov7

人员跌倒识别检测系统通过PythonYOLO7网络模型算法&#xff0c;人员跌倒识别检测算法模型对现场画面中有人员倒地摔倒行为实时分析预警&#xff0c;发现则立即抓拍存档告警同步提醒后台值班人员及时处理。YOLOv7 的发展方向与当前主流的实时目标检测器不同&#xff0c;研究团队…
阅读更多...
LabVIEW实现ST-Link自动烧录单片机

LabVIEW实现ST-Link自动烧录单片机

目录 1、添加CLI到系统环境变量中 2、查询ST-Link/V2烧录器信息 3、连接待烧录的MCU芯片 4、下载固件到Flash 5、可能会使用的命令 5.1、-Rst 5.2、-ME 5.3、-SE 6、封装好的LabVIEW库 在讲解LabVIEW实现ST-Link自动烧录之前先聊一聊ST官方提供一款专用的Flash烧录工具…
阅读更多...
《华为机试》——查找两个字符串a,b中的最长公共子串

《华为机试》——查找两个字符串a,b中的最长公共子串

本期给大家带来的是 华为机试题库 关于 查找两个字符串a,b中的最长公共子串 的讲解。首先&#xff0c;我们还是先从题目入手进行分析思考&#xff01;&#xff01;&#xff01; 题目如下 &#xff1a;&#x1f447; 查找两个字符串a,b中的最长公共子串。若有多个&#xff0c;输…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业