最簡單用js實現計算器的方法

簡單的用JavaScript實現計算器的方法可以使用eval()函數，該函數可以計算字符串中的數學表達式。以下是一個簡單的示例：

html復制代碼運行

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>簡單計算器</title> </head> <body> <input type="text" id="expression" placeholder="請輸入表達式"> <button onclick="calculate()">計算</button> <p>結果：<span id="result"></span></p> <script> function calculate() { var expression=document.getElementById("expression").value; try { var result=eval(expression); document.getElementById("result").innerText=result; } catch (error) { alert("輸入的表達式有誤，請檢查后重新輸入"); } } </script> </body> </html>

這個示例中，我們創建了一個簡單的HTML頁面，包含一個輸入框用于輸入表達式，一個按鈕用于觸發計算，以及一個用于顯示結果的段落。在JavaScript部分，我們定義了一個名為calculate的函數，該函數首先獲取輸入框中的表達式，然后使用eval()函數計算表達式的結果，并將結果顯示在頁面上。如果輸入的表達式有誤，我們會彈出一個警告框提示用戶檢查輸入。

時在制作頁面的時候，總會碰到有的元素是100%的寬度。眾所周知，如果元素寬度為100%時，其自身不帶其他盒模型屬性設置還好，要是有別的，那將導致盒子撐破。比如說，有一個邊框，或者說有margin和padding，這些都會讓你的盒子撐破。我們換句話來說，如果你的元素寬度是100%時，只要你在元素中添加了border,padding,margin任何一值，都將會把元素盒子撐破（標準模式下，除IE怪異模式）。這樣一來就會相當的麻煩，平時我們碰到這樣的現象時，也是相當的謹慎，有時甚至無法解決，只能通過改變結構來實現。就算你通過繁瑣的方法實現了，但由于瀏覽器的兼容性而導致最終效果不一致。

雖然前面介紹的CSS3屬性中的box-sizing在一定程度上解決這樣的問題，其實今天的calc()函數功能實現上面的效果來得更簡單。

什么是calc()?

學習calc()之前，我們有必要先知道calc()是什么？只有知道了他是個什么東東？在實際運用中更好地使用他。

calc()從字面我們可以把他理解為一個函數function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。為何說是動態值呢？因為我們使用的表達式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度。

calc()能做什么？

calc()能讓你給元素的寬度做計算，你可以給一個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，比如說“width:calc(50% + 2em)”，這樣一來你就不用考慮元素DIV的寬度值到底是多少，而把這個煩人的任務交由瀏覽器去計算。

calc()語法

calc()語法非常簡單，就像我們小時候學加（+）、減（-）、乘（*）、除（/）一樣，使用數學表達式來表示：

 .elm { width: calc(expression); }

其中"expression"是一個表達式，用來計算長度的表達式。

calc()的運算規則

calc()使用通用的數學運算規則，但是也提供更智能的功能：

使用“+”、“-”、“*” 和 “/”四則運算；
可以使用百分比、px、em、rem等單位；
可以混合使用各種單位進行計算；
表達式中有“+”和“-”時，其前后必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；
表達式中有“*”和“/”時，其前后可以沒有空格，但建議留有空格。

瀏覽器的兼容性

瀏覽器對calc()的兼容性還算不錯，在IE9+、FF4.0+、Chrome19+、Safari6+都得到較好支持，同樣需要在其前面加上各瀏覽器廠商的識別符，不過可惜的是，移動端的瀏覽器還沒僅有“firefox for android 14.0”支持，其他的全軍覆沒。大家在實際使用時，同樣需要添加瀏覽器的前綴。

 .elm { 
   /*Firefox*/ 
   -moz-calc(expression); 
   /*chrome safari*/ 
   -webkit-calc(expression); 
   /*Standard */ 
   calc(expression); 
 }

通過上面的了解，大家對calc()不再那么陌生，但對于實際的運用可能還是不太了解，那么大家就接下來跟我一起動手，通過實例來了解他吧。首先我們來看一個最常用的實例：

 <div class="demo">
   <div class="box"></div>
</div>

上面的結構很簡單，就是一個div.demo的元素中包含了一個div.box的元素，接下來我們一步一步來看其中的變化。

第一步：添加普通樣式：

 .demo { 
   width: 300px; 
   background: #60f; 
 } 
.box { 
  width: 100%; 
  background: #f60; 
  height: 50px; 
}

此時的效果很簡單，就是div.box完全遮蓋了div.demo，如下圖所示：

第二步，在div.box上添加border和padding

