htmltest~计算器界面的实现

最新推荐文章于 2023-11-24 20:35:18 发布
最新推荐文章于 2023-11-24 20:35:18 发布
阅读量227 收藏
点赞数
原文链接：https://juejin.im/post/5a3229dff265da432d281eb7
版权

通过div+css和部分布局的作用，实现了，如下效果的计算器展示页面

![C%]R$IGDK4J(%3LJXD3]SY.png

，废话不多说，最主要的还是分享代码：

html：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/counter.css">
</head>
<body>
    .<div class="counter-body">
        <div class="counter-title">
            <div>计算器</div>
            <div>-</div>
            <div>                口            </div>
            <div>X</div>
        </div>
        <div class="counter-content">
            <div class="counter-content-title">
                <div class="content-title">
                    <div>编辑(E)</div>
                    <div>查看(V)</div>
                    <div>帮助(H)</div>
                </div>
            </div>
            <div class="counter-content-input">
                <input  placeholder="0." type="text">
            </div>
            <div class="counter-content-btn-row">
                <div class="counter-content-btn-col1">
                    <div> </div>
                    <div>Backspace</div>
                    <div>CE</div>
                    <div>C</div>
                </div>
                <div class="counter-content-btn-col">
                    <div>MC</div>
                    <div>7</div>
                    <div>8</div>
                    <div>9</div>
                    <div>/</div>
                    <div>sqrt</div>
                </div>
                <div class="counter-content-btn-col">
                    <div>MR</div>
                    <div>4</div>
                    <div>5</div>
                    <div>6</div>
                    <div>*</div>
                    <div>%</div>
                </div>
                <div class="counter-content-btn-col">
                    <div>MS</div>
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>-</div>
                    <div>1/x</div>
                </div>
                <div class="counter-content-btn-col">
                    <div>M+</div>
                    <div>0</div>
                    <div>+/-</div>
                    <div>.</div>
                    <div>+</div>
                    <div>=</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

css样式表：
body{
    margin: 0 auto;
}
.counter-body{
    position: absolute;
    top: 200px;
    left: 200px;
    border: 2px solid #3335e5;
    width: 245px;
    height: 210px;
    border-radius: 5px;
    background: rgba(217, 217, 217, 0.49);
}
.counter-title{
    line-height: 26px;
    width: 100%;
    background: #3335e5;
    color:#fff;
}
.counter-title div{
    display: inline-block;
}
.counter-title div:first-child{
    margin-right: 70px;
}
.counter-title div:nth-child(4){
    background: red;
}
.counter-title div:nth-child(2){
    font-size: 18px;
}
.counter-title div:nth-child(2),.counter-title div:nth-child(4){
    padding-left: 9px;
    padding-right: 9px;
}
.counter-title div:nth-child(2),.counter-title div:nth-child(3),.counter-title div:nth-child(4){
    border-radius: 2px;
    height: 22px;
    border: 1px solid #FFFFFF;
}
.counter-title div{
    padding: 0 6px 2px 6px;
}
.content-title {
    display: table;
}
.content-title div{
    padding-left: 10px;
    text-align: center;
    line-height: 22px;
    display: table-cell;
    font-size: 12px;
}
.counter-content-input{
    padding-left: 10px;
}
.counter-content-input input{
    height: 15px;
    text-align: right;
    width: 220px;
}
.counter-content-btn-row{
    vertical-align: middle;
    margin-top: -15px;
    padding: 25px 10px;
}
.counter-content-btn-col1 div:first-child{
    background: rgba(247, 247, 247, 0.87);
    text-shadow: 5px 5px 3px #bfbfbf   ;
    color: #fff;
    width: 16px;
    line-height: 15px;
}
.counter-content-btn-col1 div:nth-child(2){
    background: rgba(247, 247, 247, 0.87);
    width: 65px;
    padding: 1px 1px;
}
.counter-content-btn-col1 div{
    color: red;
    background: rgba(247, 247, 247, 0.87);
    padding: 1px 1px;
    height: 15px;
    border-radius: 2px;
    text-align: center;
    display: inline-block;
    font-size: 10px;
    margin:  0 1.5px;
    border: 1px solid #858585;
    width: 46px;
}
.counter-content-btn-row div:nth-child(2),.counter-content-btn-row div:nth-child(3),.counter-content-btn-row div:nth-child(4){
    color: blue;
}
.counter-content-btn-row div:nth-child(4n+1){
    color: red;
}
.counter-content-btn-col div:first-child{
    background: rgba(247, 247, 247, 0.87);
    margin-right: 4px;
}
.counter-content-btn-col div{
    background: rgba(247, 247, 247, 0.87);
    display: inline-block;
    border-radius: 2px;
    text-align: center;
    display: inline-block;
    font-size: 10px;
    margin:  0 2px;
    border: 1px solid #858585;
    width: 24.38px;
    height: 15px;
}
.counter-content-btn-col1,.counter-content-btn-col{
    color: red;
    line-height: 15px;
    margin: 1.5px 0 ;
}
.counter-content-btn-col div:last-child{
    width: 25px;
}
复制代码

其中，

在这个部分实现的时候出现一个小问题就是有个前边儿的无字小方框，本来是一个空格就可以搞定，但是由于空格撑不起来，所以在div相应的部分加入了空格&nbsp

 
这个应该是或是这次实现过程中出现的一个小问题吧， 另外说一点，在这次实现的过程中用到了很多伪类选择器 也相当于是对伪类选择器的一次练手吧

