js網頁計算器(按鍵+點擊)
阿新 • • 發佈：2017-12-20
ava fonts wid keycode 用戶輸入 技術 圖片 設置 運算符號
var text = document.getElementById(‘text‘);// 顯示文本 var by = document.getElementById(‘by‘); //按鈕生成區域 //按鍵的value var str = new Array(‘2‘, ‘√‘, ‘=‘, ‘清除‘, ‘1‘, ‘2‘, ‘3‘, ‘＋‘, ‘4‘, ‘5‘, ‘6‘, ‘－‘, ‘7‘, ‘8‘, ‘9‘, ‘ב, ‘0‘, ‘.‘, ‘±‘, ‘÷‘); var x = ‘‘,// 計算的值1 y = ‘‘;//值2 var fu = "0";// 運算符號 + - * / text.value = 0; //初始化為0 document.body.onload = function() { // 加載中執行 for(var i = 0; i < str.length; i++) { // 循環遍歷生成按鍵按鈕 並賦值設置樣式 var bt_value = document.createElement(‘button‘);//創建 by.appendChild(bt_value);//父節點添加 bt_value.setAttribute("name", str[i]); //屬性設置 style(bt_value, i);//設置樣式 } document.body.onkeydown= function(event) { //設置用戶按鍵事件 var e = event || window.event; //解決不同瀏覽器問題 if(text.value == ‘0‘ && (e.keyCode > 95 && e.keyCode < 106)) { //第一次按下數字替換0 text.value = e.keyCode - 96; } else if(e.keyCode > 95 && e.keyCode < 106) { //第二次按下數字 text.value的值+=eventtext.value += e.keyCode - 96; } if(e.keyCode == 107) {//按下+號的情況 x = text.value; //x儲存第一個數 text.value = ‘‘; //讓用戶輸入第二個數 fu = ‘+‘; //fu= ’+‘ } else if(e.keyCode == 109) { //按下-號的情況 x = text.value; text.value = ‘‘; fu = ‘-‘; } else if(e.keyCode == 106) {//按下*號的情況 x = text.value; text.value = ‘‘; fu = ‘*‘; } else if(e.keyCode == 111) {//按下/號的情況 x = text.value; text.value = ‘‘; fu = ‘/‘; } if(e.keyCode == 108 || e.keyCode == 13) {//按下鍵盤的兩個enter 情況 ==等於 y = text.value; //y等於第二個數 switch(fu) { //判斷fu的值 case ‘+‘: text.value = Number(x) + Number(y); break; case ‘-‘: text.value = Number(x) - Number(y); break; case ‘*‘: text.value = Number(x) * Number(y); break; case ‘/‘: text.value = Number(x) / Number(y); break; default: alert("請重新輸入"); } } if(e.keyCode == 110) { //按下.的情況 var flag = 0; // 判斷text.value是否含有. for(var j = 0; j < text.value.length; j++) {//遍歷 if(text.value[j] == ‘.‘) flag++; } if(flag == 0)//沒有就加. text.value += ‘.‘; } if(e.keyCode == 27)//按下esc 清除 text.value = 0; if(e.keyCode==8){ //按下backspace 刪除一個字符 if(text.value!=0) text.value=text.value.substr(0,text.value.length-1);//substr 從0截取到該長度-1 } } by.onclick = function t(event) {// 用戶點擊按鈕事件 var event = event || window.event; var re = /\d/; //正則[0-9] if(text.value == ‘0‘&& re.test(event.target.innerHTML)) {//第一次按下數字替換0 text.value = event.target.innerHTML; } else if(re.test(event.target.innerHTML)) {//第二次按下數字 text.value的值+=event text.value += event.target.innerHTML; } if(event.target.innerHTML == ‘清除‘)//當點擊清除執行 text.value = 0; if(event.target.innerHTML == "＋") { //當點擊+執行 x = text.value; text.value = ‘‘; fu = ‘+‘; } else if(event.target.innerHTML == "－") {//當點擊-執行 x = text.value; text.value = ‘‘; fu = ‘-‘; } else if(event.target.innerHTML == "×") {//當點擊x執行 x = text.value; text.value = ‘‘; fu = ‘*‘; } else if(event.target.innerHTML == "÷") {//當點擊/執行 x = text.value; text.value = ‘‘; fu = ‘/‘; } if(event.target.innerHTML == ‘=‘) {//當點擊=執行 y = text.value; //y儲存第二個數 switch(fu) { // fu =+| -| x| / case ‘+‘: text.value = Number(x) + Number(y); break; case ‘-‘: text.value = Number(x) - Number(y); break; case ‘*‘: text.value = Number(x) * Number(y); break; case ‘/‘: text.value = Number(x) / Number(y); break; default: alert("請重新輸入"); } } if(event.target.name == ‘.‘) { //判斷.前面是否還有. var flag=0; for(var j=0;j<text.value.length;j++) { if(text.value[j]==‘.‘) flag++; } if(flag==0) text.value+=event.target.innerHTML; } if(event.target.name==‘±‘) //點擊正負值的執行 { text.value=-Number(text.value); //強制轉化數字的相反數 } if(event.target.name==‘√‘) //開平方計算 { text.value=Math.sqrt(text.value); } if(event.target.name==‘2‘) //平方計算 { text.value=Math.pow(text.value,2); } } } function style(bt_value, i) { //樣式設置 bt_value.style.width = "115px"; bt_value.style.height = "50px"; bt_value.style.margin = "5px"; bt_value.style.marginTop = "20px"; bt_value.innerHTML = str[i]; bt_value.style.fontSize = "18px"; bt_value.style.color = "#FFFFFF"; if(i == 3) bt_value.style.background = ‘#444444‘; if(i == 7 || i == 11 || i == 15 || i == 19) bt_value.style.background = "#886600"; if(i == 2) bt_value.style.background = "#DDAA00 "; }
下面是主頁面
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>網頁計算器</title> </head> <link rel="stylesheet" type="text/css" href="css/style.css"/> <body> <div id="hd"><input type="text" id="text" disabled="disabled"/></div> <div id="by"></div> </body> <script type="text/javascript" src="js/counter.js"></script> </html>
css
*{ background-image:url(../img/234973-13011P9141165.jpg); margin: 0 auto; } #hd{ height: 100px; width: 500px; margin-top: 50px; } #by{ height: 450px; width: 500px; } #text{ background: #FFFFFF; text-align: right; font-size: 70px; margin: 5px; width: 480px; height: 70px; white-space: nowrap; }
運行截圖
背景直接拖了一張圖片
js網頁計算器(按鍵+點擊)