zoukankan      html  css  js  c++  java
  • [java代码库]-简易计算器(第一种)

    简易计算器(效果如图所示)

      第一种方案:采用Javascript+html完成计算器,支持+-*/,结果显示不允许使用input输入域(可以考虑使用《span》)

    <html>
    	<head>
    		<title>简易计算器</title>
    		<script language="javascript">//易错:不是"text/javascript"
    			function doCal(){
    				//alert(document.getElementByName("value1").length);//易错:getElementByName,首字母大写,不是byName
    				//alert(document.getElementByName("value1")[0].value);//易错:getElementByName,返回一个集合,应该用[0]表示需要获得第几个元素
    
    				var value1=parseInt(document.getElementById("value1").value);//易错:易错:getElementById首字母大写,不是byId				
    				var flag=document.getElementById("flag").value;
    				var value2=parseInt(document.getElementById("value2").value);//易错:getElementBy返回是String类型,应该通过parseInt转换为Int类型
    				//alert(value1+","+flag+","+value2);//多打印东西出来,用于检验
    				var s=0;
    				switch(flag){
    					case "+"://易错:语法,别忘记加冒号
    						s=value1+value2;
    						break;//易错:语法,别忘记加break;跳出选择
    					case "-":
    						s=value1-value2;
    						break;
    					case "*":
    						s=value1*value2;
    						break;
    					case "/":
    						s=value1/value2;
    				}
    				//使运算结果显示在浏览器中,注意=右侧为string类型
    				document.getElementById("span_result").innerHTML="<font size='16' color='red'>"+s+"</font>"
    			}
    						
    			//alert(document.getElementByName(value1).value);
    		
    		</script>
    	</head>
    	<body>
    		<h1>简易计算器</h1>
    		<hr>
    		<input type="text" name="value1" id="value1">
    		<select name="flag" id="flag">//注意select-option的用法
    			<option value="+">+</option>
    			<option value="-">-</option>
    			<option value="*">*</option>
    			<option value="/">/</option>
    		</select>
    		
    		<input type="text" name="value2" id="value2">
    		<!--
    		<button type="button" onclick="doCal()">点击这里</button>
    		-->
    		<input type="button" value="=" onclick="doCal()">//button的onclick事件
    		<!--
    		<input type="text" name="result" id="result">
    		-->
    		<span id="span_result"></span>//通过span显示结果
    	</body>
    </html>
    

      

     

  • 相关阅读:
    死锁
    线程池
    jQuery param()作用与使用方法
    jQuery remove()与jQuery empty()的区别
    jQuery局部动态刷新
    jQuery事件函数位置放置的两种方法
    跨语言通信方案的比较—Thrift、Protobuf和Avro
    Nodejs下如何判断文件夹的存在以及删除文件夹下所有的文件
    如何缓存hbase数据以减少下次取数据的时间
    javascript Date对象的介绍及linux时间戳如何在javascript中转化成标准时间格式
  • 原文地址:https://www.cnblogs.com/zhaolijing/p/3816098.html
Copyright © 2011-2022 走看看