简单的js计算器实现
本文实例为大家分享了js计算器实现代码,供大家参考,具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body >
<input type='text' id='txt1' />
<select id='select'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type='text' id='txt2' />
<input type='button' value=' = ' onclick="count()"/>
<!--通过 = 按钮来调用创建的函数,得到结果-->
<input type='text' id='fruit' />
</body>
<script type="text/javascript">
//制做简单计算器
function count() {
var txt1 = document.all.txt1.value;
var txt2 = document.all.txt2.value;
var s=document.all.select.value;
var z;
switch(s){
case "+": z=parseFloat(txt1)+parseFloat(txt2);break;
case "-": z=parseFloat(txt1)-parseFloat(txt2);break;
case "*":z=parseFloat(txt1)*parseFloat(txt2);break;
case "/":z=parseFloat(txt1)/parseFloat(txt2);break;
}
document.getElementById("fruit").value=z;
}
</script>
</html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
JavaScript计算器网页版实现代码分享
JavaScript网页计算器代码,该计算器是用DW写的! HTML篇 <html <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>计算器</title> <link href="style/calculator.css" rel="stylesheet&qu
-
简单实现JS计算器功能
该计算器功能: 1.校验:小数点,重复计算,以及大量更符合用户体验的操作. 2.能够从键盘输入. 效果图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type
-
JS键盘版计算器的制作方法
本文实例为大家分享了js制作计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #show { width: 232px; height: 80px; color: white; border-radius:
-
简易的JS计算器实现代码
看看手机中的计算器,分为普通计算器和科学计算器 自认脑袋不够大,就实现一个普通版本的吧(支持正负数加减乘除等基本连续的运算,未提供括号功能) 看看图示效果: 一.知识准备 1+1 = ? 正常来说,我们看到这个表达式都知道怎么运算,知道运算结果 但计算机不一样,计算机无法识别出这串表达式,它只能识别特定的规则:前缀表达式+ 1 1 或后缀表达式1 1 + 举个栗子 (3 + 4) × 5 - 6 就是中缀表达式 - × + 3 4 5 6 前缀表达式 3 4 + 5 × 6 - 后缀表达式 所以
-
Javascript 实现计算器时间功能详解及实例(二)
Javascript 计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) Javascript计算器 -> 添加时间在屏显区左上角添加时间显示 效果图如下: 代码 初始化 // 计算器初始化 Calculator.prototype.init = function () { this.addTdClick(); // 时间显示 this.showDate(); }; 时间显示 // 在屏显区左上角显示时间日期 Calculator
-
JS 实现计算器详解及实例代码(一)
Javascript 实现计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) 小型JavaScript计算器 自己寻思出的解决方案,比较笨拙的方法,虽然完成了但是还有不少bug,用的方法也不是最有效的,基本功能算是完成了,一些小的细节地方也考虑到了,但是还有其他的细节需要处理. 总体设计思路是,先画草图 -> 设计UI -> 编写UI代码 -> 编写CSS -> 编写JS逻辑代码: 面板(main-board) 面板
-
javascript实现简单的可随机变色网页计算器示例
本文实例讲述了javascript实现简单的可随机变色网页计算器.分享给大家供大家参考,具体如下: 该程序能实现简单的加.减.乘.除.求余,页面还添加了随机变换颜色的功能. 运行效果图如下: 完整实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Day 2 </TITLE> <META
-
原生JavaScript制作计算器
原生JavaScript制作计算器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--第一个数X--> X:<input type="text" id="inp1" value="" /&g
-
利用Javascript实现BMI计算器
前言 BMI指数(英文为Body Mass Index),是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准,当我们需要比较及分析一个人的体重对于不同高度的人所带来的健康影响时,BMI值是一个中立而可靠的指标.本文将介绍如何用JavaScript实现这个计算器,下面一起看看. 话不多说,直接上代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"
-
基于AngularJS实现iOS8自带的计算器
前言 首先创建angularjs的基本项目就不说了,最好是利用yeoman这个脚手架工具直接生成,如果没有该环境的,当然也可以通过自行下载angularjs的文件引入项目. 实例详解 main.js是项目的主要js文件,所有的js都写在这个文件中,初始化之后,该文件的js代码如下 angular .module('calculatorApp', [ 'ngAnimate', 'ngCookies', 'ngResource', 'ngRoute', 'ngSanitize', 'ngTouch'
-
JS实现简单的二元方程计算器功能示例
本文实例讲述了JS实现简单的二元方程计算器功能.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>二元方程</TITLE> <META NAME="Author" CONTENT=""> <META NAME="
-
Javascript 实现简单计算器实例代码
效果图: 刚开始做时没考虑到清零和退格两个功能,嘻嘻,后来加的整体与传统计算器比有点小瑕疵. 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js简单计算器</title> <style type="text/css"> *{ margin:0px; padding:0px; } input{ margi
随机推荐
- Angularjs自定义指令Directive详解
- Go语言正则表达式用法实例小结【查找、匹配、替换等】
- python 读取excel文件生成sql文件实例详解
- ASP.NET上传图片并生成可带版权信息的缩略图
- OpenStack 组件的更新教程
- 一段非常简单的让图片自动切换js代码
- PHP获取客户端真实IP地址的5种情况分析和实现代码
- php数组函数序列之array_search()- 按元素值返回键名
- js实现自动图片轮播代码
- 分享一个asp.net pager分页控件
- javascript实现简单的页面右下角提示信息框
- CSS标签切换代码实例教程 比较漂亮
- 使用Google工具栏追踪 Blog 留言
- Android 中FloatingActionButton(悬浮按钮)实例详解
- Android实现webview实例代码
- Android开发笔记之:如何屏蔽Button setClickable与setEnabled
- php array_walk_recursive 使用自定的函数处理数组中的每一个元素
- MU私服新手架设教程0.99B
- java子类调用父类的方法中包含子类重写的实例方法
- iOS实现文件上传功能