加油吧~~~ fighting~@^-^@~

转载于:https://juejin.im/post/5a3229dff265da432d281eb7

weixin_34303897
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页设计用表格设计一个计算器界面 用于小白入门 安排
weixin_45437892的博客
04-10 3457
网页设计用表格设计计算器界面 用于小白入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ padding: 0;margin: ...
div与表格应用实例——计算器布局
零小唬的博客
10-24 1551
div与表格应用实例——计算器布局
使用表格布局实现界面计算器按钮
dianlunhui的专栏
08-16 3906
xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:stretchColumns="0,1,2,3"     tools:context=".Addressbook
sprout-test-calculator1:发芽测试计算器1
03-31
"发芽测试计算器1"是一个基于JavaScript的基本计算工具，它主要展示了如何利用HTML和JavaScript来创建一个简单的用户交互式界面。这个项目的核心是利用这两种技术实现数字输入、运算逻辑以及结果显示的功能。 首先...
模仿计算器简单操作
07-28
在IT行业中，创建一个模拟计算器是一项基础但重要的任务，它能帮助我们理解基本的编程逻辑和用户界面设计。本文将详细探讨如何实现“模仿计算器简单操作”，并涉及相关的技术领域，如Web计算器的构建和正则表达式在...
位板计算器
02-10
在位板计算器中，HTML可能用来显示棋盘布局，通过JavaScript或其他前端技术实现与后端位板计算逻辑的交互。 BitboardCalculator-master可能是一个Git仓库的名字，表明这是一个开源项目，包含该项目的主分支。在这样...
js实现计算器效果
11-20
接着，我们使用CSS来美化计算器界面，设置按钮和显示屏的布局、颜色、字体等样式。 三、JavaScript实现 1. **事件监听**：使用`addEventListener`为每个按钮添加点击事件监听器，当用户点击按钮时，执行相应的函数...
12.2计算器实现.rar_JavaScript/JQuery_WINDOWS_
08-10
CSS（可能包括Bootstrap或自定义样式）用于美化计算器界面，使其看起来专业且易于使用。JavaScript，尤其是jQuery，负责处理用户的输入，执行计算逻辑，并将结果显示在屏幕上。这包括点击按钮时触发的事件，以及相应...
使用JS与HTML5共同编写的简易计算器
06-13
使用HTML5设计外观，再使用JS技术实现计算器的具体功能：如四则运算、求模、退格与清除。
计算器（网页版）
12-16
网页版的计算器开发，比较适合初学者，代码比较规范，虽然还有一些缺点，但是给初学者看，是比较好的一个学习过程！
Android使用GridLayout布局完成简易计算器界面设计的任务要求.pdf
07-10
Android使用GridLayout布局完成简易计算器界面设计的任务要求.pdf 学习资料 复习资料 教学资源
计算器.html
07-14
使用js实现简单计算器，代码比较短，只要稍微懂一点应该就能看得懂
Web表格表单实验
最新发布
weixin_60586504的博客
11-24 1355
（2）页面内容为3个图层，各自应用wrap、result、op三个id选择器，其中第1个图层中包含2个子图层。第1个图层中插入1幅图像 casio.bmp，第2个子图层插入4行4列的表格。（3）td标记样式：边框为1px、线型是solid、颜色为black、水平居中对齐。（2）table标记样式：边框为8px、线型是双线、颜色为#0000ff。（5）外表宽度为300px、居中对齐、单元格间距和单元格边距均为0。（6）两个子表宽度为80%、居中对齐、边距为1px。（1）页面标题为“表格嵌套实例”；
用表格布局制作计算器背景
m0_63911789的博客
04-21 613
如果直接在TableLayout中添加控件，那么控件将和父容器等宽 如果想让控件出现在同一行，那么这些控件的外层一定要加一对<TableRow> 在<TableRow>的控件中，宽度默认为wrap-content stretchColumns : 可伸展的列 shrinkColumns : 可收缩的列 collapseColumns : 可隐藏的列 三个属性均是通过索引控制 <?xml version="1.0" encoding="utf-8"?&gt...
表格布局—计算器
EasonVincent的博客
05-09 3100
android :id= "@+id/root"   android :layout_width= "match_parent"   android :layout_height= "match_parent"   android :columnCount= "4"   android :rowCount= "6">         android :layout_width
HTML编写计算器样式
蘇同学的安全屋的博客
01-18 1114
HTML编写计算器样式
用html div来制作制作一个计算器表,CSS3制作漂亮的计算器
weixin_42469315的博客
06-08 685
插件描述：原生js CSS3制作漂亮的计算器_加减乘除计算器代码实现代码html>JS+CSS3实现计算器特效C789+456-123÷0.=xjsvarkeys=document.querySelectorAll('#calculatorspan');varoperators=['+','-','x','÷'];vardecimalAdded=false;for(...
TEST语言词法分析：LEX实现与最长匹配原则
"根据DFA构造词法分析程序-LEX简介及TEST语言词法分析程序的LEX实现" 在编译原理中，词法分析是编译器的第一步，它负责识别输入源代码中的基本组成单元——单词（Token）。本文主要探讨了如何根据确定有限自动机...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值