HTML自制计算器_html-js-css

概述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"></scrip

  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,3,5,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>