<!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. python 模块的导入

  2. PHPCMS快速建站系列之 pc标签where中如何使用变量

    {pc:content action="lists" catid="$catid" where="typeid='$t'" order=&q ...

  3. Balanced Binary Tree 判断平衡二叉树

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...

  4. hdu3549 最大流

    #include<stdio.h> #include<string.h> #include<queue> #define MAXN 1010 using names ...

  5. qt .pro文件和cmakelists.txt配置第三方库

    .pro文件引用第三方库文件和头文件路径 1.库文件(LIBS添加的是共享库文件,-L添加目录,-l指定共享库名称) LIBS += -L/usr/local/lib -lmath LIBS的使用就是 ...

  6. python---异常处理与反射

    一.异常处理 1.异常基础 在编程过程中为了增加友好性,在程序出现bug时一般不会将错误信息显示给用户,而是现实一个提示的页面,通俗来说就是不让用户看见大黄页!!! try: pass except ...

  7. @codechef - TREEPATH@ Decompose the Tree

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一棵无根树,每个节点上都写了一个整数. 你的任务就是统计有多 ...

  8. html实体字符转换成字符串

    function EntityToString(value) { let tag = document.createElement("div"); tag.innerHTML = ...

  9. PyTorch 学习笔记（四）：权值初始化的十种方法

    pytorch在torch.nn.init中提供了常用的初始化方法函数,这里简单介绍,方便查询使用. 介绍分两部分: 1. Xavier,kaiming系列: 2. 其他方法分布 Xavier初始化方 ...

  10. 深入理解iptables防火墙

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