<!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. day4_python-之装饰器、迭代器、生成器

    一.装饰器 1.为何要用装饰器 #开放封闭原则:对修改封闭,对扩展开放 2. 什么是装饰器 装饰器他人的器具,本身可以是任意可调用对象,被装饰者也可以是任意可调用对象. 强调装饰器的原则:1 不修改被 ...

  2. Gym - 101962B_Color Changing Sofa

    题意:将一个沙发放到一个分成好几个色块(一个字母代表一种颜色)的房间里,要求沙发染成跟所在色块一样的颜色,沙发分成(0,1)两种,0可以染成一种颜色,1可以染成一种颜色(换句话说,沙发最多两种颜色), ...

  3. Centos7环境下搭建Nginx+Lua+Redis进行数据存取

    1.安装依赖环境 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 2.安装LuaJIT cd /usr/loca ...

  4. ros自定义消息

    ros自定义消息可以根据自身项目需求定义和封装想要的数据类型和数据结构.具体可以参考维基百科关于ros自定义消息部分 这里我只是记录自定义消息的要点部分: 1.首先要在工作空间下功能包中创建一个msg ...

  5. React Native中pointerEvent属性

    在React Native界面开发中, 如果使用绝对定位布局,在代码运行时的某个时刻有可能会遮盖住它的下方的某个组件.这是因为绝对定位只是说这个组件的位置由它父组件的边框决定. 绝对定位的组件可以被认 ...

  6. Hadoop入门进阶步步高（三）-配置Hadoop

    三.配置Hadoop 1.设置$HADOOP_HOME/conf/hadoop-env.sh 这个文件里设置的是Hadoop运行时须要的环境变量,在1.2.1版中共同拥有19个环境变量.例如以下:   ...

  7. 1x1卷积

    你可能会想为什么有人会用1x1卷积,因为它关注的不是一块像素,而是一个像素,图1 图1 我们看看传统的卷积,它基本上是运行在一个小块图像上的小分类器,但仅仅是个线性分类器.图2 图2 如果你在中间加一 ...

  8. EC Round 33 F. Subtree Minimum Query 主席树/线段树合并

    这题非常好!!! 主席树版本 很简单的题目,给一个按照指定节点的树,树上有点权,你需要回答给定节点的子树中,和其距离不超过k的节点中,权值最小的. 肯定首先一想,按照dfs序列建树,然后按照深度为下标 ...

  9. Win7如何显示文件后缀

    有些时候,我们需要修改文件的后缀名,但是Windows7系统默认不显示文件后缀.我们怎样显示和修改文件后缀呢?请接着往下看. 工具/原料   一个win7系统 方法/步骤   1 如图所示,此时是无法 ...

  10. vue1——vue引入方法，npm本地安装

    博客地址 :https://www.cnblogs.com/sandraryan/ Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用 ...