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

    万次阅读 多人点赞 2018-08-10 12:37:23
    js实现简易计算器计算器的布局不像表格那么公正对称,所以布局这块相对比较繁琐,但是也可以通过这来练习一下CSS。 一、实现功能 完成计算器的加减乘除的基本计算功能 实现输入框中的字符串拼接 二、实现思路 ...

    js实现简易计算器。计算器的布局不像表格那么公正对称,所以布局这块相对比较繁琐,但是也可以通过这来练习一下CSS。

    一、实现功能

    1. 完成计算器的加减乘除的基本计算功能
    2. 实现输入框中的字符串拼接

    二、实现思路

    1. 完成基本布局
    2. js实现运算功能

    三、知识点

    e.target||e.srcElement :获取触发事件的元素

    四、具体代码实现

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style type="text/css">
    body {
    	border: none;
    }
    
    h1{
    	text-align: center;
    }
    
    button{
    	cursor: pointer;
    	width: 65px;
    	height: 45px;
    	background-color: hsla(182, 93%, 45%, 0);
    	border-radius: 10px;
    	box-shadow: 3px 3px 5px #ccc;
    	outline: none;
    	font-size: 25px;
    }
    input{
    	font-size: 25px;
    	border-radius: 10px;
    	width: 200px;
    	height: 40px;
    }
    #main{
    	text-align:center;
    	width:300px;
    	height: 287px;
    	margin: 0 auto;
    	border:2px solid #ccc;
    	background-image: url('../imges/4.jpg');
    }
    .num{
    	margin: 10px;
    }
    
    </style>
    
    </head>
    <body>
    	<h1>计算器</h1>
    	<div id="main" onclick="cal(event);">
    		<div class="num" >
    			<input type="text" value="0" readonly="readonly" id="screen" />
    			<button>C</button>
    		</div>
    		<div class="num">
    			<button>7</button>
    			<button>8</button>
    			<button>9</button>
    			<button>/</button>
    		</div>
    		<div class="num">
    			<button>4</button>
    			<button>5</button>
    			<button>6</button>
    			<button>*</button>
    		</div>
    		<div class="num">
    			<button>1</button>
    			<button>2</button>
    			<button>3</button>
    			<button>-</button>
    		</div>
    		<div class="num">
    			<button>0</button>
    			<button>.</button>
    			<button>=</button>
    			<button>+</button>
    		</div>
    	</div>
    </body>
    <script type="text/javascript">
    function cal(e) {
    	//获取触发事件的元素
    	var obj = e.target||e.srcElement;
    	if(obj.nodeName != "BUTTON"){
    		return;
    	}
    	var v = obj.innerHTML;
    	var screen = document.getElementById("screen");
    	if(v == "C"){
    		screen.value = 0;
    	}else if(v == "="){
    		//获取到输入框的值
    		var exp = screen.value;
    		try{
    			var result = eval("("+exp+")");
    			//将计算结果赋值给输入框
    			screen.value = result;
    		}catch(e){
    			console.log(e);
    			screen.value = "error";
    		}
    	}else{
    		if(screen.value == 0){
    			screen.value = "";
    		}
    		screen.value += v;
    	}
    	
    }
    
    </script>
    </html>

    五、js部分详解

    function cal(e) {
    	//获取触发事件的元素
    	var obj = e.target||e.srcElement;
    	if(obj.nodeName != "BUTTON"){
    		return;
    	}
    	var v = obj.innerHTML;
    	var screen = document.getElementById("screen");
    	if(v == "C"){
    		screen.value = 0;
    	}else if(v == "="){
    		//获取到输入框的值
    		var exp = screen.value;
    		try{
    			var result = eval("("+exp+")");
    			//将计算结果赋值给输入框
    			screen.value = result;
    		}catch(e){
    			console.log(e);
    			screen.value = "error";
    		}
    	}else{
    		if(screen.value == 0){
    			screen.value = "";
    		}
    		screen.value += v;
    	}
    	
    }

    利用e.target||e.srcElement,获取到触发事件的元素,||连接两个语法是为了解决不同浏览器的兼容性问题。

    获取到触发事件元素的具体值之后,判断元素值是否等于“=”和“C”,这两个按钮是做区别于普通字符串拼接及计算的其他功能。

    C做清屏处理:判断触发事件的按钮值是否为C,若为C,屏幕中只显示0;

    =做计算处理:判断触发事件的按钮值是否为=,若为=,利用eval()方法计算屏幕上的公式;

    其他触发事件的按钮直接做字符串拼接显示在屏幕上。

    六、动图效果

     

    今天的分享就到这里啦!欢迎指正!!!

    展开全文
  • 使用vue.js来编写一个简单计算器,供大家参考,具体内容如下 效果如图所示:是一个十分简单计算器,包含了加减乘除,不是用原生js写的,而是用vue.js写的 html: <!DOCTYPE html> <html> <head&...
  • 下面小编就为大家带来一篇html+js实现简单计算器代码(加减乘除)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • JavaScript实现简单计算器,这是参考我同学的代码实现,希望能够帮助到你
  • 主要介绍了JS实现基本的网页计算器功能,涉及JavaScript事件响应及数值运算相关操作技巧,需要的朋友可以参考下
  • JS实现简单网页计算器

    千次阅读 2019-09-08 23:11:42
    2015年推出ECMA Script2015(es6) ...它使得js可以计算 JavaScript 字符串,并把它作为脚本代码来执行 ,这就大大节省了冗余的代码量 <!DOCTYPE html> <html lang="zh"> <head> <meta chars...

    2015年推出ECMA Script2015(es6)
    其中的一项应用方法为eval(),提供了较大的方便。
    它使得js可以计算 JavaScript 字符串,并把它作为脚本代码来执行 ,这就大大节省了冗余的代码量

        <!DOCTYPE html>
        <html lang="zh">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        
            <style>
        
                /* 主体 */
                .counter{
                    width: 396px;
                    height: 486px;
                    background-color: #F2F2F2;
                    border: 1px solid #C2C3C6;
                    margin: 50px auto;
        
                }
                /* 显示框 */
                #screen {
                    height: 70px;
                    width: 336px;
                    background-color: #323232;
                    border: none;
                    margin: 40px 25px 32px 25px;
                    font: 700 40px/70px "微软雅黑";
                    color: #ffffff;
                    padding-right: 10px;
                }
                /* 功能区 */
                .funct {
                    padding: 0 20px;
                    position: relative;
        
                }
                /* 按钮样式 */
                .funct input {
                    height: 40px;
                    width: 60px;
                    margin: 10px 10px;
                    font: 400 20px/40px "微软雅黑";
                }
                /* 清除按钮样式 */
                .funct #res {
                    width: 150px;
                }
                /* + - = . 按钮浮动 */
                #add, #reduce, #round, #sum {
                    position: absolute;
                    right: 0px;
                    bottom: 0px;
                }
                /* 减号位置 */
                #reduce {
                    right: 30px;
                    top: 60px;
                }
        
                /* 加号位置 */
                #add {
                    right: 30px;
                    top: 120px;
                }
                /* 等于号位置 */
                #sum {
                    height: 100px;
                    right: 30px;
                    bottom: 0px;
                }
                /* 小数点位置 */
                #round {
                    right: 120px;
                    bottom: 0px;
                }
                /* 0 */
                #zero {
                    width: 150px;
                }
                /* 数字区 */
                .numb {
                    width: 280px;
                }
            </style>
        </head>
        <body>
        
        <div class="counter">
            <input type="text" id="screen" style="text-alig
    
    n:right" readOnly="true" value="">
        <div class="funct">
            <input onclick="reset()" type="button" id="res" value="C">
            <input onclick="allBtn(this)" type="button" id="division" value="/">
            <input onclick="allBtn(this)" type="button" id="ride" value="*">
    
            <input onclick="allBtn(this)" type="button" id="add" value="+">
            <input onclick="allBtn(this)" type="button" id="reduce" value="-">
            <input onclick="allBtn(this)" type="button" id="round" value=".">
            <input onclick="result()"  type="button" id="sum" value="=">
    
            <div class="numb">
                <input onclick="allBtn(this)" type="button" id="one" value="1">
                <input onclick="allBtn(this)" type="button" id="two" value="2">
                <input onclick="allBtn(this)" type="button" id="three" value="3">
                <input onclick="allBtn(this)" type="button" id="four" value="4">
                <input onclick="allBtn(this)" type="button" id="five" value="5">
                <input onclick="allBtn(this)" type="button" id="six" value="6">
                <input onclick="allBtn(this)" type="button" id="seven" value="7">
                <input onclick="allBtn(this)" type="button" id="eight" value="8">
                <input onclick="allBtn(this)" type="button" id="nine" value="9">
                <input onclick="allBtn(this)" type="button" id="zero" value="0">
            </div>
        </div>
    </div>
    
    <script >
       // let text = document.getElementById("screen");
       let text = document.querySelector("#screen");
        console.log(text);
    
        function allBtn(obj){
    
    
            text.value +=obj.value;
        }
        function reset(){
            text.value = "";
        }
        function result(){
          text.value = eval(text.value);
    
        }
    </script>
    </body>
    </html>
    
    展开全文
  • 使用html,JavaScript和css制作的简单科学计算器,无明显bug
  • 背景 实现效果 最终展现的页面如下图 用到的技术 实现思路 具体实现代码

    背景

    由于我又被分进了一个新的项目组,该项目需要用js,因为我没接触过,所以领导准备给我一周时间学习,没错,实现一个简单的支持四则混合运算的计算器就是作业,所以有了这篇文章
    故,这篇文章主要重点就不在html和css了,毕竟我也只是略懂皮毛,并未深究过

    实现效果

    最终展现的页面如下图,当鼠标点击按键时,按键会变色,可以进行四则混合运算
    在这里插入图片描述
    上面一行显示计算式,当按下“=”时,显示计算结果

    用到的技术

    计算器的页面是使用html的table绘制的
    按键的大小,颜色,鼠标悬浮变色是用css设置的
    点击按键将按键上的值和计算结果显示在最上面一行、完成四则混合运算是用js做的

    实现思路

    这里我分了三个文件,一个.html 一个 .css 一个 .js

    1. 先写了html和css,绘制出来网页展示的样子,此处不细说,有兴趣可以直接看代码
    2. 然后用js的DOM事件,给不同类型的按钮加上点击事件,调用不同的js函数。
      这一步我开始只是先写了一个函数定义,主要是为了先划分清楚逻辑,比如按某个按键应该实现哪些功能,显示什么效果等,后面对函数进行填充逻辑就不会乱掉
    3. 最后去实现js函数,也就是完成四则混合运算, 重点说一下是怎么实现四则混合运算并且让结果显示出来的
    • 上面显示算式和结果的时候,我定义了一个全局变量的数组,每次点击按键,就把点击的那个按键的值push到数组里,这样显示的时候就直接把数组丢过去。这样做的还有一个原因是点击退格键的时候就pop一下,点击清空键的时候就直接赋个空数组给数组变量,操作起来会容易一些

    • 接着很重要的一步是计算表达式,比如说输入 3 * 4.5 - 1= 这样的一个表达式,怎么去求值呢,我想到的方法是先把输入的数组变成变成中缀表达式,再由中缀表达式转成后缀表达式,然后再进行后缀表达式求值

        1. 首先通过上面的数组处理得到了这样的一个数组['3','*','4','.','5','-','1']  
        2. 把这个数组转换成字符串 变为这样 “3*4.5-1”
        3. 接着处理成操作符和数字分开的新的数组  ['3','*','4.5','-','1']  
        4. 处理完之后就是利用栈来将中缀表达式变为后缀表达式
        5. 再利用栈对后缀表达式求值,并且将结果填在=之后
      

    由于4.5步是数据结构中栈应用的内容,不清楚的可以回顾一下数据结构,至此就全部完成

    具体实现代码

    如上,分析的已经够多了,所以这块就话不多说,直接上代码

    .html文件

    <!DOCTYPE html>
    <html>
        <head>
            <title>calculator</title>
            <link rel="stylesheet" href="calculator.css">
            <script src="calculator.js"></script>
        </head>
    
        <body>
            <div>
                <table border="1">
                    <thead>
                        <th colspan="4">
                            <input type="text" id="result" disabled>
                        </th>
                    </thead>
    
                    <tbody>
                        <tr>
                            <td><button class="operate" onclick="showNumber(this)">(</button></td>
                            <td><button class="operate" onclick="showNumber(this)">)</button></td>
                            <td><button class="operate" onclick="clearOneResult()">←</button></td>
                            <td><button class="operate" onclick="clearResult()">C</button></td>
                        </tr>
                        <tr>
                            <td><button class="calculate" onclick="showNumber(this)">7</button></td>
                            <td><button class="calculate" onclick="showNumber(this)">8</button></td>
                            <td><button class="calculate" onclick="showNumber(this)">9</button></td>
                            <td><button class="operate" onclick="showNumber(this)">*</button></td>
                        </tr>
                        <tr>
                            <td><button class="calculate" onclick="showNumber(this)">4</button></td>
                            <td><button class="calculate" onclick="showNumber(this)">5</button></td>
                            <td><button class="calculate" onclick="showNumber(this)">6</button></td>
                            <td><button class="operate" onclick="showNumber(this)">-</button></td>
                        </tr>
                        <tr>
                            <td><button class="calculate" onclick="showNumber(this)">1</button></td>
                            <td><button class="calculate" onclick="showNumber(this)">2</button></td>
                            <td><button class="calculate" onclick="showNumber(this)">3</button></td>
                            <td><button class="operate" onclick="showNumber(this)">+</button></td>
                        </tr>
                        <tr>
                            <td><button class="calculate" onclick="showNumber(this)">0</button></td>
                            <td><button class="calculate" onclick="showNumber(this)">.</button></td>
                            <td><button class="operate" onclick="showNumber(this)">/</button></td>
                            <td><button class="operate" onclick="showAnswer()">=</button></td>
                        </tr>
                    </tbody>         
                </table>
            </div>
        </body>
    </html>
    

    .css文件

    table{
        margin: 20px;
        padding: 1px;
    }
    
    th,input{
        height: 120px;
        width: 410px;
        background-color:rgb(233, 232, 232);
        text-align: right;
        font-size: 40px;
    }
    
    
    button{
        height: 100px;
        width: 100px;
        padding: 0px;
        font-size: 30px;
    }
    
    th,input,td,button{
        border: 0px;
    }
    
    .calculate{
        background-color: rgb(231, 231, 235);
    }
    
    .operate{
        color: coral;
    }
    
    button:hover{
        background-color: rgb(147, 241, 253);
    }
    

    .js文件

    
    var result = new Array();
    var ops = "+-*/";
    
    function arrToStr(arr) {
        var strResult = "";
        for (var i = 0; i < arr.length; i++) {
            strResult += arr[i];
        }
        return strResult;
    }
    
    
    function showResult() {
        document.getElementById("result").value = arrToStr(result);
    }
    
    
    function showNumber(id) {
        var val = id.innerHTML;
        result.push(val);
        showResult();
    }
    
    
    function showAnswer() {
    
        var answer = "";
        var str = arrToStr(result);
    
        var midExpre = strToExpress(str);
        var suffixExpre = midToSuffix(midExpre);
        answer = suffixValue(suffixExpre);
    
        //console.log(midExpre);
        //console.log(suffixExpre);
    
        document.getElementById("result").value = str + "=" + answer;
    
    }
    
    
    function clearResult() {
        result = [];
        showResult();
    }
    
    
    function clearOneResult() {
        result.pop();
        showResult();
    }
    
    
    
    function strToExpress(str) {
    
        var textArr = str.split('');
        var newTextArr = [];
        var calTextArr = [];
    
        for (var i = 0; i < str.length; i++) {
            if (ops.indexOf(str[i]) != -1  ) {
            
                newTextArr.push("|", str[i], "|");
            }
            else if (str[i] == '('){
                newTextArr.push(str[i], "|");
            }
            else if (str[i] == ')'){
                newTextArr.push("|", str[i]);
            }
            else {
                newTextArr.push(textArr[i]);
            }
        }
    
        calTextArr = newTextArr.join('').split('|');
    
        return calTextArr;
    }
    
    
    function midToSuffix(midExpre) {
    
        var opStack = [];
        var suffixExpre = [];
    
        for (var i = 0; i < midExpre.length; i++) {
    
            if (ops.indexOf(midExpre[i]) != -1 || midExpre[i] == '(' || midExpre[i] == ')' ) {
    
                if (midExpre[i] == '(' || opStack[opStack.length - 1] == '(') {
                    opStack.push(midExpre[i]);
                }
    
                else if (midExpre[i] == ')') {
                    do {
                        suffixExpre.push(opStack.pop());
                    } while (opStack[opStack.length - 1] != '(');
                    opStack.pop();
                }
                else if (opStack.length == 0 || Priority(midExpre[i]) > Priority(opStack[opStack.length - 1])) {
                    opStack.push(midExpre[i]);
                }
                else {
                    do {
                        suffixExpre.push(opStack.pop());
                    } while (opStack.length > 0 && Priority(midExpre[i]) <= Priority(opStack[opStack.length - 1]));
    
                    opStack.push(midExpre[i]);
                }
            }
    
            else {
                suffixExpre.push(midExpre[i]);
            }
        }
    
        while (opStack.length > 0) {
            suffixExpre.push(opStack.pop());
        }
    
        return suffixExpre;
    }
    
    function Priority(op) {
        var opPri = 0;
        switch (op) {
            case "+":
                opPri = 1;
                break;
            case "-":
                opPri = 1;
                break;
            case "*":
                opPri = 2;
                break;
            case "/":
                opPri = 2;
                break;
    
        }
        return opPri;
    }
    
    function suffixValue(suffixExpre) {
        var calStack = [];
    
        console.log(suffixExpre);
        for (var i = 0; i < suffixExpre.length; i++) {
            if (ops.indexOf(suffixExpre[i]) != -1) {
                var opRight = Number(calStack.pop());
                var opLeft = Number(calStack.pop());
                var tmpResult = 0;
                switch (suffixExpre[i]) {
                    case '+':
                        tmpResult = opLeft + opRight;
                        break;
                    case '-':
                        tmpResult = opLeft - opRight;
                        break;
                    case '*':
                        tmpResult = opLeft * opRight;
                        break;
                    case '/':
                        tmpResult = opLeft / opRight;
                        break;
                }
                calStack.push(tmpResult);
            }
            else {
                calStack.push(suffixExpre[i]);
            }
    
            console.log(calStack);
        }
    
        return calStack.pop();
    }
    
    展开全文
  • jQuery/javascript实现简单网页计算器 1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>jQuery实现</title> 5 <script src="jquery.js"><...

    jQuery/javascript实现简单网页计算器

     1 <html>
     2 <head>
     3 <meta charset="utf-8">
     4 <title>jQuery实现</title>
     5 <script src="jquery.js"></script>
     6 
     7 <style type="text/css">
     8     table{background-color:pink;width:300px;height:200px;}
     9     td{text-align:center;}
    10 </style>
    11 
    12 <script language="javascript">
    13     $("document").ready(function(){
    14         $("#b1").click(function(){
    15             var num1=$("#num1").val();
    16             var num2=$("#num2").val();
    17             var num3=eval(num1)+eval(num2);
    18             $("#num3").val(num3);
    19             
    20         });
    21         
    22         $("#b2").click(function(){
    23             var num1=$("#num1").val();
    24             var num2=$("#num2").val();
    25             var num3=eval(num1)-eval(num2);
    26             $("#num3").val(num3);
    27         });
    28         
    29         $("#b3").click(function(){
    30             var num1=$("#num1").val();
    31             var num2=$("#num2").val();
    32             var num3=eval(num1)*eval(num2);
    33             $("#num3").val(num3);
    34         });
    35         
    36         $("#b4").click(function(){
    37             var num1=$("#num1").val();
    38             var num2=$("#num2").val();
    39             var num3=eval(num1)/eval(num2);
    40             $("#num3").val(num3);
    41         });
    42     });
    43 </script>
    44 </head>
    45 <body>
    46 <center>
    47 <form action="" method="post">
    48     <table border="1px">
    49         <tr>
    50             <td>数字1:</td>
    51             <td><input type="text" id="num1"/></td>
    52         </tr>
    53         <tr>
    54             <td>数字2:</td>
    55             <td><input type="text" id="num2"/></td>
    56         </tr>
    57         <tr>
    58             <td>结果:</td>
    59             <td><input type="text" id="num3"/></td>
    60         </tr>
    61         <tr>
    62             <td colspan="4">
    63                 <input type="button" value="加" id="b1"/>
    64                 <input type="button" value="减" id="b2"/>
    65                 <input type="button" value="乘" id="b3"/>
    66                 <input type="button" value="除" id="b4"/>    
    67             </td>
    68         </tr>
    69     </table>
    70 </form>
    71 <center>
    72 </body>
    73 </html>

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>九九乘法表</title>        
        <style type="text/css">
            table{
                background-color:pink;
                color:red;
            }
        </style>
    </head>
    <body>
        <h1>计算器</h1>
        <table border="1" align="center">    
            <tr>
                <td>数值1:<input type="text" name="num1" id="num1"/></td>
            </tr>
            <tr>
                <td>数值2:<input type="text" name="num2" id="num2"/></td>
            </tr>
            <tr>
                <td>结&nbsp;&nbsp;果:<input type="text" name="num3" id="num3"/></td>
            </tr>
            <tr>
                <td colspan="4"><input type="button" value="加法" style="color:blue;" οnclick="add()"/>
                <input type="button" value="减法" style="color:blue;" οnclick="reduce()"/>
                <input type="button" value="乘法" style="color:blue;" οnclick="multiplication()"/>
                <input type="button" value="除法" style="color:blue;" οnclick="division()"/>
                </td>    
            </tr>
                
        </table>
        <script language="javascript">
            function add(){
                var num1=document.getElementById("num1").value;
                var num2=document.getElementById("num2").value;
                if(parseInt(num1)==num1){
                    var num1=parseInt(num1);
                }else{
                    var num1=parseFloat(num1);
                    num1=parseFloat(num1.toFixed(2));
                }
                if(parseInt(num2)==num2){
                    var num2=parseInt(num2);
                }else{
                    var num2=parseFloat(num2);
                    num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/
                }
                document.getElementById("num3").value=num1+num2;
            }
            function reduce(){
                var num1=document.getElementById("num1").value;
                var num2=document.getElementById("num2").value;
                if(parseInt(num1)==num1){
                    var num1=parseInt(num1);
                }else{
                    var num1=parseFloat(num1);
                    num1=parseFloat(num1.toFixed(2));
                }
                if(parseInt(num2)==num2){
                    var num2=parseInt(num2);
                }else{
                    var num2=parseFloat(num2);
                    num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/
                }
                document.getElementById("num3").value=num1-num2;
            }
            function multiplication(){
                var num1=document.getElementById("num1").value;
                var num2=document.getElementById("num2").value;
                if(parseInt(num1)==num1){
                    var num1=parseInt(num1);
                }else{
                    var num1=parseFloat(num1);
                    num1=parseFloat(num1.toFixed(2));
                }
                if(parseInt(num2)==num2){
                    var num2=parseInt(num2);
                }else{
                    var num2=parseFloat(num2);
                    num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/
                }
                document.getElementById("num3").value=num1*num2;
            }
            function division(){
                var num1=document.getElementById("num1").value;
                var num2=document.getElementById("num2").value;
                if(parseInt(num1)==num1){
                    var num1=parseInt(num1);
                }else{
                    var num1=parseFloat(num1);
                    num1=parseFloat(num1.toFixed(2));
                }
                if(parseInt(num2)==num2){
                    var num2=parseInt(num2);
                }else{
                    var num2=parseFloat(num2);
                    num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/
                }
                document.getElementById("num3").value=num1/num2;
            }
        </script>
    </body>
    </html>

    posted @ 2016-09-28 14:15 别先生 阅读( ...) 评论( ...) 编辑 收藏
    展开全文
  • BMI指数计算器相信大家都用过,那用JavaScript怎么实现呢?其实很简单,这篇文章给出了实例代码,有需要的可以参考学习。
  • 这是一个简易网页计算器,利用HTML5,、CSS3、JavaScript实现计算器的基本功能。
  • JavaScript简易网页计算器 带时间显示功能的网页计算器,显示效果如图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>calculator</title> <...
  • 主要介绍了基于html+css+js实现简易计算器代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 主要介绍了js实现模拟计算器退格键删除文字效果的方法,涉及javascript字符串截取操作的相关技巧,需要的朋友可以参考下
  • 主要介绍了javascript实现简单的可随机变色网页计算器,具有基本的四则运算与背景色随机变换功能,需要的朋友可以参考下
  • 网络上的html+js计算器大多是两个数字加一个运算符,不能实现输入长算式,这恰好是我学习中的一个任务,我就对长算式计算进行了js语言的简单实现。 页面部分十分简单,因为我的任务主要是后端开发: <body> ...
  • js实现简单计算器

    2020-10-23 07:03:58
    一个简洁的网页JS计算器,附...通过下边的效果演示就可以看到,这是一个挺小的js网页计算器,界面美化的我想还是不错的,毕竟在没有使用任何图片修饰的情况下,很好看,而且功能挺实用,可以完成基本的数学算数运算。
  • 计算器实现都功能: 回退:“”具有回退功能 基本的加减乘除及求余运算 换号:实现符号的转变。 求倒数运算: 求幂运算:
  • 介绍了网页计算器简单实现代码,有需要的朋友可以参考一下
  • 本文实例讲述了JavaScript实现简单的四则运算计算器。分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
  • JavaScript + HTML的表格 实现简单计算器 首先看效果图 有点小bug,就是点击表格外会把不想出现的东西显现到input里 一,写出HTML的主体布局 <body> <div id="main" οnclick="cal(event);"> <...
  • 能够实现简单的加、减、乘、除、求余计算,可以进行带小数点和正负数的计算,C为清零按钮,CE为退格按钮。 界面截图: 页面布局代码: 计算器 table tr td{width:100px; height:60px; text-...
  • 鼠标点击按钮或者键盘按键都可实现!!!(话不多说,直接上源码) 计算器 简单计算器 ...
  • 使用JS实现一个简易计算器

    千次阅读 2019-10-14 14:39:03
    简易计算器: 只实现了加减乘除功能 效果如下: 实现代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>简易计算器</title> <script ...
  • 本文实例为大家分享了js制作简易计算器的具体代码,供大家参考,具体内容如下 <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { padding: 0; ...
  • 下面小编就为大家带来一篇超级简易JS计算器实例讲解(实现加减乘除)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 原生JavaScript实现简易计算器

    万次阅读 多人点赞 2016-11-29 20:54:48
    昨天晚上用JavaScript实现了一个简易计算器 今天分享给大家没有考虑什么兼容,浏览器为chrome 代码我放在了我的github上 大家可以前往下载 传送门 或者复制我下面展示的代码这个计算器长成这个样子(43

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,163
精华内容 1,665
关键字:

js实现简单网页计算器