1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <!--声明当前页面的编码集-->
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6.         <title>计算器</title>
  7.         <!-- 关键字和描述是用在像百度搜索之类的搜索的引擎上的 -->
  8.         <meta name="keywords" content="计算器" />
  9.         <meta name="description" content="基于java开发的计算器的百度轻应用" />
  10.         <!-- css/js -->
  11.         <!-- css层叠样式表 -->
  12.         <!-- class=.cac这里的高度height:460px;是需要去掉的, 将高度固定了, 再在div里面添加东西的时候会露出在外面 -->
  13.  
  14.         <style type="text/css">
  15.             *{margin:0px;padding:0px}
  16.             body{background:#e2e2e2;font-size:12px;font-family:"verdana";}
  17.  
  18.             /*cac start*/
  19.             .cac{width:830px;background:#f2f2f2;margin:40px auto;padding:10px}
  20.             .cac .c_title{font-family:"仿宋";padding:10px 0px 10px 10px;font-size:24px;color:#000;cursor:move;}
  21.             /* 控制输入框里面的字体 */
  22.             .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;}
  23.             .cac .c_key ul{border:1px solid snow;margin:14px 0;}
  24.             .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;}
  25.             .cac .c_key ul li:hover{background:snow;}
  26.             .cac .c_key .c_tools{background:#738fd8;}
  27.             .cac .c_key .c_equ{background:#f90;}
  28.             /*cac end*/
  29.  
  30.             .clear{clear:both;}
  31.         </style>
  32.     </head>
  33. <body>
  34.  
  35.     <!-- cac start -->
  36.     <div class="cac">
  37.         <div class="c_title">计算器</div>
  38.         <div class="c_show">
  39.             <input id="c_result" type="text" class="c_txt" value="0" onfocus="this.blur()"/>
  40.         </div>
  41.         <div class="c_key">
  42.             <ul>
  43.                 <li onclick="command(7);">7</li>
  44.                 <li onclick="command(8);">8</li>
  45.                 <li onclick="command(9);">9</li>
  46.                 <li class="c_tools" onclick="backspace('j')">←</li>
  47.                 <li class="c_tools" onclick="clearzero();">C</li>
  48.                 <li onclick="command(4);">4</li>
  49.                 <li onclick="command(5);">5</li>
  50.                 <li onclick="command(6);">6</li>
  51.                 <li class="c_tools" onclick="tools('*','g');">×</li>
  52.                 <li class="c_tools" onclick="tools('/','g');">÷</li>
  53.                 <li onclick="command(1);">1</li>
  54.                 <li onclick="command(2);">2</li>
  55.                 <li onclick="command(3);">3</li>
  56.                 <li class="c_tools" onclick="tools('+','g');">＋</li>
  57.                 <li class="c_tools" onclick="tools('-','g');">－</li>
  58.                 <li onclick="command(0);">0</li>
  59.                 <li onclick="command('00');">00</li>
  60.                 <li onclick="dot('g');">.</li>
  61.                 <li class="c_tools" onclick="tools('%','g');">%</li>
  62.                 <li class="c_equ" onclick="equ('j');">＝</li>
  63.                 <!-- 哪里浮动在哪里清除 -->
  64.                 <div class="clear"></div>
  65.             </ul>
  66.         </div>
  67.         <div class="c_welcome">欢迎使用计算器</div>
  68.     </div>
  69.     <!-- cac end -->
  70.  
  71.     <br>
  72.     <div id="audDom"></div>
  73.  
  74. <script type="text/javascript">
  75.     //运算的代码, 获取输入框的内容
  76.     var resultDom = document.getElementById("c_result");
  77.     //操作符加锁
  78.     var operate = true;
  79.     var xop = true;
  80.     var afequ = true;
  81.  
  82.     //点击播放声音
  83.     function command(num) {
  84.         //点击等号之后要进行一次清空
  85.         if(!afequ) {
  86.             clearzero();
  87.         }
  88.         //获取输入框中value的值
  89.         var str = resultDom.value;
  90.         //在这里加一个判断, 如果第一位是0, 就用""填充
  91.         str = str=="0"?"":str;
  92.         //拼接数字, 然后赋值给文本框
  93.         str+=num;
  94.         resultDom.value = str;
  95.         //锁住操作符
  96.         operate = true;
  97.         //播放音效
  98.         play(num);
  99.     }
  100.  
  101.     //点击小数点
  102.     function dot(m) {
  103.         //点击等号之后要进行一次清空
  104.         if(!afequ) {
  105.             clearzero();
  106.         }
  107.         if(xop) {
  108.             var num = resultDom.value;
  109.             num = num + ".";
  110.             resultDom.value = num;
  111.             xop = false;
  112.         }
  113.         play(m);
  114.     }
  115.  
  116.     //点击操作符的方法, m相当于num
  117.     function tools(op,m) {
  118.         //点击等号之后要进行一次清空
  119.         if(!afequ) {
  120.             afequ = true;
  121.         }
  122.         if(operate) {
  123.             var num = resultDom.value;
  124.             num = (num=="0"?"":num);
  125.             //拼接操作符
  126.             resultDom.value = num + op;
  127.             operate = false;
  128.             xop = true;
  129.         }
  130.         //播放音效
  131.         play(m);
  132.     }
  133.  
  134.     //点击等号, 计算等号
  135.     function equ(m) {
  136.         play(m);
  137.         var result = resultDom.value;
  138.         var r = eval(result);
  139.         resultDom.value = r;
  140.         operate = true;
  141.         var r = resultDom.value;
  142.         afequ = false;
  143.         xop = r.indexof(".")==-1?true:false;
  144.     }
  145.  
  146.     //清空
  147.     function clearzero() {
  148.         resultDom.value = 0;
  149.         operate = true;
  150.         xop = true;
  151.         afequ = true;
  152.     }
  153.  
  154.     //退格键的实现
  155.     function backspace(m) {
  156.         play(m);
  157.         if(resultDom.value==0) {
  158.             operate = true;
  159.             xop = true;
  160.         }
  161.         else if(resultDom.value!=0) {
  162.             var str = resultDom.value;
  163.             var str1 = str.substring(0,str.length-1);
  164.             resultDom.value = (str1==""?0:str1);
  165.         }
  166.     }
  167.  
  168.     //播放音效
  169.     function play(num) {
  170.         var adDom = document.getElementById("audDom");
  171.         //用参数来组合src的地址
  172.         adDom.innerHTML = "<embed src='wav/"+num+".wav' width='0' height='0'></embed>";
  173.     }
  174. </script>
  175.  
  176. </body>
  177. </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. ThinkJava-持有对象

    11.3 添加一组元素 在java.util包中的Arrays和Collection类中都有很多实用方讼,可以在一个Collection中添加 一组元素.Arrays.asList()方法接受一个数组 ...

  2. Kong管理UI -kong-dashboard (附kong封装webservice方法)

    本文仍然是在centos 6.7的环境下进行                 本文转载请注明出处 —— xiaoEight btw如果要正常使用管理UI,前提为kong已经正常run(可参考)起来,此 ...

  3. 垃圾收集器之：G1收集器

    G1垃圾收集器是一种工作在堆内不同分区上的并发收集器.分区既可以归属于老年代,也可以归属新生代,同一个代的分区不需要保持连续.为老年代设计分区的初衷是我们发现并发后台线程在回收老年代中没有引用的对象时 ...

  4. 针对ROS5版本的配置导出和导入（迁移其他服务器）

    1.在老ROS,导出当前系统配置export compact RouterOS 5.12 新增功能 export compact 命令,该命令简化了导出的参数,仅导出修改的配置,系统默 认配置参数将不 ...

  5. [UE4]添加蒙太奇动画

    选择蒙太奇所使用的骨骼

  6. js将UTC时间转化为当地时区时间

    js将UTC时间转化为当地时区时间(UTC转GMT)   我们在进行网站开发的时候有可能会涉及到国外的用户或者用户身在国外,这时就会存在时差问题,比如说我们在中国的时间是08:00,但是此时韩国的时间 ...

  7. linux进程与线程的区别【转】

    知乎上总结: "linux使用的1:1的线程模型,在内核中是不区分线程和进程的,都是可运行的任务而已.fork调用clone(最少的共享),pthread_create也是调用clone(最 ...

  8. 用docker搭建php+nginx+laravel的开发环境

    制作镜像 由于官方php:7.2.2-fpm-alpine3.7 镜像不含composer,而单独做一个composer镜像又会依赖php镜像,所以应该在php镜像中添加composer.Docker ...

  9. php 学习笔记 设计和管理

    代码管理 文件路径.数据库名.密码禁止 hard coded 避免重复代码在多个页面复制粘贴 Gang of Four eXtreme Programming 的主要原则是坚决主张测试是项目成功的关键 ...

  10. jmeter测试20个QPS下的响应时间-设置QPS限制

    添加--->定时器--->Constant Throughput Timer Constant Throughput Timer 的主要属性介绍: 名称:定时器的名称 Target thr ...