這一步很棘手的事情來了，在div.box上添加10px的內距padding，同時添加5px的border：

 .demo { 
   width: 300px; 
   background: #60f;
 } 
.box { 
  width: 100%;
  background: #f60; 
  height: 50px; 
  padding: 10px; 
  border: 5px solid green; 
}

為了更好地說明問題，我在div.demo上添加了一個padding：3px 0;

 .demo { 
   width: 300px; 
   background: #60f; 
   padding: 3px 0; 
 } 
.box { 
  width: 100%; 
  background: #f60; 
  height: 50px; 
  padding: 10px; 
  border: 5px solid green; 
}

這個時候大家不知道能否想到問題會發生在哪？其實很簡單，這個時候div.box的寬度大于了其容器div.demo的總寬度，從而撐破容器伸出來了，如圖所示：

第三步，calc()的運用

為了解決撐破容器的問題，以前我們只能去計算div.box的寬度，用容器寬度減去padding和border的值，但有時候，我們苦于不知道元素的總寬度，比如說是自適應的布局，只知道一個百分值，但其他的值又是px之類的值，這就是難點，死卡住了。隨著CSS3的出現，其中利用box-sizing來改變元素的盒模型類型來實現效果，但今天我們學習的calc()方法更是方便。

知道總寬度是100%，在這個基礎上減去boder的寬度（5px * 2=10px）,再減去padding的寬度（10px * 2=20px），即“100% - (10px + 5px) * 2=30px” ，最終得到的值就是div.box的width值：

 .demo { 
   width: 300px; 
   background: #60f; 
   padding: 3px 0; 
 } 
.box { 
  background: #f60; 
  height: 50px; 
  padding: 10px; 
  border: 5px solid green; 
  width: 90%;/*寫給不支持calc()的瀏覽器*/
  width:-moz-calc(100% - (10px + 5px) * 2); 
  width:-webkit-calc(100% - (10px + 5px) * 2); 
  width: calc(100% - (10px + 5px) * 2); 
}

這樣一來，通過calc()計算后，div.box不會再超出其容器div.demo的寬度，如圖所示：

上面是一個簡單的實例，接下來我們一起來看一個自適應布局的例子：

這個demo是一個非常簡單而常見的布局效果，在這個布局中，我采用了自適應布局。整個布局包含了“頭部”、“主內容”、“邊欄”和“腳部”，并且“主內容”居左，“邊欄”靠右，具體結構請看DEMO中的html部分。

接下來，我們主要看看css部分：

1、在body中設置一個內邊距，并附上一些基本的樣式，大家可以根據自己需要進行不同的設置，代碼如下：

 body { 
   background: #E8EADD; 
   color: #3C323A; 
   padding: 20px; 
 }

2、設置主容器“wrapper”的樣式

主容器的寬度是“100% - 20px * 2”,并且水平居中：

 .wrapper { 
   width: 1024px; /*寫給不支持calc()的瀏覽器*/ 
   width: -moz-calc(100% - 40px); 
   width: -webkit-calc(100% - 40px); 
   width: calc(100% - 40px); 
   margin: auto;
 }

給不支持calc()的瀏覽器設置了一個固定寬度值“1024px”。

3、給header和footer設置樣式

這個例子中的header和footer很簡單，給他們添加了一個內距為20px，其他就是一些基本的樣式設置，那么其對應的寬度應該是"100% - 20px * 2"：

 #header {
   background: #f60; 
   padding: 20px; 
   width: 984px;/*寫給不支持calc()的瀏覽器*/ 
   width: -moz-calc(100% - 40px); 
   width: -webkit-calc(100% - 40px); 
   width: calc(100% - 40px); 
 } 
#footer { 
  clear:both; 
  background: #000;
  padding: 20px; 
  color: #fff; 
  width: 984px;/*寫給不支持calc()的瀏覽器*/ 
  width: -moz-calc(100% - 40px); 
  width: -webkit-calc(100% - 40px); 
  width: calc(100% - 40px); 
}

4、給主內容設置樣式

給主內容設置了一個8px的邊框，20px的內距，并且向左浮動，同時設置了一個向右的外邊距“20”px，關鍵之處，我們主內容占容器寬度的75%，這樣一來，主內容的寬度應該是“75% - 8px * 2 - 20px * 2”:

 #main { 
   border: 8px solid #B8C172; 
   float: left; 
   margin-bottom: 20px; 
   margin-right: 20px; 
   padding: 20px; 
   width: 704px;/*寫給不支持calc()的瀏覽器*/ 
   width: -moz-calc(75% - 20px * 2 - 8px * 2); 
   width: -webkit-calc(75% - 20px * 2 - 8px * 2); 
   width: calc(75% - 20px * 2 - 8px * 2); 
 }

