<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function()
{
var oTxt1 = document.getElementById("txt1");
var oTxt2 = document.getElementById("txt2");

var oSel1 = document.getElementById("sel1");

var oBtn1 = document.getElementById("btn1");
var oSpa1 = document.getElementById("spa1");

oBtn1.onclick=function()
{
var a1 = parseFloat(oTxt1.value);
var a2 = parseFloat(oTxt2.value);

var result;

switch(oSel1.value)
{
case "+":result=a1+a2;
break;
case "-":result=a1-a2;
break;
case "*":result=a1*a2;
break;
case "/":result=a1/a2;
break;
case "%":result=a1%a2;
break;

}
oSpa1.innerHTML = result;
}



}
</script>
</head>

<body>
<input type="text" id="txt1" />
<select id="sel1">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
<input type="text" id="txt2" />
<input type="button" value="计算" id="btn1" />
<span id="spa1"></span>
</body>
</html>

javascript平时小例子⑥(简易计算器的制作)的更多相关文章

  1. javascript平时小例子⑨(小型抽奖功能)

    <!doctype html><html lang="en"> <head> <meta charset="utf-8" ...

  2. javascript平时小例子⑧(导航置顶效果)

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  3. javascript平时小例子⑦(鼠标跟随的div)

    <!doctype html><html> <head> <meta charset="utf-8"> <title>无 ...

  4. javascript平时小例子⑤(投票效果的练习)

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. javascript平时小例子④（setInterval使用2）

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

  6. javascript平时小例子③（setInterval使用1）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  7. javascript平时小例子②（正则表达式验证邮箱）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>邮 ...

  8. javascript平时小例子①（移动的小div）

    css样式: #box{ width: 300px; height: 300px; background: deepskyblue; position: absolute; margin-right: ...

  9. 微信小程序-简易计算器

    代码地址如下:http://www.demodashi.com/demo/14210.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

随机推荐

  1. Linux学习笔记(21) Linux日志管理

    1. 简介 (1) 日志服务 在CentOS 6.x中日志服务已经由rsyslogd取代了原先的syslogd服务.rsyslogd日志服务更加先进,功能更多.但是不论该服务的使用,还是日志文件的格式 ...

  2. T-SQL优化

    我们做软件开发的,大部分人都离不开跟数据库打交道,特别是erp开发的,跟数据库打交道更是频繁,存储过程动不动就是上千行,如果数据量大,人员流动大,那么我么还能保证下一段时间系统还能流畅的运行吗?我么还 ...

  3. 【myEcplise2015 更换主题+字体颜色】

    更换myEcplise样式: 若对js文件或者java文件中的字体颜色不是很满意,可以去按照这个路径去更新字体颜色: 以javaScript文件为例子: 修改完成之后,javascript文件中文字是 ...

  4. spring配置的相关文章

    1.maven项目中自动下载jar包的pom.xml配置 http://blog.sina.com.cn/s/blog_643634b80101hd3i.html 2.参考配置1:http://www ...

  5. HTML5优点

    1.标签的改变:<header>, <footer>, <dialog>, <aside>, <figure>, <section&g ...

  6. js渐隐渐入渐出效果 fadeOut fadeIn

    //fadeOut //function start function fadeOut(ele,speed){ var ele=document.getElementById(ele); var op ...

  7. 如何用distinct消除重复记录的同时又能选取多个字段值？

    http://www.cnblogs.com/warioland/archive/2012/05/30/2526128.html

  8. Python基础9- 字典

    #coding=utf8#字典由键和对应的值组成(键值对)--哈希表,字典元素也可以为空 dict1 = {'name':'kaly','age':20,'sex':'male'}dict2 = {} ...

  9. 学习angularjs时遇到 XX is not a function

        第一次练习就直接没效果:   "后不能直接以 function XXXcontroller (){ code......}这样的方式直接注册监听器了. 以后必须angular.mod ...

  10. 向量时钟Vector Clock in Riak

    Riak 是以 Erlang 编写的一个高度可扩展的分布式数据存储,Riak的实现是基于Amazon的Dynamo论文,Riak的设计目标之一就是高可用.Riak支持多节点构建的系统,每次读写请求不需 ...