HTML自制计算器

2019-08-14 10:13:31来源：博客园阅读 ()

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5   <title>自制计算器</title>
  6   <link href="css/bootstrap.css" rel="stylesheet" />
  7   <script src="js/bootstrap.js"></script>
  8   <script src='F:\JavaScript实例\jquery-1.7.2.js'></script>
  9   <script type="text/javascript">
 10   $(function(){
 11      var $btn=$("#calc")
 12      // 取消已绑定的事件:
 13      $btn.off('click');
 14      $btn.click(function() {
 15        var x=parseFloat($('#x').val()),
 16            op=$('#op').val(),
 17            y=parseFloat($('#y').val()),
 18            r;
 19            r=x+op+y;
 20            document.getElementById("result").value=eval(r);
 21          //  alert('计算结果：'+r);
 22          try{
 23             if(isNaN(x)||isNaN(y)){
 24                 throw new Error("输入有误！");
 25            }    
 26         }catch(e){
 27             alert("输入有误！"+e);
 28         }finally{
 29            alert('计算结果：'+x+op+y+"="+eval(r));
 30         }
 31      });
 32      
 33      //创建过去7天的数组
 34      $("#calendar").click(function() {
 35          var DateArray=[...Array(7).keys()].map(days=>new Date(Date.now()+86400000*days));
 36          console.log(DateArray);
 37          alert(DateArray);
 38      });     
 39      //生成随机ID
 40      $("#RanNum").click(function() {
 41         //生成长度为11的随机字母数字字符串
 42         var RanNum=Math.random().toString(36).substring(2);
 43         //hg7znok52x
 44         console.log(RanNum);
 45         alert(RanNum);
 46      });     
 47      //本地时间
 48      $("#time").click(function() {
 49         var time=setInterval(()=>document.getElementById("timeDiv").innerHTML=new Date().toLocaleString().slice(10,19))
 50      });     
 51      //生成随机十六进制代码（生成随机颜色）如：'#c618b2']
 52      $("#RanCode").click(function() {
 53             var RanCode='#'+Math.floor(Math.random()*0xffffff).toString(16).padEnd(6,'0');
 54          console.log(RanCode);
 55          alert(RanCode);
 56      });
 57      //数组去重
 58      $("#arrlist").click(function() {
 59          var arr=Array[1,2,2,3,5,6,6,9,8];
 60          var arred=[...new Set(arr)];
 61          console.log(arred);
 62          alert(arred);
 63      });
 64      //返回一个键盘（惊呆了）
 65      //用字符串返回一个键盘图形
 66      $("#Graphical").click(function() {
 67        // 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,1+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.jion‘‘)();
 68      });
 69   });
 70   
 71   function calcul(){
 72 
 73   }
 74   </script>
 75 </head>
 76 <body> 
 77   <form>
 78      <div id="calculateDiv">
 79         <input type="text" id="x" />
 80         <select name="option" id="op">
 81           <option value="+">+</option>
 82           <option value="-">-</option>
 83           <option value="*">*</option>
 84           <option value="/">/</option>
 85         </select>
 86         <input type="text" id="y" />
 87         =<input type="text" id="result"/>
 88         <input class="btn btn-success" type="submit" style="text-align:center;margin:0px auto;font-size:14px;font-family:'微软雅黑'" value="计算" id="calc" />
 89      </div>
 90   </form>
 91   <div>
 92     <button id="calendar" value="">日历</button>
 93     <button id="RanNum" value="">获取随机ID</button>
 94   </div>
 95     <div>
 96     <button id="time" value="">获取本地时间</button>
 97     <span id="timeDiv"></span>
 98     <button id="RanCode" value="">获取随机颜色代码</button>
 99     <button id="arrlist" value="">数组去重</button>
100     <button id="Graphical" value="">返回键盘图形</button>
101   </div>
102 </body>
103 </html>