原生js开发简易语音发声的计算器

news/2024/7/10 23:03:14 标签: jquery, 数学, javascript, 计算器, 艳辉网

这里写图片描述
前言:由于数学比较烂,只懂导数与微分,也正在研究半球几何,对于涉及到RMB的计算总怕算错几个小数点,于是使用简易的js开发计算器,这里并没有高精度的计算,还需优化。也没有运用到高大上的jquery。。。

<h1>js实现简单计算器</h1>

        <div id="calculator" class="calculator">

          <button id="clear" class="clear" onclick="cleart('g')">C</button>

          <div id="viewer" class="viewer">0</div>

          <button class="num" data-num="7" onclick="command(7)">7</button>
          <button class="num" data-num="8" onclick="command(8)">8</button>
          <button class="num" data-num="9" onclick="command(9)">9</button>
          <button data-ops="加上" class="ops" onclick="tools('+','g')">+</button>

          <button class="num" data-num="4" onclick="command(4)">4</button>
          <button class="num" data-num="5" onclick="command(5)">5</button>
          <button class="num" data-num="6" onclick="command(6)">6</button>
          <button data-ops="减去" class="ops" onclick="tools('-','g')">-</button>

          <button class="num" data-num="1" onclick="command(1)">1</button>
          <button class="num" data-num="2" onclick="command(2)">2</button>
          <button class="num" data-num="3" onclick="command(3)">3</button>
          <button data-ops="乘以" class="ops" onclick="tools('*','g')">*</button>

          <button class="num" data-num="0" onclick="command(0)">0</button>
          <button class="num" data-num="." onclick="command('.')">.</button>
          <button id="equals" class="equals" data-result="" onclick="equal('g')">=</button>
          <button data-ops="除以" class="ops" onclick="tools('/','g')">/</button>
        </div>

        <!-- <button id="reset" class="reset">Reset Universe?</button> -->

    <!-- <script src="js/calculator.js" type="text/javascript"></script> -->

    <div id="audioBox"></div>
        <script>javascript">
            var resultDom = document.getElementById("viewer");

            var operate = true;
            var xop = true;
            //点击计算机键盘
            function command(num){
                var str = resultDom.innerHTML;
                str = (str=="0"?"":str);
                str+=num;
                //resultDom.value = str;
                resultDom.innerHTML = str;
                play(num);
            }

            //计算
            function equal(m){
                play(m);
                var result = resultDom.innerHTML;
                var r = eval(result);
                resultDom.innerHTML = r;
                operate = true;
                //var r = 
            }

            //播放键盘声音
            function play(num){
                var boxDom = document.getElementById("audioBox");
                boxDom.innerHTML = "<embed src='${basePath}/resource/plugins/calculator/wav/m"+num+".wav' width='0' height='0'></embed>"
            }

            //运算符
            function tools(op,m){
                if(operate){
                    var num = resultDom.innerHTML;
                    num = (num=="0"?"":num);
                    resultDom.innerHTML = num + op;
                    operate = false;
                    xop = true;
                }
                play(m);
            }

            //清空
            function cleart(m){
                resultDom.innerHTML = "";
                operate = true;
                play(m);
            }
        </script>

源码下载:链接:http://pan.baidu.com/s/1miII8ek 密码:v1jh


http://www.niftyadmin.cn/n/785504.html

相关文章

Composer安装和laravel下载

1 下载Composer http://www.phpcomposer.com/ php我先选的是5.5.38的&#xff0c; 但是 laravel5.1 PHP版本 > 5.5.9 laravel5.2 PHP版本 > 5.5.9 laravel5.3 PHP版本 > 5.6.4&#xff08;也就是要php7&#xff09; laravel5.4 PHP版本 > 5.6.4&#xff08;也就是要…

java定时利用QQ邮件发送今日头条关于java的内容

前言&#xff1a;前几天看到python利用QQ邮件发送天气预报的文章&#xff0c;最近天气温度下降明显&#xff0c;小编没注意&#xff0c;也感冒了一会&#xff0c;但还是要坚持写博客&#xff0c;写代码&#xff0c;平时看各大论坛的新闻焦点&#xff0c;留意最新的官网信息&…

数据挖掘实战经验——交通大数据预测

最近在天池打了一个大数据比赛&#xff0c;还是和之前打过的KDD CUP一样的交通流预测&#xff0c;但是这次做的时候没有简单粗暴的使用规则型方式导出结果&#xff0c;而是选择了提取特征后建模的方法&#xff0c;在初赛取得了73/1716的成绩&#xff0c;感觉有一些收获在这里记…

The serializable class XXX does not declare a static final serialVersionUID field of type long的警告...

原文: http://blog.csdn.net/ultrakang/article/details/41820543转载于:https://www.cnblogs.com/Baronboy/p/7465508.html

大数据挖掘:手把手教你分析头条小程序文章数据

大数据挖掘&#xff1a;手把手教你分析头条小程序文章数据 本次分析思路&#xff1a; 爬虫爬取数据词频统计 绘制文字云 从 49517 字的文章中提取以下关键字&#xff1a; 从上图的结果中发现&#xff0c;经分割后的词中有许多无意义的词&#xff0c;如“可以”&#xff0c;“…

数据挖掘实战——交通大数据预测II

经过了近两个月的艰苦工作&#xff0c;这次在阿里天池的比赛终于结束了。第一次正经的去参加数据挖掘的比赛&#xff0c;从第一赛季开始到第二赛季结束&#xff0c;完整地经历了整个流程&#xff0c;每天提出新想法&#xff0c;学习新的方法&#xff0c;然后用编程的方法去实现…

net中多线程返回值

方法有三种&#xff0c;我们直接上代码&#xff1b; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading; using System.Threading.Tasks;namespace ConsoleApplication11 {//线程中的返回值&#xff0c;有些事儿…

新版微信分享--图片和描述

微信6.5.6更新后&#xff0c;微信H5页面分享出去没有图片。之前微信会默忍抓取页面第一张大于等于300*300的图片&#xff0c;更新微信版本后&#xff0c;分享出去图片没有抓取到。这是微信为了规范自定义分享链接功能在网页上的使用&#xff0c;修改了分享规则&#xff0c;6.5.…