5、設置右邊欄樣式

給邊欄設置了一個25%的寬度，其除了包含8px的邊框，10px的內距外，還有主內容外距20px也要去掉，不然整個寬度與容器會相差20px,換句話說就會撐破容器掉下來。因此邊欄的實際寬度應該是"25% - 10px * 2 - 8px * 2 -20px":

 #accessory { 
   border: 8px solid #B8C172;
   float: right; 
   padding: 10px; 
   width: 208px;/*寫給不支持calc()的瀏覽器*/
   width: -moz-calc(25% - 10px * 2 - 8px * 2 - 20px);
   width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px); 
   width: calc(25% - 10px * 2 - 8px * 2 - 20px); 
 }

這樣一來，大家就看到了上面demo展現的布局效果。經過此例的學習，大家是不是會覺得使用calc()用于自適應布局是超爽的呀。此時有很多同學肯定會感吧，苦逼的IE6-8不支持，不敢使用。

最后附上兼容性示意圖：

日常 Web 開發中，書寫代碼遵循的原則是用盡可能少的代碼實現盡可能多的功能。本文將探索日常開發中遇到的需求場景，僅用一行代碼來實現。

01.計算數組中元素出現的次數

const occurrenceMap=arr=> arr.reduce((acc, current)=> (acc[current]=(acc[current] || 0) + 1, acc), {});

// output: { a: 2, b: 1, c: 1, d: 1 }
occurrenceMap(['a', 'b', 'c', 'a', 'd'])

02.實現數組淺拷貝

const shallowClone=arr=> arr.slice(0); 
// or
const shallowClone=array=> [...array];

// output: [ { a: 'b', b: { c: 'd' } } ]
shallowClone([{a: 'b', b: {c: 'd'}}])

由于是淺拷貝，嵌套對象或數組將通過引用拷貝，而不是復制。

03.數組是否為空判斷

const isEmptyArray=arr=> Array.isArray(arr) && !arr.length;

// recommend
const isEmptyArray=({ length })=> length===0;

// output: true
isEmptyArray(Array(2))

({ length })=> length===0 被大多數開發者所推薦，關于是否是數組應該再另一個函數中判斷，遵循“函數單一職責原則”。

04.刪除數組中所有重復數據

const removeDuplicates=arr=> [...new Set(arr)]; 


// output: [ 'a', 'b' ]
removeDuplicates(['a', 'b', 'a'])

// output: [ { a: 1 }, 'b', { a: 1 } ]，包含非原始值
removeDuplicates([{a: 1}, 'b', {a: 1}])

請注意：代碼僅適用于具有原始值（string、number、bigint、boolean、undefined、symbol 和 null）的元素。保留元素的順序并返回數組的副本。

05.獲取數組中的最小/最大元素

const lowestNumber=arr=> Math.min(...arr);
const biggestNumber=arr=> Math.max(...arr);

// output: 1
lowestNumber([1, 2, 3, 1])

// output: 3
biggestNumber([1, 2, 3, 1])

06.獲取數組中最近的數據項

const closestNumber=(arr, number)=> arr.reduce((acc, current)=> (Math.abs(current - number) < Math.abs(acc - number) ? current : acc) ); 

// output: 3
closestNumber([1, 2, 3, 4, 1], 3.2)

07.獲取數組中最小/最大數據項的首個索引

const indexOfLowestNumber=arr=> arr.indexOf(Math.min(...arr));
const indexOfBiggestNumber=arr=> arr.indexOf(Math.max(...arr));

// output: 0
indexOfLowestNumber([1, 2, 3, 4])

// output: 3
indexOfBiggestNumber([1, 2, 3, 4])

08.等分數組

const splitInHalf=arr=> [arr.slice(0, Math.ceil(arr.length / 2)), arr.slice(Math.ceil(arr.length / 2))];

// output: [[1, 2], [3, 4]]
splitInHalf([1,2,3,4])

09.獲取數組中最短/最長子串

const longestString=arr=> arr.reduce((prev, curr)=> prev.length > curr.length ? prev : curr);
const shortestString=arr=> arr.reduce((prev, curr)=> prev.length < curr.length ? prev : curr);

// output: abc
console.log(shortestString(['hello', 'fedlab', 'abc']));

// output: fedlab
console.log(longestString(['hello', 'fedlab', 'abc']));

此代碼還能通過返回值的 length 屬性獲取到最短、最長字符串的長度。

10.數組求和與均值

const sum=arr=> arr.reduce((a, b)=> a + b, 0);

