HTML自制计算器 

 <!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>
View Code
posted @ 2019-07-13 18:22  铁林淼炎圭  阅读(572)  评论(0)  编辑  收藏  举报
Live2D