原生JS实现简易计算器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易计算器</title>
<style>
    #div{
        width: 300px;
        height: 500px;
        background: #ccc;
        margin: auto;
        border: 1px solid red;
    }
    table{
        width: 97%;
        height: 480px;
        border: 1;
        align:center;
        cellspacing:"10"
    }
    td{
        width: 26%;
        height: auto;
        border: 1px solid red;
        text-align: center;
        font-weight: bold;
        color: blue;
    }
</style>
<script>
    var tds = null;   //定义一个空的全局对象
    var jg = null,
        dy = null,
        tg = null;
    window.onload = function(){   //因为以后都是外部引用JS文件,因为程序加载执行顺序的问题,设置一个文档加载完成后调用方法的事件
        tds = document.getElementsByTagName("td");  //找到所有的对象
        jg = document.getElementById("jg");
        dy = document.getElementById("dy");
        tg = document.getElementById("tg");
        addEvent();   //文档加载完成后调用这个方法
    }
    function addEvent(){
        for(var i = 0 ;i<tds.length;i++){    //循环下标用来找出所有的单元格
            var zhi = tds[i].getAttribute("id");  //找出带id属性的单元格
            if(zhi){   //当本次循环有带id属性的
                continue;  //那么跳过本次循环
            }
            tds[i].onclick = function(){   //后给这个单元格添加点击事件并调用方法
                jg.innerHTML += this.innerHTML;  //此处用到字符串拼接的方法  每点击一次和上一次的字符串拼接(用来作为下边的计算)
            } 

        }
        //给等于号添加点击事件
        dy.onclick = function(){ //当点击等于号的时候
            jg.innerHTML = eval(jg.innerHTML);  //结果显示在HTML文档中并赋值(eval()函数会将字符串转换为JavaScript代码执行)
        }
        //当点击退格的时候调用这个函数
        tg.onclick = function(){
            var str = jg.innerHTML;   //找到在结果显示中的字符串
            jg.innerHTML = str.substr(0,str.length-1); //赋值(substr()这个是字符串方法,用来截取(保留)从0到倒数第二个,也就是当每次点击的时候会退一格)
        }
    }

</script>
</head>

<body>
<!--在div里面创建一个表格用来作为计算器的按键使用-->
<div id="div">  <!--这个id用来设置计算器面板的样式-->
    <table>
        <tr>
            <td colspan="3" id="jg"></td>   <!--这里作为显示使用-->
            <td id="tg">退格</td>   <!--加退格功能-->
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>/</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>+</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>-</td>
        </tr>
        <tr>
            <td>.</td>
            <td>0</td>
            <td id="dy">=</td>  <!--准备给等于号单独设置点击事件并调用方法-->
            <td>*</td>
        </tr>
    </table>
</div>

</body>
</html>

原文地址:https://www.cnblogs.com/lsqbk/p/10258978.html

时间: 2024-10-12 01:14:18

原生JS实现简易计算器的相关文章

使用html+css+js实现简易计算器

使用html+css+js实现简易计算器, 效果图如下: html代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6

原生JS实现简易轮播图

原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = function() { var tab = 0; var loop_imgs = new Array("img/l1.jpg", "img/l2.jpg", "img/l3.jpg", "img/l4.jpg", "img/l5

js制作简易计算器(-)

前言:初学js,老师要求做一个简易计算器,目前只实现了能够计算,很多约束没有有做,待完善.仅作为自己的学习记录. <!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>简易计算器<

js之简易计算器

####闲来无事,写点小东西给初学者,下面是一个简易的计算器,我们来看具体的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易计算器</title> <style> div{ height: 100px; margin: 200px 350px; } </style> &

利用css+原生js制作简易钟表

利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet' h

JS编写简易计算器

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> function add(){ var a=parseInt(document.getElementById(&quo

原生JS实现简易转盘抽奖

我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述HTML与CSS,而JS基本每行都有注释,但这里CSS 也是起到了至关重要的一步,那就是控制背景色,以及结果的显示与隐藏,效果先给出,如下: 代码给出: <!DOCTYPE html> <html lang="zh"> <head> <meta ch

html、css、js实现简易计算器

学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需要留下些东西供自己日后回忆,于是写下这篇随笔:因第一次写博客,不知道怎么上传源代码,也不知道怎么在博客页面实现计算效果. 下面是完成后计算器页面: 该计算器只是实现了简易的计算功能,很多其他功能没有实现,如运算的优先级功能,在后面的学习中再慢慢改进吧! 因计算器布局比较规整,故用table表格布局,

原生js实现简易ATM功能

简易ATM 题目描述: 里面现存100块钱. 如果存钱,就用输入的钱数加上先群的钱,然后弹出余额. 如果取钱,就减去取的钱,然后显示余额. 如果显示余额,就显示余额. 如果退出,就进行判断再退出. <script> var money = 100; var moneySum = 0; var num = parseInt(prompt('请输入你的操作:' + '\n' + '1.存钱' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出'));;