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 ...
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>
