HTML+CSS+JS 简单的计算器
2017-09-26 14:46
543 查看
今天我们试着亲手制作网络计算器吧!!
效果图如下:
很明显这个计算机有些按钮并没有添加进去,甚至是没有0这个数字的(排版的时候漏了之后就不想再排了,虽然我不是处女座~),不过知识点是一样的,下面讲解代码思路。
HTML<body>代码
<div id="calcFrame">
<div id="FirstLine">
<input id="result" type="text" value="0" />
<button id="clear" onclick="clearme()">clear</button>
</div>
<div id="SecondLine">
<button id="num1" onclick="clickme(1)">1</button>
<button id="num2" onclick="clickme(2)">2</button>
<button id="num3" onclick="clickme(3)">3</button>
<button id="delete" onclick="delect()">delete</button>
<button id="=" onclick="dengyu()" >=</button>
<button id="num4" onclick="clickme(4)">4</button>
<button id="num5" onclick="clickme(5)">5</button>
<button id="num6" onclick="clickme(6)">6</button>
<button id="*" onclick="cheng()">*</button>
<button id="/" onclick="chu()">/</button>
<button id="num7" onclick="clickme(7)">7</button>
<button id="num8" onclick="clickme(8)">8</button>
<button id="num9" onclick="clickme(9)">9</button>
<button id="+" onclick="jia()">+</button>
<button id="-" onclick="jian()">-</button>
</div>
</div>
大致将计算器划分为上半部分显示屏和下半部分键盘两个区域,这样做主要是好做css渲染
CSS<style>代码
<style>
body{
text-align: center;
}
div#calcFrame{
width: 300px;
height: 296px;
border:1px solid black;
margin: auto;
}
#calcFrame>#FirstLine{
height: 50px;
border: solid black;
border-width:0px 0px 1px 0px ;
}
#calcFrame>#FirstLine>#result{
font-size: 30px;
border:none;
text-align:right;
color:#9e9e9e;
}
#calcFrame>#SecondLine{
height: 250px;
border:solid black;
border-width:0px 0px 0px 0px ;
}
input#result{
height: 45px;
width: 236px;
float: left;
}
button#clear{
height: 50px;
width: 60px;
float: right;
}
#SecondLine>button{
color: salmon;
height: 82px;
width: 60px;
float: left;
}
</style>
渲染过程不必多说,我也没有用到特别的框架,一些基本语法而已,大家可以投其所好。
js<script>代码
<script>
var resultDom = document.getElementById("result");
var arithmetic = new Array(3);
arithmetic[0] = 0;
arithmetic[1] = "0";
arithmetic[2] = 0;
/*
* clear方法无法显示(改名改到关键词了...),清空显示区
*/
function clearme(){
resultDom.value = 0;
}
/*
* js写在body后面,写前面body数据还没加载好容易出bug,数字区域的方法,resultDom.value是显示区显示的值,每敲一个数字拼接在前一个数字的后面
*/
function clickme(num){
var str=resultDom.value;
str = (str == "0" ? "":str);
str += num;
resultDom.value = str;
}
/*
*删除末尾数字
*/
function delect(){
var str=resultDom.value;
str = (str == "0" ? "":str);
str = str.substring(0,str.length-1);
resultDom.value = str;
}
/*
*求值,arithmetic[0]和arithmetic[2]分别存第一个数和第二个数,arithmetic[1]存放运算符,先判断1的符号,再进行运算
*/
function dengyu(){
var str=resultDom.value;
arithmetic[2] =str;
var a = arithmetic[1];
switch (a){
case "0":
break;
case "*":
resultDom.value = Number(arithmetic[0]) * Number(arithmetic[2]);
break;
case "/":
resultDom.value = Number(arithmetic[0]) / Number(arithmetic[2]);
break;
case "+":
resultDom.value = Number(arithmetic[0]) + Number(arithmetic[2]);
break;
case "-":
resultDom.value = Number(arithmetic[0]) - Number(arithmetic[2]);
break;
}
arithmetic[0] = resultDom.value;
arithmetic[1] = "0";
arithmetic[2] = 0;
}
// function dian(){
// var str=resultDom.value;
// var int = str.indexOf(".");
// if(int == -1){
// str = str+".";
// }
// resultDom.value = str;
// }
function cheng(){
var str=resultDom.value;
arithmetic[0] =str;
arithmetic[1] ="*";
result.value = 0;
}
function chu(){
var str=resultDom.value;
arithmetic[0] =str;
arithmetic[1] ="/";
result.value = 0;
}
function jia(){
var str=resultDom.value;
arithmetic[0] =str;
arithmetic[1] ="+";
result.value = 0;
}
function jian(){
var str=resultDom.value;
arithmetic[0] =str;
arithmetic[1] ="-";
result.value = 0;
}
</script>
完~~~下一次应该会写servlet和jsp的内容
效果图如下:
很明显这个计算机有些按钮并没有添加进去,甚至是没有0这个数字的(排版的时候漏了之后就不想再排了,虽然我不是处女座~),不过知识点是一样的,下面讲解代码思路。
HTML<body>代码
<div id="calcFrame">
<div id="FirstLine">
<input id="result" type="text" value="0" />
<button id="clear" onclick="clearme()">clear</button>
</div>
<div id="SecondLine">
<button id="num1" onclick="clickme(1)">1</button>
<button id="num2" onclick="clickme(2)">2</button>
<button id="num3" onclick="clickme(3)">3</button>
<button id="delete" onclick="delect()">delete</button>
<button id="=" onclick="dengyu()" >=</button>
<button id="num4" onclick="clickme(4)">4</button>
<button id="num5" onclick="clickme(5)">5</button>
<button id="num6" onclick="clickme(6)">6</button>
<button id="*" onclick="cheng()">*</button>
<button id="/" onclick="chu()">/</button>
<button id="num7" onclick="clickme(7)">7</button>
<button id="num8" onclick="clickme(8)">8</button>
<button id="num9" onclick="clickme(9)">9</button>
<button id="+" onclick="jia()">+</button>
<button id="-" onclick="jian()">-</button>
</div>
</div>
大致将计算器划分为上半部分显示屏和下半部分键盘两个区域,这样做主要是好做css渲染
CSS<style>代码
<style>
body{
text-align: center;
}
div#calcFrame{
width: 300px;
height: 296px;
border:1px solid black;
margin: auto;
}
#calcFrame>#FirstLine{
height: 50px;
border: solid black;
border-width:0px 0px 1px 0px ;
}
#calcFrame>#FirstLine>#result{
font-size: 30px;
border:none;
text-align:right;
color:#9e9e9e;
}
#calcFrame>#SecondLine{
height: 250px;
border:solid black;
border-width:0px 0px 0px 0px ;
}
input#result{
height: 45px;
width: 236px;
float: left;
}
button#clear{
height: 50px;
width: 60px;
float: right;
}
#SecondLine>button{
color: salmon;
height: 82px;
width: 60px;
float: left;
}
</style>
渲染过程不必多说,我也没有用到特别的框架,一些基本语法而已,大家可以投其所好。
js<script>代码
<script>
var resultDom = document.getElementById("result");
var arithmetic = new Array(3);
arithmetic[0] = 0;
arithmetic[1] = "0";
arithmetic[2] = 0;
/*
* clear方法无法显示(改名改到关键词了...),清空显示区
*/
function clearme(){
resultDom.value = 0;
}
/*
* js写在body后面,写前面body数据还没加载好容易出bug,数字区域的方法,resultDom.value是显示区显示的值,每敲一个数字拼接在前一个数字的后面
*/
function clickme(num){
var str=resultDom.value;
str = (str == "0" ? "":str);
str += num;
resultDom.value = str;
}
/*
*删除末尾数字
*/
function delect(){
var str=resultDom.value;
str = (str == "0" ? "":str);
str = str.substring(0,str.length-1);
resultDom.value = str;
}
/*
*求值,arithmetic[0]和arithmetic[2]分别存第一个数和第二个数,arithmetic[1]存放运算符,先判断1的符号,再进行运算
*/
function dengyu(){
var str=resultDom.value;
arithmetic[2] =str;
var a = arithmetic[1];
switch (a){
case "0":
break;
case "*":
resultDom.value = Number(arithmetic[0]) * Number(arithmetic[2]);
break;
case "/":
resultDom.value = Number(arithmetic[0]) / Number(arithmetic[2]);
break;
case "+":
resultDom.value = Number(arithmetic[0]) + Number(arithmetic[2]);
break;
case "-":
resultDom.value = Number(arithmetic[0]) - Number(arithmetic[2]);
break;
}
arithmetic[0] = resultDom.value;
arithmetic[1] = "0";
arithmetic[2] = 0;
}
// function dian(){
// var str=resultDom.value;
// var int = str.indexOf(".");
// if(int == -1){
// str = str+".";
// }
// resultDom.value = str;
// }
function cheng(){
var str=resultDom.value;
arithmetic[0] =str;
arithmetic[1] ="*";
result.value = 0;
}
function chu(){
var str=resultDom.value;
arithmetic[0] =str;
arithmetic[1] ="/";
result.value = 0;
}
function jia(){
var str=resultDom.value;
arithmetic[0] =str;
arithmetic[1] ="+";
result.value = 0;
}
function jian(){
var str=resultDom.value;
arithmetic[0] =str;
arithmetic[1] ="-";
result.value = 0;
}
</script>
完~~~下一次应该会写servlet和jsp的内容
相关文章推荐
- js+html+css简单的互动功能页面(2015知道几乎尖笔试题)http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2
- html+css+js 简单日历
- html、js写了一个简单的计算器
- 让网页装进Android手机(将html+css+js打包成Android应用)(简单的)
- js css+html实现简单的日历
- 初识网站前端--用简单的HTML+CSS+js实现的选项卡切换效果
- html-css-js基本理解和简单总结
- html+js+css实现计算器功能
- 使用HTML+CSS+JS制作简单的网页菜单界面
- 用HTML、CSS、JavaScript 实现一个简单的计算器
- 用html+css+js实现的一个简单的图片切换特效
- SKPlayer -- 一个超级简单好用的音乐插件+CSS+HTML+JS
- 简单的html兼容(参考js和css的常规写法)
- 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析
- html+js实现简单的计算器代码(加减乘除)
- js+html+css实现简单页面交互功能(2015知乎前端笔试题)http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2
- 计算器完整版html+css+js
- html+css+js 实现计算器
- 黑马程序员-HTML和CSS结合做的一个计算器的简单页面
- 这是一个简单的图片时间器;使用html+css+js,合适新手练习