<!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. 关于CDH中开发Spark

    文章发自http://www.cnblogs.com/hark0623/p/4167363.html 转发请注明 注意:基于CDH进行Spark开发时,使用高版本的apache原生包即可:不需要使用C ...

  2. static 类成员变量 和 static const类成员变量

    1.使用static类的优点: (1)避免与其他类的成员或者全局变量冲突 (2)可以封装 (3)阅读性好 2.static 数据成员独立于该类的任意对象而存在 static数据成员的类型可以是该成员所 ...

  3. cf #365b 巧妙的统计

     Mishka and trip time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  4. MVVM模式下实现拖拽

    在文章开始之前先看一看效果图 我们可以拖拽一个"游戏"给ListBox,并且ListBox也能接受拖拽过来的数据, 但是我们不能拖拽一个"游戏类型"给它. 所以 ...

  5. Swift3.0语言教程使用编码创建和初始化字符串

    Swift3.0语言教程使用编码创建和初始化字符串 使用编码创建和初始化字符串 创建和初始化字符串除了可以使用上文中提到的方法外,还可以使用init(coder:)方法,此方法一般不常使用,其语法形式 ...

  6. 阻止Ajax多次提交

    1.Ajax的abort() xhr = $.ajax({}) if (xhr){ xhr.abort(); } 2.通过在Ajax的beforeSend()方法以及complete()方法添加删除类 ...

  7. 【noip暑假tarjan专题】

    %%%奎老师 A:傻逼缩点...傻逼编译器卡我next... B:就是这道奎老师没讲清楚的题,明明小朋友们都一A嘛,,,明明细节有很多嘛,,,怎么都这么熟练啊. C:本质还是B,换了个马甲而已. D: ...

  8. iOS __strong __weak @Strongify @Weakify

    @Strongify,@Weakify主要是在block中使用. 因为block一般都在对象内部声明.. 如果在block内部使用了当前对象的属性,就会造成循环引用(block拥有当前对象的地址,而当 ...

  9. 【转载】Android端手机测试体系

    1.冒烟测试 跟web端 的测试流程一样,你拿到一个你们开发做出来的apk首先得去冒烟,也就是保证他的稳定性,指定时间内不会崩溃.这款原生sdk自带的monkey可以当做 我们的测试工具.就跟我之前博 ...

  10. details和summary

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...