js实现网页的两个input标签内的数值加减(示例代码)

实例如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){

var oIput1=document.getElementById('put1');
var oIput2=document.getElementById('put2');
var nAdd=document.getElementById('add');
var nSub=document.getElementById('subtraction');

nAdd.onclick=function(){
var a=Number(oIput1.value);
var b=Number(oIput2.value);
c = a+b;
alert(c);
}
nSub.onclick=function(){
var a=Number(oIput1.value);
var b=Number(oIput2.value);
c = a-b;
alert(c);
}
}

</script>
</head>
<body>

数值1:<input id="put1" type="text" value=""/>
数值2:<input id="put2" type="text" value=""/>
<input type="button" id="add" value="求和" />
<input type="button" id="subtraction" value="相减" />

</body>
</html>

下面是效果图 ↓

以上这篇js实现网页的两个input标签内的数值加减(示例代码)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • js实现文本框支持加减运算的方法

    本文实例讲述了js实现文本框支持加减运算的方法.分享给大家供大家参考.具体如下: 这是一个网页表单效果,让表单内的文本框支持加减运算,不过你要按正确的运算式输入,要不然它没有那么智能哦,比如输入1+5,文本框旁边会显示计算结果,这要归功于JavaScript的功能. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-math-input-method-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

  • javascript实现一个数值加法函数

    废话不多说,直接奉上代码 JS <script type="text/javascript"> function Sum(arg1,arg2){ //数值加法函数 var sarg1 = new String(arg1); //将传入的参数转为字符串以便进行参数检查 var sarg2 = new String(arg2); //将参数2转为字符类型 if( (sarg1=="")||(sarg2=="") ) //确保参数不为空 {

  • js实现网页的两个input标签内的数值加减(示例代码)

    实例如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var oIput1=document.getElementById('put1'); var oIput2=document.getElementById('put2'); var

  • JS操作input标签属性checkbox全选的实现代码

    废话不多说了,具体代码如下所示: <html> <head> < > function selectAll(){ var checklist = document.getElementsByName ("selected");//获取所有name值为selected的标签 if(document.getElementById("controlAll").checked){//判断当id为controlAll的标签是否被选中 for

  • JS控件ASP.NET的treeview控件全选或者取消(示例代码)

    复制代码 代码如下: <script language="javascript">   /*   函数名称:CheckNode(currentNode).ParentNode(currentNode).ChildNode(currentNode) 函数功能:实现带checkbox的treeview中   1.选中父结点其子结点也全部选中   2.取消全部子结点的选择后,父结点的选择也随之取消 使用方法:1.在<head></head>中间添加Chec

  • js取两个数组的交集|差集|并集|补集|去重示例代码

    复制代码 代码如下: /** * each是一个集合迭代函数,它接受一个函数作为参数和一组可选的参数 * 这个迭代函数依次将集合的每一个元素和可选参数用函数进行计算,并将计算得的结果集返回 {%example <script> var a = [1,2,3,4].each(function(x){return x > 2 ? x : null}); var b = [1,2,3,4].each(function(x){return x < 0 ? x : null}); alert

  • js清除input中type等于file的值域(示例代码)

    如下所示;var objFile = document.getElementById('fileID');objFile.outerHTML=objFile.outerHTML.replace(/(value=\").+\"/i,"$1\"");

  • 快速实现JS图片懒加载(可视区域加载)示例代码

    js懒加载图片 如何提高网页加载速度?在网页中有许多img标签,这些标签就是图片,其属性src则是指向服务器地址,当浏览器从上往下读取到src标签中的地址时,浏览器就会开启线程,加载这张图片.而并不是等到整张页面都解析完成才加载图片.我们要做的就是加载用户可视范围内的图片. js懒加载图片的目的 1.网页优化,提高网页加载速度 2.页面优化友好,提高SEO收录与排名 3.提高用户体验,减少服务器压力 实例代码如下: <!DOCTYPE html> <html lang="en&

  • 文本框(input)获取焦点(onfocus)时样式改变的示例代码

    摘要:许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果.其实很简单,我们只需要获取页面上的文本框,加上onfocus事件或者其他对应的事件即可.本文介绍了如何在获取焦点时切换样式,明白原理后,实现其他效果就很简单了. 许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果.其实很简单,我们只需要获取页面上的文本框,加上onfocus事件或者其他对应的事件即可.本文介绍了如何在获取焦点时切换样式,明白原理后,实现其他

  • JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码

    前言 很多站长为了仿止别人仿制或扒下自己的网页,都会选择使用禁止浏览器右键查看元素或F12审查元素,一旦查看元素浏览器页面就会自动关闭,下面话不多说了,来一起看看详细的介绍吧. 注:该代码不兼容火狐浏览器,对于一些小白还是有用的. javascript实现代码: <script type="text/javascript"> function fuckyou(){ window.close(); //关闭当前窗口(防抽) window.location="abou

  • 手机端网页点击链接触发自动拨打或保存电话的示例代码

    通过网页拨打电话 <a href="tel://110 ">拨打电话</a> 这种方式塞班.安卓与iphone都支持 切记一定这这么写,不要自己写方法再去调用 例如;<a href="javascript:phone('+phone+') ">拨打电话</a> function phone(date){ window.location.href = 'tel://' + date; } 这样写IOS不兼容

  • input 标签实现输入框带提示文字效果(两种方法)

    方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登录.搜索等位置很适合,感兴趣的你可以参考下本文或许可以帮助到你,Webkit作为载体开发系统,当然需要大量使用Html5与CSS3,不仅减少大量的JS还可以保证更流畅. 当选中对话框后,提示文字变浅色,输入后消失.这个现在通行的做法是在Input标签后面增加一个Label.使用JS控制. HTML5

随机推荐