JavaScript页面的简单运算

最新推荐文章于 2021-05-24 12:28:22 发布
最新推荐文章于 2021-05-24 12:28:22 发布
阅读量874 收藏 2
点赞数
分类专栏： Java Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wojiaohuangyu/article/details/46973305
版权 
<!DOCTYPE html>
<html>
<head>
<title>购物简易计算器</title>
<style>
section{
      background-color:#C9E495;
	  width:260px;
	  height:320px;
	  text-align:center;
	  padding-top:1px;
	  margin-top:12px;
}
.textBaroder{
      border-width:1px;
	  border-style:solid;
}
</style>
<script>
 function compute(op){
     var num1,num2;
	 num1=parseFloat(document.myform.txtNum1.value);
	 num2=parseFloat(document.myform.txtNum2.value);
	 if(op=="+")
	     document.myform.txtResult.value=num1+num2;
	 if(op=="-")
	     document.myform.txtResult.value=num1-num2;
     if(op=="*")
	     document.myform.txtResult.value=num1*num2;
     if(op=="/")
	     document.myform.txtResult.value=num1/num2;
 }
</script>
</head>
<body>
<section>
<h1><img src="a.jpg" width="240" height="31">欢迎您来淘宝！</h1>
<form action="" method="post" name="myform" id="myform">
<h3><img src="b.jpg" width="54" height="54">购物简易计算器</h3>
<p>第一个数<input name="txtNum1" type="text" class="textBaroder" id="txtNum1" size="25"></p>
<p>第二个数<input name="txtNum2" type="text" class="textBaroder" id="txtNum2" size="25"></p>
<p><input name="addButton2" type="button" id="addButton2" value=" + "
       οnclick="compute('+')">
<input name="subButton2" type="button" id="subButton2" value=" - " οnclick="compute('-')">
<input name="mulButton2" type="button" id="mulButton2" value=" * " οnclick="compute('*')">
<input name="divButton2" type="button" id="divButton2" value=" / " οnclick="compute('/')">
<p>计算结果<input name="txtResult" type="text" class="textBaroder" id="txtResult"
       size="25"></p>
</form>
</section>
</body>
</html>

