Web网页版简易计算器

说明：
1、这个计算器的功能比较简单，包括加减乘除，小数点，退格，清除以及等于。

2、首先写出html，即界面主要框架；再写出css，即属性，使框架看起来美观一些；最后就是javascript，就是功能的实现，主要有计算（调用js内置强大的eval() 函数）、退格、清除、等于四个功能。

3、html和css两部分不难，javascript会麻烦一点。

推荐一篇不错的博客：
js中的eval方法详解（一）–eval方法的初级应用

HTML代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>网页版计算器</title><link href="css/new_file.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/new_file.js"></script></head><body><div id="calculator"><div id="head"><h3>网页版简单计算器</h3></div><div id="show" align="center"><input type="text" id="text" ></div><div id="cuttom"><table align="center"><tr><td><input type="button" value="7" onclick="display(7)"></td><td><input type="button" value="8" onclick="display(8)"></td><td><input type="button" value="9" onclick="display(9)"></td><td><input type="button" value="+" onclick="display('+')"></td><td><input type="button" value="-" onclick="display('-')"></td></tr><tr><td><input type="button" value="4" onclick="display(4)"></td><td><input type="button" value="5" onclick="display(5)"></td><td><input type="button" value="6" onclick="display(6)"></td><td><input type="button" value="*" onclick="display('*')"></td><td><input type="button" value="/" onclick="display('/')"></td></tr><tr><td><input type="button" value="1" onclick="display(1)"></td><td><input type="button" value="2" onclick="display(2)"></td><td><input type="button" value="3" onclick="display(3)"></td><td><input type="button" value="(" onclick="display('(')"></td><td><input type="button" value=")" onclick="display(')')"></td></tr><tr><td><input type="button" value="." onclick="display('.')"></td><td><input type="button" value="0" onclick="display(0)"></td><td><input type="button" value="←" onclick="back()"></td><td><input type="button" value="c" onclick="reset()"></td><td><input type="button" value="=" onclick="equals()"></td></tr></table></div></div></body>
</html>

CSS代码如下：

body{background:#CDC673;}
h3{font-family:微软雅黑;font-size: 35px;text-align: center;}
#show input{width:511px;height:60px;font-size:30px;}
#cuttom input{width: 100px;height: 70px;font-size: 28px;}
#cuttom input:hover{background: lightgray;}

JS代码如下：

function $(id){return document.getElementById(id);}
var str;
var result;
function display(str0)  //显示到文本框
{str = document.getElementById("text");str.value = str.value + str0;
}
function equals()   //等于
{str = document.getElementById("text");result = eval(str.value);str.value = result;
}
function back()     //退格
{str = document.getElementById("text");str.value = str.value.substring(0,str.value.length-1);
}
function reset()    //清除
{str = document.getElementById("text");str.value = "";
}

运行界面如下：

Web网页版简易计算器相关推荐

网页版简易计算器（仅加减乘除）
网页版简易计算器(仅加减乘除) ------------------------------------- 开发工具与关键技术:Visual Studio 2015 C# 作者:林敏静撰写时间:20 ...
制作网页版简易计算器（Calculator）
网页版计算器的制作比想象中要来的容易,界面上只需固定计算器面板的宽高和按钮的宽高即可. 先放张图: 代码下载与演示:https://codepen.io/yinyoupoet/pen/oeewWw 讲 ...
web网页版苹果计算器（HTML、CSS、JavaScript实现）
目录一.效果截图二.注意事项三.源码实现 1.html 2.css 3.js 一.效果截图二.注意事项 1.html结构上,分为三个部分:显示区.按钮区.底部白条 2.css样式上需要解决外 ...
web网页版流程图插件-myflow.js-案例demo下载
网页版流程图插件-myflow.js myflow-min下载地址 web流程图插件-myflow.js-demo下载 ×××地址-demo: http://www.qi788.com/downloa ...
ensp模拟器使用USG6000V防火墙模拟搭建点到点的IPSec 隧道（web网页版）
ensp模拟器使用USG6000V防火墙模拟搭建点到点的IPSec 隧道(web网页版) 关于IPSec技术的基本原理及使用场景请参考: IPSec技术的基本原理详解及应用场景本文主要是使用ensp ...
韩国 naver web网页版第三方登录 naver网页登录
韩国 naver web网页版第三方登录 <!DOCTYPE html> <html lang="en"><head><meta char ...
韩国 kakaotalk web网页版第三方登录示例 kakaotalk网页版
韩国 kakaotalk web网页版第三方登录示例先跳转授权 https://kauth.kakao.com/oauth/authorize?client_id="+restApi+& ...
Java程序设计图形用户界面小巫版简易计算器
/** 作者:wwj 时间:2012/4/13 功能:实现一个计算器应用程序实验要求:编写一个模拟计算器的应用程序,使用面板和网格布局, 添加一个文本框,10个数字按钮(0~9),4个加减乘除按钮, ...
云便签Mac和Web网页版怎么对便签内容排序？
一.打开便签并登录账号,默认进入个人便签内容列表,在界面左侧可点击便签的分类名称,进入要排序的便签分类内容列表: 二.在内容列表点击右上角的"全部内容",打开排序功能设置框: 三. ...

Web网页版简易计算器

Web网页版简易计算器相关推荐

最新文章

热门文章