简单的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实现BMI计算器
前言 BMI指数(英文为Body Mass Index),是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准,当我们需要比较及分析一个人的体重对于不同高度的人所带来的健康影响时,BMI值是一个中立而可靠的指标.本文将介绍如何用JavaScript实现这个计算器,下面一起看看. 话不多说,直接上代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"
-
简单实现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
-
Javascript 实现计算器时间功能详解及实例(二)
Javascript 计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) Javascript计算器 -> 添加时间在屏显区左上角添加时间显示 效果图如下: 代码 初始化 // 计算器初始化 Calculator.prototype.init = function () { this.addTdClick(); // 时间显示 this.showDate(); }; 时间显示 // 在屏显区左上角显示时间日期 Calculator
-
JS实现简单的二元方程计算器功能示例
本文实例讲述了JS实现简单的二元方程计算器功能.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>二元方程</TITLE> <META NAME="Author" CONTENT=""> <META NAME="
-
JS 实现计算器详解及实例代码(一)
Javascript 实现计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) 小型JavaScript计算器 自己寻思出的解决方案,比较笨拙的方法,虽然完成了但是还有不少bug,用的方法也不是最有效的,基本功能算是完成了,一些小的细节地方也考虑到了,但是还有其他的细节需要处理. 总体设计思路是,先画草图 -> 设计UI -> 编写UI代码 -> 编写CSS -> 编写JS逻辑代码: 面板(main-board) 面板
-
基于AngularJS实现iOS8自带的计算器
前言 首先创建angularjs的基本项目就不说了,最好是利用yeoman这个脚手架工具直接生成,如果没有该环境的,当然也可以通过自行下载angularjs的文件引入项目. 实例详解 main.js是项目的主要js文件,所有的js都写在这个文件中,初始化之后,该文件的js代码如下 angular .module('calculatorApp', [ 'ngAnimate', 'ngCookies', 'ngResource', 'ngRoute', 'ngSanitize', 'ngTouch'
-
Javascript 实现简单计算器实例代码
效果图: 刚开始做时没考虑到清零和退格两个功能,嘻嘻,后来加的整体与传统计算器比有点小瑕疵. 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js简单计算器</title> <style type="text/css"> *{ margin:0px; padding:0px; } input{ margi
-
简易的JS计算器实现代码
看看手机中的计算器,分为普通计算器和科学计算器 自认脑袋不够大,就实现一个普通版本的吧(支持正负数加减乘除等基本连续的运算,未提供括号功能) 看看图示效果: 一.知识准备 1+1 = ? 正常来说,我们看到这个表达式都知道怎么运算,知道运算结果 但计算机不一样,计算机无法识别出这串表达式,它只能识别特定的规则:前缀表达式+ 1 1 或后缀表达式1 1 + 举个栗子 (3 + 4) × 5 - 6 就是中缀表达式 - × + 3 4 5 6 前缀表达式 3 4 + 5 × 6 - 后缀表达式 所以
-
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键盘版计算器的制作方法
本文实例为大家分享了js制作计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #show { width: 232px; height: 80px; color: white; border-radius:
-
原生JavaScript制作计算器
原生JavaScript制作计算器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--第一个数X--> X:<input type="text" id="inp1" value="" /&g
-
javascript实现简单的可随机变色网页计算器示例
本文实例讲述了javascript实现简单的可随机变色网页计算器.分享给大家供大家参考,具体如下: 该程序能实现简单的加.减.乘.除.求余,页面还添加了随机变换颜色的功能. 运行效果图如下: 完整实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Day 2 </TITLE> <META
随机推荐
- windows下部署免费ssl证书(letsencrypt)的方法
- asp之GetArray提取链接地址,以$Array$分隔的代码
- mysql登录遇到ERROR 1045问题解决方法
- CMD和vbs修改 IP地址及DNS的实现代码
- 详解SpringBoot 使用Spring Initializr 快速构建工程(官方推荐)
- A09_Spinner(下拉列表)自定义设置
- javascript bom是什么及bom和dom的区别
- javascript div 弹出可拖动窗口
- Kindeditor单独调用多图上传实例
- mysql中优化和修复数据库工具mysqlcheck详细介绍
- 结构/表现/行为完全分离的选项卡(jquery版和原生JS版)
- document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById
- jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
- JavaScript获取短信验证码(周期性)
- JavaScript插入动态样式实现代码
- C语言 以数据块的形式读写文件详解及实现代码
- win2003 防止网卡本地连接被禁用的设置方法
- 金山反病毒20050109_日报
- Win2003的服务器修改默认上传200k和下载4M的限制
- C#生成随机验证码代码分享