Javascript 实现简单计算器实例代码

　　　　　　　　　　　　　这篇文章主要介绍了Javascript 实现简单计算器实例代码的相关资料,需要的朋友可以参考下

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>js简单计算器</title>

<style type="text/css">

*{

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;

}

</style>

<script>

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);

}

</script>

</head>

<body onload="onLoad()">

<input id="input" type="text">

<div id="container">

<div>

<button onclick="inputEvent(this)">1</button>

<button onclick="inputEvent(this)">2</button>

<button onclick="inputEvent(this)">3</button>

<button onclick="inputEvent(this)">+</button>

</div>

<div>

<button onclick="inputEvent(this)">4</button>

<button onclick="inputEvent(this)">5</button>

<button onclick="inputEvent(this)">6</button>

<button onclick="inputEvent(this)">-</button>

</div>

<div>

<button onclick="inputEvent(this)">7</button>

<button onclick="inputEvent(this)">8</button>

<button onclick="inputEvent(this)">9</button>

<button onclick="inputEvent(this)">*</button>

</div>

<div>

<button onclick="inputEvent(this)">0</button>

<button onclick="inputEvent(this)">.</button>

<button onclick="inputOper(this)">=</button>

<button onclick="inputEvent(this)">/</button>

</div>

<button onclick="clearNum()">清零</button>

<button onclick="backNum()">退格</button>

</body>

</html>

(转载) http://www.jb51.net/article/95464.htm

时间： 2025-01-31 07:42:18

Javascript 实现简单计算器实例代码的相关文章

vue实现网页简单计算器实例代码

效果: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id=&q

javascript删除所有cookie实例代码:一般情况下都是删除指定的cookie,当然也可以一次性删除所有的cookie,下面就是一段能够实现此功能的代码.代码如下: function clearCookie(){ var keys=document.cookie.match(/[^ =;]+(?=\=)/g); if(keys){ for(var i=keys.length;i--;){ document.cookie=keys[i]+'=0;expires='+new Date(0).

javascript的for in实例代码

javascript的for in实例代码:for in语句一般用来穷举也就是遍历对象的属性,代码实例如下: var obj={ webName:"蚂蚁部落", address:"青岛市南区", age:2 } for(var attr in obj){ console.log(attr); } 以上代码可以遍历对象的每一个属性.更多for in相关内容可以参阅javascript的for in循环语句详细介绍一章节. 原文地址是:http://www.softwh

JAVASCRIPT实现简单计算器

最终效果如下图-2,有bug:就是整数后点击%号结果正确,如果小数后面点击%的话结果就错误!其他都正常,求指点:input的value是string类型的,在JS中改如何正确处理下图-1中的if部分?? 图-1 图-2 HTML代码如下 <body> <div id="calculator"> <div class="LOGO"> <span class="name">简单的计算器</span

javascript 仿面向对象编程实例代码(私有，公共变量。。。)

1 //定义一个javascript类 2 function JsClass(privateParam,publicParam){//构造函数 3 var priMember = privateParam; //私有变量 4 this.pubMember = publicParam; //公共变量 5 //定义私有方法 6 function priMethod(){ 7 return "priMethod()"; 8 } 9 //定义特权方法,特权方法可以访问所有成员 10 this.

简单计算器设计代码

#import "AppDelegate.h" #define kScreenWidth CGRectGetWidth([[UIScreen mainScreen] bounds]) #define kScreenHeight CGRectGetHeight([[UIScreen mainScreen] bounds]) #define kButtonWidth ((kScreenWidth - 5) / 4) #define kButtonHeight kButtonWidth #d

javascript简单计算器代码分析

javascript简单计算器代码分析:也许网页中需要一个简单的计算器功能,这个时候就要掌握如何编写,起码应该会修改,下面就通过一个简单的实例介绍一下如何实现简单的计算器效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&

原生ajax调用数据简单实例代码

原生ajax调用数据简单实例代码:由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的ajax有所了解的好,下面就是一段ajax数据调用的实例代码,非常的简单,初学者可以参考一下.代码如下:一.兼容浏览器部分: function xmlHttpR() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=ne

可以固定的顶部的导航菜单简单实例代码

可以固定的顶部的导航菜单简单实例代码:固定于网页顶部的导航栏效果在当下网站比较流行,所谓的固定于网页的顶部一般来说并不是一直固定于顶部,而是在开始是位于某一个位置,当下拉滚动条使其到达顶部的时候才会固定在顶部,下面通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" con