<!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. PHPCMS快速建站系列之在线留言

    有两种方法 第一种方法: 利用留言板插件,在后台模板中,安装留言板插件使用,这里先不展开. 第二种方法: 表单向导的适用场合: 如果一个前台页面只是为了提交表单数据,那么就非常适合适用表单向导的功能, ...

  2. 2013年山东省第四届ACM大学生程序设计竞赛J题:Contest Print Server

    题目描述     In ACM/ICPC on-site contests ,3 students share 1 computer,so you can print your source code ...

  3. UVA_414:Machined Surfaces

    Language : C++ 4.8.2 #include<stdio.h> #include<string.h> int main(void) { int n; int su ...

  4. C++运行时类型识别

    通过运行时类型识别(RTTI),程序能够使用基类的指针或引用来检索这些指针或引用所指对象的实际派生类型. 通过下面两个操作符提供 RTTI: 1. typeid 操作符,返回指针或引用所指对象的实际类 ...

  5. 分享 KubeCon 2019 （上海）关于 Serverless 及 Knative 相关演讲会议

    有幸参加了 KubeCon 2019 上海大会,并参加了 Knative 及 Serverless 相关的几场分享会,收获满满.这里简单介绍一下各个演讲主题的主要内容.详细的演讲主题文档可以在Kube ...

  6. Getting started with the basics of programming exercises_1

    1.编写一个将输入复制到输出的程序,并将其中连续的多个空格用一个空格代替 使用if 结构: #include<stdio.h> #define NONBLANK 'a'; // repal ...

  7. javascript 容易混淆遗忘的基础知识

    1.  标识符     所谓标识符,就是指变量.函数.属性的名字,或者函数的参数.标识符可以是按照下列格式规则组合起来的一或多个字符:     1.1   第一个字符必须是一个字母.下划线( _ )或 ...

  8. .net core 文件下载

    public IActionResult Dowanload(string id,int numTypes) { try { var memory = new MemoryStream(): //mo ...

  9. keras 保存模型和加载模型

    import numpy as npnp.random.seed(1337) # for reproducibility from keras.models import Sequentialfrom ...

  10. 浏览器间CSS样式兼容问题

    1.display:table居中显示 在chrome和safari浏览器上兼容问题 2.滤镜 在chrome浏览器中能正常显示,在360浏览器中不能正常显示 3.省略号问题 对于一行显示,基本上对所 ...