js-计算器
<div class="main"><h1>HTML5-计算器</h1>
<input id="num1" class="num" type="number"/>
<span id="operator">+</span>
<input id="num2" class="num" type="number"/>
<a>=</a>
<input id="num3" class="num" type="number" disabled="disabled"/>
<input id="add" class="operator" type="button" value="+">
<input id="sub" class="operator" type="button" value="-">
<input id="mul" class="operator" type="button" value="*">
<input id="div" class="operator" type="button" value="÷">
<input id="qc" class="operator" type="button" value="清除">
</div>
<script>
var num1=document.getElementById("num1");
var num2=document.getElementById("num2");
var num3=document.getElementById("num3");
var num;
add.onclick=function(){
operator.innerHTML="+";
num3.value=parseInt(num1.value)+parseInt(num2.value);
}
sub.onclick=function(){
operator.innerHTML="-";
num3.value=parseInt(num1.value)-parseInt(num2.value);
}
mul.onclick=function(){
operator.innerHTML="*";
num3.value=parseInt(num1.value)*parseInt(num2.value);
}
div.onclick=function(){
operator.innerHTML="/";
num3.value=parseInt(num1.value)/parseInt(num2.value)
}
qc.onclick=function(){
num1.value='';
num2.value='';
num3.value='';
}
</script>
js-计算器的更多相关文章
- 早期练手:功能相对比较完善的 js 计算器
第一次发博客,就先发一个自己早期,刚开始学前端时,用js写的一个计算器吧,计算功能比较少,只有 + - * / ,不过其他功能还是比较完善的,比如: 输出结果后,连续按"=",可以 ...
- js计算器案例
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...
- js计算器---转
至今见过的一个还没问题的计算器,收藏在此. 转自javascript写的简单的计算器原文链接,谢分享! js部分 ar num=0,result=0,numshow="0"; va ...
- 简易js计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. <!DOCTYPE html> <html> <head> ...
- JS计算器(自制)
<!doctype html><html><header><meta charset="utf-8"><script src= ...
- js计算器
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js 计算器转摘
转自:https://mp.weixin.qq.com/s/Jxe3V7D0PFLvIFNZPlSyNg <table> <tr> <td colspan="4 ...
- 基于js白色简洁样式计算器
今天给大家分享一款白色简洁样式计算器JS代码是一款精美简洁计算器JS代码插件网页特效,软件应用,后台应用JS计算器插件代码免费下载.适用浏览器:360.FireFox.Chrome.Safari.Op ...
- 纯JS实现房贷利率报表对比
最近朋友买房,想计算下自己的房贷的还款情况,自己正好周末没事,从网上找来点代码修改,也算是对自己技术的巩固吧. 目前这个还只是个初级版本,暂时可以在PC上正常访问,将来会一步一步的把相继功能都加上的, ...
- windows10风格 springboot vue.js html 跨域 前后分离 activiti 整合项目框架源码
官网:www.fhadmin.org 此项目为Springboot工作流版本 windows 风格,浏览器访问操作使用,非桌面应用程序. 1.代码生成器: [正反双向](单表.主表.明细表.树形表,快 ...
随机推荐
- RDLC报表系列(二) 行分组
接上一篇文章的内容,今天来说的是行分组.还是打开demo1.rdlc界面,拖入一个文本框和表 1.在表中随便选择一个字段,不然在添加行组的时候不会自动提示.我这里是选择的Dept 2.在下面的行组中右 ...
- 利用DreamweaverCS5制作一个含有动态标题的教程
DreamweaverCS5怎么制作一个含有动态标题?做一个网页就先要做一个标题,一个好标题会让网页让人印象深刻,有动态的标题会让网页更生动,下面我就介绍一下怎么制作一个含有动态的标题 做一个网页 ...
- 10Cookie
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- CSS3实现漂亮ToolTips
演示Demo 5种效果的主要css如下: /* transform:向元素应用2D或3D转换; transform-origin属性只有在定义了transform以后才生效 */ .tooltip-e ...
- CSS 3 属性学习 —— 1. Gradient 渐变
CSS3 中渐变分为: 线性渐变(linear-gradient)和径向渐变(radial-gradient)两种. 1. 线性渐变 参数: <linear-gradient> = li ...
- View的滑动冲突
一.常见的滑动冲突 场景1:外部滑动和内部滑动不一致 场景2:外部滑动和内部滑动一致 场景3:上面两种情况的嵌套 二.滑动冲突的处理方法 场景一:根据水平滑动还是竖直滑动判断到底由谁来拦截事件. 场景 ...
- 测试Web服务接口
1. http://www.iteye.com/topic/142034 2. http://www.iteye.com/topic/1123835 3.http://yongguang423.ite ...
- zk 节点故障 重连机制
<pre name="code" class="html">如果在连接时候zk服务器宕机 To create a client session th ...
- 在 Windows Azure 网站中进行纵向扩展和横向扩展
编辑人员注释:本文章由 Windows Azure 网站团队的项目经理 Byron Tardif 撰写. 当您开始一个新的 Web 项目,或者刚刚开始开发一般的网站和应用程序时,您可能希望从小处着手. ...
- opennebula auth module ldap
1,安装net-ldap addon ruby library for openldap