Javascript计算器(二)-简单的布局与美化
来源:互联网 发布:quickconnect 域名 编辑:程序博客网 时间:2024/04/28 19:15
上一次简单地做出了计算器基本功能的实现部分,接下来的任务首先就是布局与美化。
这是最终半成品的样子
布局时使用了DIV区域来布局
首先遇到的第一个问题就是,在一个大的div下附属div的换行问题,查阅了资料之后,发现用float属性是一种解决方法,并且可以通过限制div区域大小来实现自然地换行,于是正在斟酌了多个区域并行和一个区域让按钮自然换行两种方案之后,选择了自然换行的策略
而在按钮的样式方面,使用了现成已经有的,感觉还算美观
其他在布局方面,就是一些距离的调整了,这都是杂项
下面附上内联的样式表
<style> body{ background:#bbbbbb; } #main{ border: groove; border-color: black; position: absolute; top: 100px; left: 100px; width: 670px; height: 527px; } .input{ position: absolute;bottom: 80%; top: 0%; left: 0px; right: 0px; } #screen{ border: none; height: 100px; width: 650px; outline-style: none; background-color: #bbbbbb; text-align:right; color: white; font-family:Consolas; font-size: 90px; } .number{ position: relative; float: right; top: 30px; width: 590px; height: 500px; right: 100px; } .cal{ position: relative; float: right; top: 30px; width: 80px; left: 570px; } .sign{ position: relative; margin: 8px; top: 102px; float: right; } .shuzi{ position: relative; margin: 8px; top: 102px; float: right; } </style>
中间有一些类的名字会与之后的源码相对应
在功能的实现方面也是简单的堆砌,还没有真正去实现有难度的部分,这一次的改进主要是为了设计
最后附上body部分代码,实现功能的脚本就不贴出来了
<div id="main"><div class="input"><input type="text" id="screen" name="screen" value="0"></div><div class="number"> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="input(this.innerHTML);" >1</button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="input(this.innerHTML);" >2</button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="input(this.innerHTML);" >3</button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="exp(10);">10<sup>x</sup></button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="exp();">e<sup>x</sup></button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="input(this.innerHTML);">x<sup>y</sup></button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="input(this.innerHTML);">x<sup>3</sup></button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="input(this.innerHTML);" >4</button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="input(this.innerHTML);" >5</button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="input(this.innerHTML);" >6</button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="input(this.innerHTML);">x<sup>2</sup></button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="input(this.innerHTML);">shift</button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="inputfunc(this.innerHTML);">ln</button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="input(this.innerHTML);"></button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="input(this.innerHTML);" >7</button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="input(this.innerHTML);">8</button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="input(this.innerHTML);">9</button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="inputfunc(this.innerHTML);" >sin</button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="inputfunc(this.innerHTML);" >cos</button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="inputfunc(this.innerHTML);" >tan</button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="input(this.innerHTML);" >x!</button></div> <div class="shuzi"><button type="button" class="button button-3d button-box button-jumbo button-circle" onclick="input(this.innerHTML);">.</button></div> <div class="shuzi"><button type="button" class="button button-3d button-pill button-jumbo" onclick="input(this.innerHTML);" >0</button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="inputfunc('asin')" >sin<sup>-1</sup></button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="inputfunc('acos');" >cos<sup>-1</sup></button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="inputfunc('atan');" >tan<sup>-1</sup></button></div> <div class="shuzi"><button type="button" class="button button-3d button-jumbo button-circle" onclick="randomgen();" >Rand</button></div> <div class="shuzi"><button type="button" class="button button-3d button-royal button-jumbo" onclick="BackS();" >DEL</button></div> <div class="shuzi"><button type="button" class="button button-3d button-glow button-jumbo" onclick="clearS();" >AC</button></div></div><div class="cal"> <div class="sign" id="plus"><button type="button" class="buttonorange button-3dred button-box button-jumbo button-circle" onclick="calc(this.innerHTML);">+</button></div> <div class="sign" id="min"><button type="button" class="buttonorange button-3dred button-box button-jumbo button-circle" onclick="calc(this.innerHTML);">-</button></div> <div class="sign" id="and"><button type="button" class="buttonorange button-3dred button-box button-jumbo button-circle" onclick="calc(this.innerHTML);">×</button></div> <div class="sign" id="de"><button type="button" class="buttonorange button-3dred button-box button-jumbo button-circle" onclick="calc(this.innerHTML);">÷</button></div> <div class="sign" id="eq"><button type="button" class="buttonorange button-3dred button-box button-jumbo button-circle" onclick="equal();">=</button></div></div></div>
阅读全文
0 0
- Javascript计算器(二)-简单的布局与美化
- 简单的JavaScript计算器
- 简单的javascript计算器
- JavaScript 简单的计算器
- 简单的javascript计算器
- 简单的JavaScript计算器
- 线性布局--简单计算器的布局
- javascript实现的简单计算器
- javascript实现的简单计算器
- javascript简单的二元计算器
- javascript简单计算器的实现
- javascript实现简单的计算器
- javascript实现的简单计算器
- JavaScript简单的计算器源代码
- JavaScript实现简单的计算器
- Java实现一个简单的计算器(流式布局)
- 制作一个简单的计算器布局
- 线性布局小实现——计算器的简单布局
- 计算机网络第4章 网络层(上)
- 315前夕,打假小程序“12315”上线
- WebService之jax-ws入门
- 【linux 学习】linux上的PhotoShop-Gimp(linux mint)
- 5. 1 IO流(字符流(6个),字节流(4个),(缓冲区装饰类(装饰设计模式)),(转换流))
- Javascript计算器(二)-简单的布局与美化
- Mybatis源码研究之SqlSource
- LaTex: 数学公式
- C++ 拷贝构造函数
- Codeforces-Bertown Subway(思维)
- 启动新进程之复制进程映像——fork系统调用
- Java数组的创建与初始化
- 电脑上不了Github的完整解决方法(亲测)
- 渲染管线理解4