JS 在 HTML 中做加减乘除
<script type="text/javascript">
function fun(t){
var fa = parseInt(document.getElementById('fa').value);
var fb = parseInt(document.getElementById('fb').value);
var fc = document.getElementById('fc');
if(isNaN(fa) || isNaN(fb)){
alert("输入错误,请重新输入");
return;
}
switch(t){
case 1:
fc.value = fa + fb;
break;
case 2:
fc.value = fa - fb;
break;
case 3:
fc.value = fa * fb;
break;
case 4:
fc.value = fa / fb;
break;
}
}
</script>
</head>
<body>
<input type="text" id="fa" value=""/>
<input type="text" id="fb" value=""/>
<input type="text" id="fc" value=""/>
<input type="button" value="+" onclick="fun(1);" />
<input type="button" value="-" onclick="fun(2);" />
<input type="button" value="x" onclick="fun(3);" />
<input type="button" value="/" onclick="fun(4);" />
HTML 计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>计算器</title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
var first = parseInt($("#first").val());//获取第一个数的值并转化为数字
var second = parseInt($("#second").val());//获取第二个数的值并转化为数字
var sum = 0;//定义结果值
var symbol = parseInt($("[type=radio]:checked").val());//获取符号的值
//通过对符号的判断计算结果
switch(symbol){
case 0:
sum = first + second;
break;
case 1:
sum = first - second;
break;
case 2:
sum = first * second;
break;
case 3:
sum = first / second;
break;
}
var arr = ['+','-','*','/'];//输出的符号
$("h2 span").text(first + arr[symbol] + second +" = " +sum);//把结果输出到结果栏中
})
})
</script>
<body>
<h1>计算器</h1>
<p>数字一:<input type="text" id="first" style="width: 40px;" /></p>
<p>
<label><input type="radio" name="symbol" value="0" checked="checked"/>+</label>
<label><input type="radio" name="symbol" value="1" />-</label>
<label><input type="radio" name="symbol" value="2" />*</label>
<label><input type="radio" name="symbol" value="3" />/</label>
</p>
<p>数字二:<input type="text" id="second" style="width: 40px;" /></p>
<p><button>计算</button></p>
<h2>结果:<span></span></h2>
</body>
</html>
JS 在 HTML 中做加减乘除的更多相关文章
- js的url中传递中文参数乱码,如何获取url中参数问题
一:Js的Url中传递中文参数乱码问题,重点:encodeURI编码,decodeURI解码: 1.传参页面Javascript代码: <script type=”text/javascript ...
- 在js传递参数中含加号(+)的处理方式
一般情况下,URL 中的参数应使用 url 编码规则,即把参数字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号(%)后跟两位十六进制数,空格则编码为加号(+).但是对于带有中文的参数来 ...
- Js的Url中传递中文参数乱码的解决
一:Js的Url中传递中文参数乱码问题,重点:encodeURI编码,decodeURI解码: 1.传参页面Javascript代码: 2. 接收参数页面:test02.html 二:如何获取Url& ...
- js、html中的单引号、双引号及其转义使用
js.html中的单引号.双引号及其转义使用在js中对相关字符做判断或取值的时候很多情况下都会用到这些. ------ 在一个网页中的按钮,写onclick事件的处理代码,不小心写成如下:<in ...
- 关于js向jsp中传输中文乱码问题
最近做项目遇到的js向jsp中传中文结果是乱码,不知道是否是我换了用eclipse的原因还是什么,以前用的MyEclipse反正最后解决办法如下: 1.把js文件复制到桌面: 2.打开文件并用另存为u ...
- jsp的C标签一般使用方法以及js接收servlet中的对象及对象数字
jsp的C标签一般使用方法以及js接收servlet中的对象及对象数组 由于现流行的javaWeb框架提倡前后端分离,比如在SpringMvc中已经很少写servlet的一些东西:目前 前端jsp中大 ...
- 如何在js或者jquery中操作EL表达式的一个List集合
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 先说明此篇博客看明白了可以干嘛: 就是在js或者jquery中操作一个EL表达式的一个list集合或者复杂类型 ...
- JS 解决 IOS 中拍照图片预览旋转 90度 BUG
上篇博文[ Js利用Canvas实现图片压缩 ]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编 ...
- 探讨 JS 的面向对象中继承的那些事
最近学了 JS 的面向对象,这篇文章主要是探讨 JS 的面向对象中继承的那些事. JS中继承的特点: 1.子类继承父类: 2.子类可以用父类的方法和属性 3.子类的改变可以不影响父类 下面用一个例子来 ...
随机推荐
- Irvine的专业汇编网站
http://asmirvine.com/ http://download.csdn.net/download/stupid_boy2007/3890853 http://download.csdn. ...
- Delphi XE2 升级项目编译ralease版本,无法添加UAC解决方法
我今天把一个原来是Delphi2007的工程升级到了Delphi XE2,在编译ralease版本时候,发现无法添加UAC,我觉得可能是升级的原因,随后我用XE2新建了一个工程,但是在编译raleas ...
- spring mvc ModelAndView向前台传值
今天在做项目的时候遇到一个问题,把第一个页面保存的id传到第三个页面中去用,原来是在controller层加了一个全局变量控制的,但是后来发现这个变量实现不了我要的功能,于是查了一下,原来ModelA ...
- Aerospike | Aerospike Chinese
Aerospike | Aerospike Chinese 如果您的企业依赖于: 庞大的数据量(超过任何结构化数据库所能处理的数据量) 可预见(且快速)的性能 透明的扩展 始终正常运行 那么您只有一个 ...
- 利用PHP SOAP扩展实现简单Web Services
原文:利用PHP SOAP扩展实现简单Web Services WebServices能干什么? WebServices 可以将应用程序转换为网络应用程序. 通过使用 WebServices,您的应用 ...
- Apache commons-net用法的一个示例
jar: commons-io-2.4.jarcommons-net-3.3.jar Code: import java.io.File; import java.io.FileInputStream ...
- Mybatis+Struts2的结合:实现用户插入和查找
总结一下今天一个成功的小实验:Mybatis+Struts2的结合:实现用户插入和查找.删除和修改如果以后写了,会继续更新. 一 准备工作. 1.新建一个java web项目. 2.在webConte ...
- 《转载》值得学习!Google的编程样式指南
原网址:http://www.csdn.net/article/2012-10-12/2810689-Google-styleguide 本文分享了Google众多编程语言的样式指南,其中包括C语言. ...
- Android架构设计和软硬整合完整训练
Android架构设计和软硬整合完整训练 Android架构设计和软硬整合完整训练:HAL&Framework&Native Service&Android Service&a ...
- Python 实现的下载op海贼王网的图片(网络爬虫)
没得事就爬一下我喜欢的海贼王上的图片 须要在d盘下建立一个imgcache目录 # -*- coding: utf-8 -*- import urllib import urllib2 import ...