<!doctype html>

<html>

    <head>

        <!--声明当前页面的编码集-->

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>计算器</title>

        <!-- 关键字和描述是用在像百度搜索之类的搜索的引擎上的 -->

        <meta name="keywords" content="计算器" />

        <meta name="description" content="基于java开发的计算器的百度轻应用" />

        <!-- css/js -->

        <!-- css层叠样式表 -->

        <!-- class=.cac这里的高度height:460px;是需要去掉的, 将高度固定了, 再在div里面添加东西的时候会露出在外面 -->

        <style type="text/css">

            *{margin:0px;padding:0px}

            body{background:#e2e2e2;font-size:12px;font-family:"verdana";}

            /*cac start*/

            .cac{width:830px;background:#f2f2f2;margin:40px auto;padding:10px}

            .cac .c_title{font-family:"仿宋";padding:10px 0px 10px 10px;font-size:24px;color:#000;cursor:move;}

            /* 控制输入框里面的字体 */

            .cac .c_show .c_txt{width:810px;height:42px;border:none;outline:none;font-size:34px;font-family:"verdana";color:#999;line-height:42px;text-align:right;padding-right:20px;}

            .cac .c_key ul{border:1px solid snow;margin:14px 0;}

            .cac .c_key ul li{border:1px solid snow;list-style:none;width:140px;height:65px;background:#e2e2e2;float:left;font-size:32px;text-align:center;margin:11px;line-height:65px;cursor:pointer;}

            .cac .c_key ul li:hover{background:snow;}

            .cac .c_key .c_tools{background:#738fd8;}

            .cac .c_key .c_equ{background:#f90;}

            /*cac end*/

            .clear{clear:both;}

        </style>

    </head>

<body>

    <!-- cac start -->

    <div class="cac">

        <div class="c_title">计算器</div>

        <div class="c_show">

            <input id="c_result" type="text" class="c_txt" value="0" onfocus="this.blur()"/>

        </div>

        <div class="c_key">

            <ul>

                <li onclick="command(7);">7</li>

                <li onclick="command(8);">8</li>

                <li onclick="command(9);">9</li>

                <li class="c_tools" onclick="backspace('j')">←</li>

                <li class="c_tools" onclick="clearzero();">C</li>

                <li onclick="command(4);">4</li>

                <li onclick="command(5);">5</li>

                <li onclick="command(6);">6</li>

                <li class="c_tools" onclick="tools('*','g');">×</li>

                <li class="c_tools" onclick="tools('/','g');">÷</li>

                <li onclick="command(1);">1</li>

                <li onclick="command(2);">2</li>

                <li onclick="command(3);">3</li>

                <li class="c_tools" onclick="tools('+','g');">＋</li>

                <li class="c_tools" onclick="tools('-','g');">－</li>

                <li onclick="command(0);">0</li>

                <li onclick="command('00');">00</li>

                <li onclick="dot('g');">.</li>

                <li class="c_tools" onclick="tools('%','g');">%</li>

                <li class="c_equ" onclick="equ('j');">＝</li>

                <!-- 哪里浮动在哪里清除 -->

                <div class="clear"></div>

            </ul>

        </div>

        <div class="c_welcome">欢迎使用计算器</div>

    </div>

    <!-- cac end -->

    <br>

    <div id="audDom"></div>

<script type="text/javascript">

    //运算的代码, 获取输入框的内容

    var resultDom = document.getElementById("c_result");

    //操作符加锁

    var operate = true;

    var xop = true;

    var afequ = true;

    //点击播放声音

    function command(num) {

        //点击等号之后要进行一次清空

        if(!afequ) {

            clearzero();

        }

        //获取输入框中value的值

        var str = resultDom.value;

        //在这里加一个判断, 如果第一位是0, 就用""填充

        str = str=="0"?"":str;

        //拼接数字, 然后赋值给文本框

        str+=num;

        resultDom.value = str;

        //锁住操作符

        operate = true;

        //播放音效

        play(num);

    }

    //点击小数点

    function dot(m) {

        //点击等号之后要进行一次清空

        if(!afequ) {

            clearzero();

        }

        if(xop) {

            var num = resultDom.value;

            num = num + ".";

            resultDom.value = num;

            xop = false;

        }

        play(m);

    }

    //点击操作符的方法, m相当于num

    function tools(op,m) {

        //点击等号之后要进行一次清空

        if(!afequ) {

            afequ = true;

        }

        if(operate) {

            var num = resultDom.value;

            num = (num=="0"?"":num);

            //拼接操作符

            resultDom.value = num + op;

            operate = false;

            xop = true;

        }

        //播放音效

        play(m);

    }

    //点击等号, 计算等号

    function equ(m) {

        play(m);

        var result = resultDom.value;

        var r = eval(result);

        resultDom.value = r;

        operate = true;

        var r = resultDom.value;

        afequ = false;

        xop = r.indexof(".")==-1?true:false;

    }

    //清空

    function clearzero() {

        resultDom.value = 0;

        operate = true;

        xop = true;

        afequ = true;

    }

    //退格键的实现

    function backspace(m) {

        play(m);

        if(resultDom.value==0) {

            operate = true;

            xop = true;

        }

        else if(resultDom.value!=0) {

            var str = resultDom.value;

            var str1 = str.substring(0,str.length-1);

            resultDom.value = (str1==""?0:str1);

        }

    }

    //播放音效

    function play(num) {

        var adDom = document.getElementById("audDom");

        //用参数来组合src的地址

        adDom.innerHTML = "<embed src='wav/"+num+".wav' width='0' height='0'></embed>";

    }

</script>

</body>

</html>

音频文件的截图

利用css和javascript实现简单的计算器的更多相关文章

  1. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  2. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  3. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  4. JavaScript+HTML,简单的计算器实现

    成功进化到程序猿快一年多了, 还没写过计算器, 正好今天比较闲,随手写了个计算器,最简单的实现,核心是eval()方法,把字符串作为JS代码处理,把输入的信息拼接成字符串,点等号执行代码得到结果,出异 ...

  5. 用JavaScript制作简单的计算器

    <html > <head> <title>简单计算器</title> <style type="text/css"> ...

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

    <html> <head> <meta charset="utf-8"> <title>jQuery实现</title> ...

  7. 一起学HTML基础-利用CSS和JavaScript制作一个切换图片的网页

    由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...

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

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  9. JAVASCRIPT实现简单计算器

    最终效果如下图-2,有bug:就是整数后点击%号结果正确,如果小数后面点击%的话结果就错误!其他都正常,求指点:input的value是string类型的,在JS中改如何正确处理下图-1中的if部分? ...

随机推荐

  1. HTTP发包工具 －HTTPie

    原文: https://zm8.sm-tc.cn/?src=l4uLj8XQ0IuekZWWi5bRk5CZi5qN0ZyQktCPkIyL0M6cnMmcx8qdoM7PnMrIyMnI&u ...

  2. 原创）CentOS6.4下安装xampp（一定要在linux上下载）

    一.xampp下载地址: http://sourceforge.net/projects/xampp/files/XAMPP%20Linux/1.8.3/ 二.我下载的是xampp-linux-x64 ...

  3. mysql存储过程的参数名不要跟字段名一样 （血淋淋的代价）

    如题,将会导致的结果就是参数的值将不会是你传入的值,而是变成每条记录的那个字段的值. 这样的后果,是灰常严重的.比如执行删除操作,它能把整个表的记录全删了. 这个是我的血淋淋的代价啊. 死坑如下,勿跳 ...

  4. 显示器如何显示一个YUV422格式的图形

    记录在开发过程中对知识点的一些理解: 在开发渲染程序的过程中,需要对视屏文件进行解码解码后特效文件的叠加,使用的技术是(FFmpeg+DirectX) 解码出来的视屏数据格式是YUYV,使用Direc ...

  5. php mysql_db_query()函数使用介绍

    php mysql_db_query()函数选择一个数据库并在其上执行查询,本文章向大家介绍mysql_db_query()函数的基本使用方法和实例,需要的朋友可以参考一下本文章. mysql_db_ ...

  6. 解决npm下载包失败的问题

    在我朝,用npm直接从官方的镜像下载包,经常会出现网络超时下载失败的问题,具体原因大家都懂,我就不说了. 不过,这些都无法阻挡我们对知识的渴望,一下提供几种我在工作中的解决办法,希望能帮助你. 1.安 ...

  7. 转化Excel表格为php配置文件

    <?php     //建立reader对象 ,分别用两个不同的类对象读取2007和2003版本的excel文件    require("PHPExcel/Reader/Excel20 ...

  8. javascript变量作用域 — 全局变量

    javascript中,如果没有用var 声明一个变量,则该变量会被自动创建在全局作用域中,即使你是在某个函数中创建的,它也会成为全局变量,从而可以被另一个函数调用.

  9. Mysql-事务,原子性操作

    事物分为 自动(默认的)和手动(需开启事务)两种 -- 事务 start transaction; -- commite; 提交事务 -- rollback; 回滚事务 create table if ...

  10. 练习Laravel Homestead的安装

    1 安装VirtualBox和Vagrant 在启动Homestead环境之前,你必须安装VirtualBox(https://www.virtualbox.org/wiki/Downloads)和V ...