zoukankan      html  css  js  c++  java
  • JavaScript制作简单的计算器

    使用js来实现一个简单的计算器功能,包括加减乘除以及清空内容。

    下面的HTML的代码:

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    </head>
    	<body>
    <div id="jisuandiv">
    			<h2>js计算器</h2>
    			<input type="text" id="text" value="" disabled="disabled"/>
    			<br>
    			<div id="jisuankuang">
    				<button type="button" onclick="cale(this.id)" id="7" value="7">7</button>
    				<button type="button" onclick="cale(this.id)"  id="8" value="8">8</button>
    				<button type="button" onclick="cale(this.id)"  id="9" value="9">9</button>
    				<button type="button" onclick="cale(this.id)"  id="*" value="*">*</button>
    				<button type="button" onclick="cale(this.id)"  id="4" value="4">4</button>
    				<button type="button" onclick="cale(this.id)"  id="5" value="5">5</button>
    				<button type="button" onclick="cale(this.id)"  id="6" value="6">6</button>
    				<button type="button" onclick="cale(this.id)"  id="/" value="/">/</button>
    				<button type="button" onclick="cale(this.id)"  id="1" value="1">1</button>
    				<button type="button" onclick="cale(this.id)"  id="2" value="2">2</button>
    				<button type="button" onclick="cale(this.id)"  id="3" value="3">3</button>
    				<button type="button" onclick="cale(this.id)"  id="-" value="-">-</button>
    				<button type="button" onclick="jieguo()"  id="=" value="">=</button>
    				<button type="button" onclick="cale(this.id)"  id="0" value="0">0</button>
    				<button type="button" onclick="C()"  id="C" >C</button>
    				<button type="button" onclick="cale(this.id)"  id="+" value="+">+</button>
    			</div>
    		</div>
    	</body>
    </html> ```
    css代码:
    

    jisuandiv{

    	height: 460px;
    	 300px;
    	background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; background-blend-mode: multiply,multiply;
    }
    #jisuandiv>h2{
    	text-align: center;	
    }
    #jisuandiv>input{
    	display: block;
    	height: 60px;
    	 260px;
    	line-height: 60px;
    	font-size: 40px;
    	margin: 0 auto;
    	text-align: center;
    }
    #jisuankuang{
    	margin: 0 auto;
    	height: 300px;
    	 260px;
    	border: white 4px solid;
    	display: flex;
    	flex-flow: row wrap;
    	justify-content: space-around;
    }
    #jisuankuang>button{
    	margin: 6px;
    	 50px;
    	height: 50px;
    	background: red;
    	font-size: 16px;
    }```
    

    js代码:

    // 获取输入数字
    function cale(num){
    	document.getElementById("text").value +=document.getElementById(num).value;
    }
    // 计算结果
    function jieguo(){
    	var str= document.getElementById("text").value;
    	document.getElementById("text").value = eval(str);
    }
    function C(){
    	document.getElementById("text").value ="";
    }
    

    简单的功能,希望能帮助到需要的人,这里代码的重点是运用js中的函数 eval,它主要可以让string字符串进行计算,例如: eval("2+2");
    其他功能只要能获得按钮的参数,并累加给显示的位置即可。

  • 相关阅读:
    夺命雷公狗---DEDECMS----21dedecms按照地区取出电影内容
    夺命雷公狗---DEDECMS----20dedecms取出栏目页对应的内容
    夺命雷公狗---DEDECMS----19dedecms栏目列表页的完成
    夺命雷公狗---DEDECMS----18dedecms之无可奈何标签-sql标签取出今天更新
    mysql取出现在的时间戳和时间时间戳转成人类看得懂的时间
    SQL语句:find_in_set的使用方法
    夺命雷公狗---DEDECMS----17dedecms头条信息的取出
    夺命雷公狗---DEDECMS----16dedecms取出首页今日更新
    夺命雷公狗---DEDECMS----15dedecms首页栏目列表页导航部分完成
    夺命雷公狗---DEDECMS----14dedecms首页导航条的完成
  • 原文地址:https://www.cnblogs.com/caominjie/p/10834609.html
Copyright © 2011-2022 走看看