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标签内的数值加减(示例代码)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
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
随机推荐
- Javascript实现真实字符串剩余字数提示的实例代码
- spring boot 使用@Async实现异步调用方法
- 关于js中的鼠标事件总结
- ubuntu用wifi连接android调试程序的步骤
- 10个值得深思的PHP面试题
- python使用htmllib分析网页内容的方法
- jQuery调用ajax请求的常见方法汇总
- 最后挂电话才是最爱你的人
- rman恢复方案和oracle异机恢复
- 无语,javascript居然支持中文(unicode)编程!
- Java ArrayList 实现实例讲解
- 浅谈在函数中返回动态的内存
- IE下双击checkbox反应延迟问题的解决方法
- js实现当前输入框高亮显示的方法
- 详解spring cloud分布式关于熔断器
- springboot+springmvc+mybatis项目整合
- Yii2框架控制器、路由、Url生成操作示例
- vue实现多组关键词对应高亮显示功能
- Spring Boot文件上传简单实例代码
- laravel 根据不同组织加载不同视图的实现
