HTML自制计算器
Posted memory-ccy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML自制计算器相关的知识，希望对你有一定的参考价值。
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>
以上是关于HTML自制计算器的主要内容，如果未能解决你的问题，请参考以下文章