const average=arr=> arr.reduce((a, b)=> a + b) / arr.length

11.數組隨機排序

const shuffle=arr=> [...arr].sort(()=> 0.5 - Math.random());

12.字符串轉CamelCase

const toCamelCase=str=> str.replace(/[\s\._-]+\w/g, (m)=> m[m.length-1].toUpperCase());

// output: helloWorld
toCamelCase('hello-world')
toCamelCase('hello world')
toCamelCase('hello_world')
toCamelCase('hello.world')

13.字符串轉PascalCase

const toPascalCase=str=> str.replace(/[\s\._-]+\w/g, (m)=> m[m.length - 1].toUpperCase()).replace(str.charAt(0), str.charAt(0).toUpperCase());

// output: HelloWorld
toPascalCase('hello-world')
toPascalCase('hello world')
toPascalCase('hello_world')
toPascalCase('hello.world')

15.轉換 HTML 特殊字符

const htmlSpecialChars=str=> str.replace(/[&"'<>]/g, (i)=> ({ "&": "&", '"': """, "'": "'", "<": "<", ">": ">" }[i]));

16.反轉字符串中的所有單詞

const reverseWords=(str)=> str.replace(/(\p{L}+)/gu, (word)=> [...word].reverse().join(''));

// output: olleh dlrow
reverseWords('hello world')

Unicode標準定義了每個字符的性質，許多支持Unicode的程序能夠通過\p{quality}來支持其中的一部分。

17.反轉整個字符串

const reverseString=str=> [...str].reverse().join("");

18.在字詞邊界截斷字符串

const truncateAfterWord=(str, chars, placeholder='…')=> str.length < chars ? str : `${str.substr( 0, str.substr(0, chars - placeholder.length).lastIndexOf(" "))}${placeholder}`

// output: foo bar…
truncateAfterWord('foo bar baz', 9)

19.畫一個心型

520 表白可以用一下子哈。

const readline=require("readline");function genMonospacedAlphabet(e){return{" ":" ",a:"ａ",b:"ｂ",c:"ｃ",d:"ｄ",e:"ｅ",f:"ｆ",g:"ｇ",h:"ｈ",i:"ｉ",j:"ｊ",k:"ｋ",l:"ｌ",m:"ｍ",n:"ｎ",o:"ｏ",p:"ｐ",q:"ｑ",r:"ｒ",s:"ｓ",t:"ｔ",u:"ｕ",v:"ｖ",w:"ｗ",x:"ｘ",y:"ｙ",z:"ｚ",A:"Ａ",B:"Ｂ",C:"Ｃ",D:"Ｄ",E:"Ｅ",F:"Ｆ",G:"Ｇ",H:"Ｈ",I:"Ｉ",J:"Ｊ",K:"Ｋ",L:"Ｌ",M:"Ｍ",N:"Ｎ",O:"Ｏ",P:"Ｐ",Q:"Ｑ",R:"Ｒ",S:"Ｓ",T:"Ｔ",U:"Ｕ",V:"Ｖ",W:"Ｗ",X:"Ｘ",Y:"Ｙ",Z:"Ｚ","!":"！","@":"＠","#":"＃",$:"＄","%":"％","^":"^","&":"＆","*":"＊","(":"（",")":"）",_:"_","+":"＋"}[e]}const rl=readline.createInterface({input:process.stdin,output:process.stdout});rl.question("Say something: ",(e=>{rl.close();const t=e.split("").map((e=>genMonospacedAlphabet(e))).join(""),s=Math.pow,n=e=>new Promise((t=>{setTimeout((()=>{t()}),e)})),o=genMonospacedAlphabet(" "),a=(()=>{let e=-1,s=t.length;return()=>(e>s-1?e=0:e++,e===s||/\s/.test(t[e])?o:t[e])})(),r=async(e,t)=>{await process.stdout.write(((e,t,n=1,o=1)=>s(s(e*n*.05,2)+s(-t*o*.1,2)-1,3)-s(e*n*.05,2)*s(-t*o*.1,3)<0)(e,t,1.2)?"[91m"+a():o)};let i=-15;const c=async()=>{for(let e=-25;e<25;e+=1)await r(e,i),await n(2);process.stdout.write("\n"),i<10&&(i++,c())};c()}));

最后

以上就是我們開發中經常遇到的場景，都可以用一行代碼來實現。如果你還有其他的 一行代碼實現的逆天操作 歡迎留言討論。

在線咨詢

上一篇：AI加持的另類大屏之華為智慧屏V65上手體驗
下一篇：如何在Angular應用程序中插入自定義 CSS？這

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商