计算器html js php代码,Javascript 实现简单计算器实例代码

效果图：

刚开始做时没考虑到清零和退格两个功能，嘻嘻，后来加的整体与传统计算器比有点小瑕疵。

代码：

js简单计算器

*{

margin:0px;

padding:0px;

}

input{

margin-top:2px;

margin-left:2px;

width:230px;

height:30px;

text-align:right;

}

button{

margin-top:2px;

margin-left:2px;

width:50px;

height:50px;

}

#container{

margin-left:1px;

border:1px solid #E4E4E4;

background:#BBBBBB;

width:235px;

height:215px;

}

function onLoad(){

//加载完毕后光标自动对应到输入框

document.getElementById("input").focus();

}

//读取按钮的值，传给输入框

function inputEvent(e){

//把val的值改为每个事件的innerHTML值

var val=e.innerHTML;

//获取input标签

var xsval=document.getElementById("input");

//标签里的value连接每个事件的innerHTML值

xsval.value+=val;

}

//计算出结果

function inputOper(){

var xsval=document.getElementById("input");

xsval.value=eval(document.getElementById("input").value);

}

//清零

function clearNum(){

var xsval=document.getElementById("input");

xsval.value="";

document.getElementById("input").focus();

}

//退格

function backNum(){

var arr=document.getElementById("input");

arr.value=arr.value.substring(0,arr.value.length-1);

}

1

2

3

+

4

5

6

-

7

8

9

*

0

.

=

/

清零

退格

本文原创发布php中文网，转载请注明出处，感谢您的尊重！