黄小鱼ZZZ
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现页面统计
Herbert的专栏
04-17 828
url填写你的服务端统计脚本地址 action指定你要统计什么动作，如点击、转发。 function statistics(action){ var url = 'http://www.demo.com/statistics.php?action='+action, script = document.createElement('script'); script.setAttribu
利用JS制作简便计算器
dingrou5102的博客
01-02 126
var d; var a=prompt("请输入数字"); a=parseInt(a); if(isNaN(a)){ alert("請輸入正確數字"); } else{ b=prompt("請輸入數字") b=parseInt(b); if...
js基础语法练习1 ---- js篇
RONG_YAO的博客
07-22 755
目录 一、平均成绩计算 二、圆的周长面积算 三、闰年计算 四、会话竞拍 五、弹出框 六、输出到页面 七、计算器 7.1、单个输入框的计算器 7.2、多个输入库框的计算器 7.3、税务计算 7.4、简易计算器 八、排列 九、颜色切换 十、图片切换 一、平均成绩计算 <HTML> <HEAD> <META http-equiv="Cont...
JavaScript 第一章 基本语法 4~7节
Java软件工程师之路
04-12 249
    JavaScript 第一章 基本语法1~3节 JavaScript 第二章 使用window对象 JavaScript 第一章 基本语法4~7节   4 、 JavaScript 的自定义函数       4.1 ）什么是 JavaScript 的函数？要回答这个问题先看一个示例：       有一个计算器表单，点击 + 、 - 、 * 、 / 四个按钮 可...
JavaScript实现简单的四则运算计算器完整实例
11-27
在JavaScript编程中，实现一个简单的四则运算计算器是学习基础操作和交互的一个经典练习。这个实例展示了一个完整的HTML页面，其中包含JavaScript代码用于处理用户的输入并执行计算。下面我们将详细探讨这个实例中的...
JavaScript基于DOM操作实现简单的数学运算功能示例
10-20
JavaScript基于DOM操作实现简单的数学运算功能，是一种常见的前端交互技术，它允许用户在网页上进行基本的算术计算。在本示例中，主要涉及了以下几个核心知识点： 1. **DOM（Document Object Model）操作**：DOM是...
JavaScript实现算术运算算子演示系统
06-02
这个示例中，当用户点击“加法”按钮，JavaScript会获取两个输入框的值，进行加法运算，并将结果显示在页面上。 总的来说，“JavaScript实现算术运算算子演示系统”是一个集成了JavaScript、HTML5和CSS3技术的项目...
Javascript 实现简单计算器实例代码
10-21
在本文中，我们将深入探讨如何使用JavaScript实现一个简单的计算器实例。这个计算器的代码涉及到HTML、CSS和JavaScript的交互，提供基本的数学运算功能，包括加、减、乘、除，并包含清零和退格功能。 首先，我们来...
JavaScript实现的简单烟花特效代码
10-23
主要介绍了JavaScript实现的简单烟花特效代码,涉及JavaScript数学运算及页面元素基于定时函数运动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js做简易计算器
从南到北
02-13 635
第一步准备需要用到的界面。（如下图） 代码就不写了，也很简单 第二步编写js代码。 function lucky(j) { var l=parseInt(document.myform.txtNum1.value) var y=parseInt(document.myform.txtNum2.value) if(j=="+") var ly=l+y if(j=="-") var ly=l...
教案：JavaScript第1章
默然说话
04-03 1944
声明：由于版权等方面的原因，本文特意隐去了部分内容，由此造成的不便请谅解。如果本文对你有所帮助，请跟贴以示支持，谢谢。授课教师：牟勇课时：100分钟 l  本章技能目标n 掌握脚本的基本结构n 会使用JavaScript语言的基本语法n 会使用高级语法－自定义函数functionl  本章重点nJavaScript的基本语法n自定义函数的使用l 
DW —— 简易计算器 （JavaScript）
weixin_52626164的博客
05-24 3212
一、做计算器内部的计算之前就要先把页面的布局设计好 二、每一个放入数据的地方就是一个文本框，那个加减乘除就是一个按钮 也就是body标签对中的代码设置。 <body> <form id="myform" name="myform" method="post"> <table width="271" border="1" cellpadding="1" cellspacing="0"> <tbody> <tr> <
购物车计算器（加，减，乘，除）简单函数封装
sally18的博客
11-22 1071
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;简易购物计算器&lt;/title&gt; &lt;style type="text/css"&gt; *{     margin:0px;     padding:0px; }
JavaScript-简易计算器
weixin_46217915的博客
01-22 531
目标：用H5+JS制作一个简易的计算器 效果： 我们所要达到的效果就是在第一个第二个文本框输入数字，按一个按钮在计算结果内输出结果 初学JS，其实我觉得JS和java差不多，写过java感觉还不是很难 代码奉上： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script type="
js获取文本框值
热门推荐
咫尺&天涯的专栏
09-16 2万+
js获取文本框值 1.通过getElementById() 方法获得，必须为文本框设定ID值，该方法获得的是一个对象的应用(返回值 为:Object)，要获得文本框的值需添加属性值--value,如: 获值代码：document.getElementById("port11").value; 另：要获得标签中间的值，方法如下： 12345 documen
表达式5
xiele8的专栏
03-16 524
计算器 /*细边框的文本输入框*/ .textBaroder {  border-width:1px;  border-style:solid }     function add()   {      var num1,num2,num8,A,B,C,D,E,z,i,j,DS,ZS,XS,HZ,HW,KD,X,F,G,H;      num1=String(
vue Uint8Array转字符串中文乱码
axe的专栏
09-01 7491
解决方法：使用fast-text-encoding组件 该组件包括两部分编码和解码 TextEncoder：负责将字符串转Uint8Array TextDecoder：负责将Uint8Array转字符串 使用方法 安装： npm i fast-text-encoding 依赖： import { TextEncoder, TextDecoder } from 'fast-text-encoding' 字符串转Uint8Array const encoder = new TextEncoder()
JavaScripts实例：简易计算器
talkping的专栏
03-03 889
--------------android培训、java培训、期待与您交流!-------------- JavaScript是基于对象和事件的脚本语言，主要应用在客户端。 特点： 1. 交互性（它可以做的就是信息的动态交互） 2. 安全性（不允许直接访问本地硬盘） 跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关） JavaScript与Java不同之处: 1
javascript四则运算器html
最新发布
10-09
你可以使用以下代码来实现一个简单的四则运算器的 HTML 页面： ```html <!DOCTYPE html> 四则运算器 function calculate() { var num1 = parseFloat(document.getElementById("num1").value); var num2 = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值