<!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. day39-Spring 17-Spring的JDBC模板：完成增删改的操作

    JdbcTemplate根DBUtils非常类似,你要是有非常多的Dao,你每一个Dao都需要写它 /*在Dao层注入JDBC模板*/ private JdbcTemplate jdbcTemplat ...

  2. centos7.3 docker安装grafana

    一.编写docker-cmpose文件 docker-compose.yml文件如下: version: "3.3" services: grafana: image: grafa ...

  3. springboot web开发【转】【补】

    pom.xml引入webjars的官网 https://www.webjars.org/ https://www.thymeleaf.org/doc/tutorials/3.0/usingthymel ...

  4. python ASCII编码集

  5. Quick BI独创千人千面的行级权限管控机制

    摘要 就数据访问权限而言,阿里巴巴以“被动式授权”为主,你需要什么权限就申请什么权限.但是,在客户交流过程中,我们发现绝大多数企业都是集中式授权,尤其是面向个人的行级权限管控,管理复杂度往往呈几何增长 ...

  6. 【Linux】vim缩进配置 （转载）

    1.安装vim,终端输入: wanpeng@ubuntu:~$ sudo apt-get install vim-full 2.终端输入,打开配置文件: wanpeng@ubuntu:~$ vim ~ ...

  7. python内置函数and匿名函数

    一.内置函数 什什么是内置函数? 就是python给你提供的. 拿来直接⽤用的函数, 比如print., input等等. 截⽌止 到python版本3.6.2 python⼀一共提供了了68个内置函 ...

  8. 2018-8-10-win10-uwp-使用动画修改-Grid-column-的宽度

    title author date CreateTime categories win10 uwp 使用动画修改 Grid column 的宽度 lindexi 2018-08-10 19:17:19 ...

  9. @codeforces - 414E@ Mashmokh's Designed Problem

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一棵 n 个点的树,每个点的儿子是有序的. 现给定 m 次操 ...

  10. 深入理解iptables防火墙

    0x00 Linux 安全性和 netfilter/iptables Linux 因其健壮性.可靠性.灵活性以及好象无限范围的可定制性而在 IT 业界变得非常受欢迎.Linux 具有许多内置的能力, ...