• 练习-计算器


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>计算器</title>
    </head>
    <body>
    数1:<input type="text" id="num1"/><br>
    数2:<input type="text" id="num2"/><br>
    符号:
    <select id="fh">
    	<option value="+">加</option>
    	<option value="-">减</option>	
    	<option value="*">乘</option>	
    	<option value="/">除</option>	
    </select>
    <br>
    <button onclick="jisuan()">计算</button>
    <br>结果为:<input type="text" id="result" id="result"/>
    
    <script>
    //点击计算按钮时调用方法
    //方法里面找元素 计算 赋值
    
    function jisuan(){
    	var n1=+document.getElementById('num1').value,
    		n2=+document.getElementById('num2').value,
    		fh=document.getElementById('fh').value,
    		result=document.getElementById('result'),
    		jg=0;
    		
    	if(fh=='+'){
    		jg=n1+n2;
    	}
    	if(fh=='-'){
    		jg=n1-n2;
    	}
    	if(fh=='*'){
    		jg=n1*n2;
    	}
    	if(fh=='/'){
    		jg=n1/n2;
    	}
    	
    	result.value=jg;
    }
    
    </script>
    
    </body>
    </html>
    

    2

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>eval计算器</title>
    </head>
    <body>
    数1:<input type="text" id="num1"/><br>
    数2:<input type="text" id="num2"/><br>
    符号:
    <select id="fh">
    	<option value="+">加</option>
    	<option value="-">减</option>	
    	<option value="*">乘</option>	
    	<option value="/">除</option>	
    </select>
    <br>
    <button onclick="jisuan()">计算</button>
    <br>结果为:<input type="text" id="result" id="result"/>
    
    <script>
    function jisuan(){
    	var n1=+document.getElementById('num1').value,
    		n2=+document.getElementById('num2').value,
    		fh=document.getElementById('fh').value,
    		result=document.getElementById('result'),
    		jg=0;
    		
    	jg=eval(n1+fh+n2); //接收一个字符串,根据上下文自动执行
    	
    	result.value=jg;	
    }
    
    </script>
    
    </body>
    </html>
    

    eval() 函数:

    接受一个字符串参数,将这个字符串作为代码在上下文环境中执行,并返回执行的结果

    例:

    var a=123;
    alert(eval('a'));

  • 相关阅读:
    angular读书笔记(三)
    angular读书笔记(二)
    angularjs读书笔记(一)
    angular和web前端的一些细节
    angular的service
    angular学习之directive
    最近学的twig
    最近学的grunt
    今天学的angularJS
    android即时通讯开发笔记(一)绪论~实现用户登录,自动登录,注销功能
  • 原文地址:https://www.cnblogs.com/hzhjxx/p/9700632.html
Copyright © 2020-2023  润新知