精华内容
下载资源
问答
  • 网页简易计算器

    2012-03-04 10:37:26
    网页简易计算器,有+,-,*,/等功能,是初学者借鉴的好例子
  • js网页简易计算器

    2017-07-26 09:26:07
    一个用js实现的非常简易计算器,野路子新人学习过程中的产物,参照知乎上的一篇文章里的练习做的(第三课第七个),有不符合科班出身常识的地方请指正。 因为大幅改过布局,所以会有些比较奇怪的标签用法,见谅。

    野路子新人学习过程中的产物,参照知乎上的一篇文章里的练习做的(第三课第七个),有不符合科班出身常识的地方请指正。
    因为大幅改过布局,所以会有些比较奇怪的标签用法,见谅。
    截图:
    截图

    布局:

    <body>
        <div id="Cbody">
            <p id="name">By-mirai2333</p>
            <div id="displayArea">0</div>
            <p id="num"></p>
            <div>
                <ul>
                    <button class="clear">C</button>
                    <button class="symbols">%</button>
                    <button class="symbols">/</button>
                    <button class="symbols">*</button>
                    <button class="numbers">7</button>
                    <button class="numbers">8</button>
                    <button class="numbers">9</button>
                    <button class="symbols">-</button>
                    <button class="numbers">4</button>
                    <button class="numbers">5</button>
                    <button class="numbers">6</button>
                    <button class="symbols">+</button>
                    <button class="numbers">1</button>
                    <button class="numbers">2</button>
                    <button class="numbers">3</button>
                    <button class="equal">=</button>
                    <button class="zero">0</button>
                    <button class="numbers">.</button>
                </ul>
            </div>
        </div>
    </body>

    样式:

        <style type="text/css">
            body{text-align: center;color: white;overflow: hidden;}
            p{margin: 0px;height: 20px;}
            ul{margin: 0px 0px 15px 12px;padding: 0px;position: relative;overflow: hidden;}
            button{margin: 16px 12px 0px 0px;padding: 0px; float: left;width: 60px;height: 40px;font-size: 20px;}
            #name{height: 20px;margin: 0px 3px 0px 3px;text-align: right;}
            #Cbody{width: 300px;height: 400px;background: black;margin: auto;}
            #displayArea{height: 84px;font:700 50px/100px Arial;background: #EEEEE0;color: black;text-align: right;}
            #num{font: 100 15px/20px Arial;position: absolute;top: 28px;left: 618px;width: 300px;height: 20px;color: black;text-align: right;}
            .zero{width: 132px;}
            .equal{height: 96px;position: absolute;bottom: 0px;right: 0px;}
        </style>

    js的思路是这样的:所有的操作都是针对显示部分,显示部分分为当前显示已经成型的表达式。(以下简称为“当前”和“已经”)
    共有三个状态:

    • 当前是数字,已经是符号或空(发生在键入符号后再键入数字,或初始状态)
      状态一空
      状态一符号
    • 当前和已经都是符号(发生在键入符号后)
      状态二
    • 当前和已经都是数字(发生在键入等号后)
      状态三
      三类按钮“数字”“符号”“等号”的onclick事件都是按照上述三个状态进行处理,“等号”把要计算的表达式整理放入已经,然后用eval()函数计算。
      JavaScript:
        <script type="text/javascript">
            window.onload=function(){
                var current = document.getElementById('displayArea');
                var already = document.getElementById('num');
                var buttons = document.getElementsByTagName('button');
                for (var i = 0; i < buttons.length; i++) {
                    //数字键的单击事件
                    if (buttons[i].className=="numbers"||buttons[i].className=="zero") {
                        buttons[i].onclick=function(){
                            //外层循环是为了配合里面的替换,处理符号加点的情况
                            if (!(/[\%\/\*\-\+]$/.test(current.innerText)&&this.innerHTML==".")) {
                                if (current.innerText.length<10) {
                                    current.innerText+=this.innerHTML;
                                    var text = current.innerText.replace(/^[0\%\/\*\-\+](\d)/,"$1");
                                    current.innerText=text;
                                }
                            }
                        }
                    //符号键的单击事件
                    }else if (buttons[i].className=="symbols") {
                        buttons[i].onclick=function(){
                            //对应状态二,此时要把旧符号换成新的,依旧是状态二
                            if (/[\%\/\*\-\+]$/.test(current.innerText)) {
                                var text = already.innerHTML.replace(/([\%\/\*\-\+])$/,this.innerHTML);
                                already.innerHTML=text;
                                current.innerText=this.innerHTML;
                            //对应状态一,此时把当前数字移入已经并添加符号,变成状态二
                            }else if (/[\%\/\*\-\+\=]$/.test(already.innerHTML)){
                                already.innerHTML+=current.innerText+this.innerHTML;
                                current.innerText=this.innerHTML;
                            //对应状态三,把结果移入已经并添加符号,变成状态二
                            }else{
                                already.innerHTML = current.innerText+this.innerHTML;
                                current.innerText = this.innerHTML
                            }
                        }
                    //清除
                    }else if(buttons[i].className=="clear"){
                        buttons[i].onclick=function(){
                            already.innerHTML="";
                            current.innerText="0";
                        }
                    //等号
                    }else{
                        buttons[i].onclick=function(){
                            //状态二,去除符号并计算显示
                            if (/[\%\/\*\-\+\=]$/.test(current.innerText)) {
                                var text = already.innerHTML.replace(/([\%\/\*\-\+])$/,"");
                                already.innerHTML=text;
                                var text = eval(already.innerHTML);
                                current.innerText=text.toString().substr(0,10);
                            //状态一,当前移入已经并计算显示
                            }else if (/[\%\/\*\-\+\=]$/.test(already.innerHTML)) {
                                already.innerHTML+=current.innerText;
                                current.innerText=this.innerHTML;
                                var text = eval(already.innerHTML);
                                current.innerText=text.toString().substr(0,10);
                            }
                        }
                    }
                }
            }
        </script>

    下面附上知乎大佬的代码作为参考:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    body,div,p,ul,li,input{margin:0;padding:0;}
    ul{list-style-type:none;}
    a{color:#fff;outline:none;text-decoration:none;}
    body{font:700 24px/1.5 Arial;}
    #calc{position:relative;width:300px;background:#000;margin:10px auto;}
    #calc p{color:#fff;text-align:right;font:12px/20px Arial;padding:0 5px;}
    #calc .f-text{border:0;width:290px;height:84px;text-align:right;font:700 50px/84px Arial;background:url(img/inputBg.jpg) repeat-x;padding:0 5px;}
    #calc ul{position:relative;overflow:hidden;zoom:1;background:url(img/bg.jpg);padding:0 0 17px 8px;}
    #calc ul li{float:left;width:63px;height:41px;margin:17px 10px 0 0;}
    #calc ul li a{display:block;width:63px;height:41px;line-height:41px;text-align:center;background:url(img/btn.png) no-repeat;}
    #calc ul li a:hover{background-position:-63px 0;}
    #calc ul li.btn-1 a{background-position:0 -41px;}
    #calc ul li.btn-1 a:hover{background-position:-63px -41px;}
    #calc ul li.btn-2{position:absolute;top:174px;right:0;height:99px;}
    #calc ul li.btn-2 a{height:99px;line-height:99px;background-position:0 -164px;}
    #calc ul li.btn-2 a:hover{background-position:-63px -164px;}
    #calc ul li.btn-3{width:136px;}
    #calc ul li.btn-3 a{width:136px;background-position:0 -82px;}
    #calc ul li.btn-3 a:hover{background-position:0 -123px;}
    #formula{position:absolute;top:20px;background:none;border:0;font:700 12px/1.5 Arial;width:280px;padding:3px 15px 0 5px;text-align:right;}
    </style>
    <script>
    window.onload = function ()
    {
        var oCalc = document.getElementById("calc");
        var aA = oCalc.getElementsByTagName("a");
        var aInput = oCalc.getElementsByTagName("input")[0];
        var oFormula = document.getElementById("formula");
        var s = false;
        var i = 0;
    
        for (i = 0; i < aA.length; i++){
            aA[i].onfocus = function ()
            {
                this.blur() 
            };
            aA[i].onclick = function ()
            {
                switch(this.innerHTML)
                {
                    case "c":
                        aInput.value =  0;
                        oFormula.value = "";
                        break;
                    case "%":
                        count("%")
                        break;
                    case "÷":
                        count("/")
                        break;
                    case "×":
                        count("*")
                        break;
                    case "-":
                        count("-")
                        break;
                    case "+":
                        count("+")
                        break;
                    case "=":
                        s || (oFormula.value += aInput.value);
                        aInput.value = eval(oFormula.value.replace(/\%\/\*\-\+/,''));
                        aInput.value = aInput.value.substr(0,10).replace("NaN",0);
                        s = true;
                        break;
                    case ".":
                        if(aInput.value.search(/[\.\%\/\*\-\+]/) != -1)
                        break;
                    default:
                        s && (aInput.value = 0, oFormula.value = "", s = false);
                        aInput.value.length < 10 && (aInput.value = (aInput.value + this.innerHTML).replace(/^[0\%\/\*\-\+](\d)/,"$1"));
                }
            }   
        }
    
        function count(a)
        {
    
            if(s)
            {
                oFormula.value = aInput.value + a;
                aInput.value = a;   
                s = false;
            }
            else
            {
                /[\%\/\*\-\+]$/.test(aInput.value) || (oFormula.value += aInput.value);
                aInput.value = a;
                /[\%\/\*\-\+]$/.test(oFormula.value) || (oFormula.value += aInput.value);
                oFormula.value = oFormula.value.slice(-1) != a ? oFormula.value.replace(/.$/,a) : oFormula.value
            }
        }
    }
    </script>
    <title>网页计算器</title>
    </head>
    <body>
    <div id="calc">
        <p>By - Ferris QQ:21314130</p>
        <input class="f-text" type="text" readonly="readonly" maxlength="9" value="0" />
        <ul>
            <li class="btn-1"><a href="javascript:void(0)">c</a></li>
            <li class="btn-1"><a href="javascript:void(0)">%</a></li>
            <li class="btn-1"><a href="javascript:void(0)">÷</a></li>
            <li class="btn-1"><a href="javascript:void(0)">×</a></li>
            <li><a href="javascript:void(0)">7</a></li>
            <li><a href="javascript:void(0)">8</a></li>
            <li><a href="javascript:void(0)">9</a></li>
            <li class="btn-1"><a href="javascript:void(0)">-</a></li>
            <li><a href="javascript:void(0)">4</a></li>
            <li><a href="javascript:void(0)">5</a></li>
            <li><a href="javascript:void(0)">6</a></li>
            <li class="btn-1"><a href="javascript:void(0)">+</a></li>
            <li><a href="javascript:void(0)">1</a></li>
            <li><a href="javascript:void(0)">2</a></li>
            <li><a href="javascript:void(0)">3</a></li>
            <li class="btn-2"><a href="javascript:void(0)">=</a></li>
            <li class="btn-3"><a href="javascript:void(0)">0</a></li>
            <li><a href="javascript:void(0)">.</a></li>
        </ul>
        <input id="formula" type="text" readonly="readonly" value="" />
    </div>
    </body>
    </html>

    大佬的截图:
    大佬的截图

    展开全文
  • 网页简易计算器制作

    2021-06-11 09:12:07
    简易计算器 + - * / = 计算
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>简易计算器</title>
    </head>
    
    <body>
        <input type="number" id="f1" pattern="/^-?\d+\.?\d*$/">
        <select id="s-all">
            <option value="+" id="s1">+</option>
            <option value="-" id="s2">-</option>
            <option value="*" id="s3">*</option>
            <option value="/" id="s4">/</option>
        </select>
        <input type="number" id="f2" pattern="/^-?\d+\.?\d*$/">
        =<input type="number" id="f3">
        <br>
        <button onclick="count()">计算</button>
        <script>
    
            function count() {
                var a = document.getElementById("f1").value;
                var b = document.getElementById("f2").value;
                var sel = document.getElementById("s-all").value;
                var result;
    
    
    
                switch (sel) {
                    case ("+"):
                        var result = parseInt(a) + parseInt(b);
                        break;
                    case ("-"):
                        var result = parseInt(a) - parseInt(b);
                        break;
                    case ("*"):
                        var result = parseInt(a) * parseInt(b);
                        break;
                    case ("/"):
                        var result = parseInt(a) / parseInt(b);
                        break;
                    default:
                        break;
                }
                document.getElementById("f3").value = result;
    
    
            }
        </script>
    </body>
    
    </html>

     

    展开全文
  • 计算器代码 <!DOCTYPE html> <html> <head> <title></title> <meta charset = "utf-8" /> <style type="text/css"> button{width: 100px; height: 50px; ...

    计算器代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<title></title>
    		<meta charset = "utf-8" />
    		<style type="text/css">
    		button{width: 100px; height: 50px; background: gray; font-size: 30px; line-height: 50px}
    		input{width: 300px; height: 50px; font-size: 30px; line-height: 50px}
    		</style>
    		<script type="text/javascript">
    		//实现输入
    		/*
    			通过一个全局数组,将输入的内容记录
    
    		*/
    		var arr = [];
    
    		function btnClick(str){
    			arr.push(str);
    			//找到输入框
    			var oInput = document.getElementById("input_id");
    			oInput.value = arr.join("");
    		}
    
    		//点击C健 清空
    		function clearBtn(){
    			var oInput = document.getElementById("input_id");
    			oInput.value = "";
    			arr = [];
    		}
    
    		//当我们点击等于号的时候,开始计算并且得出结果
    		/// 123+456
    		//2 0 - 1 0
    		function equalFun(){
    			//找到运算符的位置
    			var index = 0;
    			for(var i = 0; i < arr.length; i++){
    				if(!(arr[i] >= 0 && arr[i] <= 9)){
    					index = i;
    					break;
    				}
    			}
    		
    			var num1Arr = arr.slice(0, index);
    			var num2Arr = arr.slice(index + 1, arr.length);
    
    			//转成数字
    			var num1 = parseInt(num1Arr.join(""));
    			var num2 = parseInt(num2Arr.join(""));
    
    
    			//将结果显示在页面上
    			var oInput = document.getElementById("input_id");
    			oInput.value = operator(num1, arr[index], num2);
    
    			//清空
    			arr = [];
    		}		
    
    
    
    				//封装函数
    		function operator(num1, str, num2){
    			// + - * / %
    			switch(str){
    				case "+":
    					return num1 + num2; //函数运行遇到return就终止了
    					//break; //为了防止事件穿透
    				case "-":
    					return num1 - num2;
    				case "*":
    					return num1 * num2;
    				case "/":
    					return num1 / num2;
    				case "%":
    					return num1 % num2;
    				default:
    					alert("error");
    					break;
    			}
    		}
    
    
    		</script>
    	</head>
    	<body>
    		<!-- 
    		外层是双引号,里面必须用单引号
    		外层是单引号,里面必须是双引号
    		 -->
    		<input id = "input_id" />
    		<button onclick = "clearBtn();">C</button>
    		<br />
    		<button onclick = "btnClick(7);">7</button>
    		<button onclick = "btnClick(8);">8</button>
    		<button onclick = "btnClick(9);">9</button>
    		<button onclick = "btnClick('+');">+</button><br/>
    		<button onclick = "btnClick(4);">4</button>
    		<button onclick = "btnClick(5);">5</button>
    		<button onclick = "btnClick(6);">6</button>
    		<button onclick = "btnClick('-');">-</button><br/>
    		<button onclick = "btnClick(1);">1</button>
    		<button onclick = "btnClick(2);">2</button>
    		<button onclick = "btnClick(3);">3</button>
    		<button onclick = "btnClick('*');">*</button><br/>
    		<button onclick = "btnClick(0);">0</button>
    		<button onclick = "equalFun();">=</button>
    		<button onclick = "btnClick('%');">%</button>
    		<button onclick = "btnClick('/');">/</button><br/>
    	</body>
    </html>
    
    展开全文
  • 一个jsp开发的网页计算器,里面的一连串的计算代码还可以值得学习一下,菜鸟级别的,里面还有一点bug 只提供学习娱乐
  • 网页简易计算器

    2013-07-16 18:15:24
    自己用html写的网页简易计算器,可以实现简单的加,减,乘,除,求开方,求次方计算,里面内嵌javascript,需要的可以下载看看。
  • 简易网页计算器

    2013-10-17 17:52:03
    一个简单的基于web service 的计算器
  • 介绍了网页计算器简单实现代码,有需要的朋友可以参考一下
  • Web网页简易计算器

    千次阅读 多人点赞 2019-07-18 16:06:03
    Web网页简易计算器 说明: 1、这个计算器的功能比较简单,包括加减乘除,小数点,退格,清除以及等于。 2、首先先写出html,即界面主要框架;再写出css,即属性,使框架看起来美观一些;最后就是javascript,...


    说明:
    1、这个计算器的功能比较简单,包括加减乘除,小数点,退格,清除以及等于。

    2、首先写出html,即界面主要框架;再写出css,即属性,使框架看起来美观一些;最后就是javascript,就是功能的实现,主要有计算(调用js内置强大的eval() 函数)、退格、清除、等于四个功能。

    3、html和css两部分不难,javascript会麻烦一点。

    推荐一篇不错的博客:
    js中的eval方法详解(一)–eval方法的初级应用


    HTML代码如下:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>网页版计算器</title>
    		<link href="css/new_file.css" rel="stylesheet" type="text/css" />
    		<script type="text/javascript" src="js/new_file.js"></script>
    	</head>
    	<body>
    		<div id="calculator">
    			<div id="head"><h3>网页版简单计算器</h3></div>
    			<div id="show" align="center"><input type="text" id="text" ></div>
    			<div id="cuttom">
    				<table align="center">
    					<tr>
    						<td><input type="button" value="7" onclick="display(7)"></td>
    						<td><input type="button" value="8" onclick="display(8)"></td>
    						<td><input type="button" value="9" onclick="display(9)"></td>
    						<td><input type="button" value="+" onclick="display('+')"></td>
    						<td><input type="button" value="-" onclick="display('-')"></td>
    					</tr>
    					<tr>
    						<td><input type="button" value="4" onclick="display(4)"></td>
    						<td><input type="button" value="5" onclick="display(5)"></td>
    						<td><input type="button" value="6" onclick="display(6)"></td>
    						<td><input type="button" value="*" onclick="display('*')"></td>
    						<td><input type="button" value="/" onclick="display('/')"></td>
    					</tr>
    					<tr>
    						<td><input type="button" value="1" onclick="display(1)"></td>
    						<td><input type="button" value="2" onclick="display(2)"></td>
    						<td><input type="button" value="3" onclick="display(3)"></td>
    						<td><input type="button" value="(" onclick="display('(')"></td>
    						<td><input type="button" value=")" onclick="display(')')"></td>
    					</tr>
    					<tr>
    						<td><input type="button" value="." onclick="display('.')"></td>
    						<td><input type="button" value="0" onclick="display(0)"></td>
    						<td><input type="button" value="←" onclick="back()"></td>
    						<td><input type="button" value="c" onclick="reset()"></td>
    						<td><input type="button" value="=" onclick="equals()"></td>
    					</tr>
    				</table>
    			</div>
    		</div>
    	</body>
    </html>
    
    

    CSS代码如下:

    body{background:#CDC673;}
    h3{font-family:微软雅黑;font-size: 35px;text-align: center;}
    #show input{width:511px;height:60px;font-size:30px;}
    #cuttom input{width: 100px;height: 70px;font-size: 28px;}
    #cuttom input:hover{background: lightgray;}
    

    JS代码如下:

    function $(id){return document.getElementById(id);}
    var str;
    var result;
    function display(str0)	//显示到文本框
    {
    	str = document.getElementById("text");
    	str.value = str.value + str0;
    }
    function equals()	//等于
    {
    	str = document.getElementById("text");
    	result = eval(str.value);
    	str.value = result;
    }
    function back()		//退格
    {
    	str = document.getElementById("text");
    	str.value = str.value.substring(0,str.value.length-1);
    }
    function reset()	//清除
    {
    	str = document.getElementById("text");
    	str.value = "";
    }
    


    运行界面如下:
    在这里插入图片描述

    展开全文
  • 简易网页计算器

    2013-06-11 11:00:53
    javascript编写简易计算器,能实现点击数字实现计算的功能。
  • 网页简单计算器,包含计算器的基本功能,可以运行加减乘除计算。
  • 网页计算器

    2013-04-24 23:44:36
    网页计算器简单的四则运算以及模除、开方等。仿照windows自带计算器
  • 我们运用dw的相关JavaScript知识来完成网页简易计算器的功能 首先先创建计算器布局 然后绑定点击事件 再定义3个变量用于存放3个值 最后获取操作符并且输出
  • 开发工具MyEclipse 运用了struts2+jstl标签+jsp 实现了2位数之间的加减乘除运算的一个网页简易计算器 还带有国际化切换英、汉双语
  • 主要介绍了php编程实现简单网页计算器功能,涉及php简单表单操作与数值运算相关实现技巧,需要的朋友可以参考下
  • 网页简单计算器.rar

    2019-05-27 12:41:31
    网页简单计算器,包含计算器的基本功能,可以运行加减乘除计算。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,465
精华内容 4,586
关键字:

网页简单计算器