<!DOCTYPE html>

   <html>

   <head>

   <meta charset="utf-8">

     <title>自制计算器</title>

     <link href="css\bootstrap.css.map" rel="stylesheet" />

     <script src="js\bootstrap.js"></script>

     <script src='js\jquery-1.8.2.js'></script>

     <script type="text/javascript">

   $(function(){

       var $btn=$("#calc")

       // 取消已绑定的事件:

       $btn.off('click');

       $btn.click(function() {

         var x=parseFloat($('#x').val()),

             op=$('#op').val(),

             y=parseFloat($('#y').val()),

             r;

             r=x+op+y;

             document.getElementById("result").value=eval(r);

           //  alert('计算结果：'+r);

            try{

              if(isNaN(x)||isNaN(y)){

                  throw new Error("输入有误！");

             }

          }catch(e){

              alert("输入有误！"+e);

          }finally{

             alert('计算结果：'+x+op+y+"="+eval(r));

          }

       });

       //创建过去7天的数组

       $("#calendar").click(function() {

           var DateArray=[...Array(7).keys()].map(days=>new Date(Date.now()+86400000*days));

            console.log(DateArray);

           alert(DateArray);

       });

       //生成随机ID

       $("#RanNum").click(function() {

          //生成长度为11的随机字母数字字符串

          var RanNum=Math.random().toString(36).substring(2);

          //hg7znok52x

          console.log(RanNum);

          alert(RanNum);

       });

       //本地时间

       $("#time").click(function() {

          var time=setInterval(()=>document.getElementById("timeDiv").innerHTML=new Date().toLocaleString().slice(10,19))

       });

       //生成随机十六进制代码（生成随机颜色）如：'#c618b2']

       $("#RanCode").click(function() {

              var RanCode='#'+Math.floor(Math.random()*0xffffff).toString(16).padEnd(6,'0');

           console.log(RanCode);

           alert(RanCode);

       });

       //数组去重

       $("#arrlist").click(function() {

           var arr=Array[1,2,2,3,5,6,6,9,8];

           var arred=[...new Set(arr)];

           console.log(arred);

           alert(arred);

       });

       //返回一个键盘（惊呆了）

       //用字符串返回一个键盘图形

       $("#Graphical").click(function() {

          var Graphical=(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["BS","TAB","CAPS","ENTER"][p++]||'SHIFT',p])}\\|`,m+=y+(x+'    ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`

`)();

       });

    });

    function calcul(){

    var Graphical=(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["BS","TAB","CAPS","ENTER"][p++]||'SHIFT',p])}\\|`,m+=y+(x+'    ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`

`)();

    }

    </script>

  </head>

  <body onblur="calcul();">

    <form>

       <div id="calculateDiv">

          <input type="text" id="x" />

          <select name="option" id="op">

           <option value="+">+</option>

            <option value="-">-</option>

            <option value="*">*</option>

            <option value="/">/</option>

          </select>

          <input type="text" id="y" />

          =<input type="text" id="result"/>

          <input class="btn btn-success" type="submit" style="text-align:center;margin:0px auto;font-size:14px;font-family:'微软雅黑'" value="计算" id="calc" />

       </div>

     </form>

    <div>

      <button id="calendar" value="">日历</button>

      <button id="RanNum" value="">获取随机ID</button>

    </div>

      <div>

      <button id="time" value="">获取本地时间</button>

      <span id="timeDiv"></span>

      <button id="RanCode" value="">获取随机颜色代码</button>

      <button id="arrlist" value="">数组去重</button>

     <button id="Graphical" value="">返回键盘图形</button>

   </div>

 </body>

</html>

HTML自制计算器的更多相关文章

  1. 用php实现简单的自制计算器

    存档: <!DOCTYPE html> <html> <head> <title>PHP实现计算器</title> </head> ...

  2. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...

  3. 自制计算器 v1.1

    之前的v1.0版本功能还不够完善,这个版本一并做了修改. 代码,每个sub表示哪个按钮做了注释. Dim a, temp, ans As Integer Dim op As String Sub sh ...

  4. VB自制计算器

    使用visual basic编写. 绘制如下的按钮界面: 然后代码如下: Dim a, temp, ans As Integer Dim op As String Sub showans() Text ...

  5. JS-计算器制作

    不完善,接下来想着把运算符分开成一个一个的按钮... <!DOCTYPE html><html> <head> <meta charset="UTF ...

  6. 自制c#简易计算器

    这是一个课堂作业,我觉得作为一个简易的计算器不需要态度复杂的东西,可能还有一些bug,有空再慢慢加强. using System;using System.Collections.Generic;us ...

  7. 《自制编程语言》笔记：使用yacc与lex制作简单计算器

    1.代码 1.1)test.l 1.2)test.y 1.3)Makefile (因为是在linux环境下,所以使用了Makefile) 2.编译与运行 2.1)编译 2.2)运行 1.代码(也可以在 ...

  8. JS计算器（自制）

    <!doctype html><html><header><meta charset="utf-8"><script src= ...

  9. 栈的应用1——超级计算器（中缀与后缀表达式）C语言

    这里要学的程序主要用来实现一个功能——输入表达式输出结果,也就是一个计算器.效果如下: 这个程序主要有两个步骤:1.把中缀表达式转换为后缀表达式:2.计算后缀表达式的结果. 首先先明白几个问题: 1. ...

随机推荐

  1. 【JZOJ4854】【NOIP2016提高A组集训第6场11.3】小澳的坐标系

    题目描述 小澳者表也,数学者景也,表动则景随矣. 小澳不喜欢数学,可数学却待小澳如初恋,小澳睡觉的时候也不放过. 小澳的梦境中出现了一个平面直角坐标系,自原点,向四方无限延伸. 小澳在坐标系的原点,他 ...

  2. 2019-10-22-Roslyn-打包自定义的文件到-NuGet-包

    title author date CreateTime categories Roslyn 打包自定义的文件到 NuGet 包 lindexi 2019-10-22 19:45:34 +0800 2 ...

  3. oracle函数 CONVERT(c1,set1,set2)

    [功能]将源字符串c1 从一个语言字符集set2转换到另一个目的set1字符集 [参数]c1,字符串,set1,set2为字符型参数 [返回]字符串 [示例] select convert('stru ...

  4. hihoCoder#1239 Fibonacci

    #1239 : Fibonacci 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Given a sequence {an}, how many non-empty s ...

  5. 2019-8-31-dotnet-使用-MessagePack-序列化对象

    title author date CreateTime categories dotnet 使用 MessagePack 序列化对象 lindexi 2019-08-31 16:55:58 +080 ...

  6. dev stg prd 开发 测试 生产环境

    dev development 开发环境stg stage 测试环境prd product 线上环境

  7. 给tomcat容器配置SSL的记录,包含项目完整部署过程

    给tomcat容器配置SSL(https) 昨天公司有一个旧的项目要部署, 服务器(OS是windows 10) 数据库都是新买的, 写个博客记录一下 1, 下载证书(以阿里云为例子) 参考链接: h ...

  8. Educational Codeforces Round 12 B C题、

    B. Shopping 题意:n个顾客,每个顾客要买m个物品,商场总共有k个物品,看hint就只知道pos(x)怎么算了,对于每一个Aij在k个物品中找到Aij的位置.然后加上这个位置对于的数值,然后 ...

  9. JavaScript 数组去重和对象相等判断

    前几天电话面试问到了数组去重和两个对象相等判断,当时回答的不是特别好,都过去好几天了,总结下. 1.数组去重 当时的问题是这样的有个简单的数组[1,1,2,3],去重后的结果是[1,2,3],怎么实现 ...

  10. 第三次脱发——Scurm学（ctrl）习(C)心得

    Scrum 学习心得: 首先,敏捷并不是一门具体的技术,而是一种理念或者说是一种思想.它可以指导我们更加高效的开发. 其次,敏捷开发都具有以下共同的特征: 迭代式开发 增量交付 开发团队和用户反馈推动 ...