JavaScript實現(xiàn)簡單計算器小程序
更新時間：2022年01月21日 09:52:18 作者：陰陽G.M
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單計算器小程序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)簡單計算器的具體代碼，供大家參考，具體內(nèi)容如下
代碼：
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>計算器</title>
? ? <style>
? ? ? ? *{padding: 0;margin: 0;box-sizing: border-box;}
? ? ? ? body>div{width: 300px;height: 400px;background-color: rgb(141, 141, 141);display: flex;justify-content: space-around;flex-direction: column;margin: auto;border: 2px solid #000;position: relative;}
? ? ? ? body>div>div{height: 16%;margin: 0 8px;padding: 10px;line-height: 40px; border: 3px double #000;font-size: 40px;text-align: right;background-color: rgb(221, 221, 221);overflow: hidden;}
? ? ? ? body>div>ul{list-style: none;display: flex;flex-wrap: wrap;justify-content: space-around;user-select: none;}
? ? ? ? body>div>ul>li{border: 1px solid #000;width: 50px;height: 50px;padding: 15px;cursor: pointer; text-align: center;background-color: rgb(219, 219, 219); border-radius: 10%;margin: 10px;}
? ? ? ? body>div>ul>li:hover{background-color: rgb(126, 126, 126);border: 1px solid rgb(255, 228, 228);border: 1px solid rgb(201, 201, 201);}
? ? ? ? body>div>span{position: absolute;font-size: 5px;top: 380px;left: 230px;color: rgb(94, 94, 94);}
? ? </style>
</head>
<body>
? ? <div>
? ? ? ? <div></div>
? ? ? ? <ul>
? ? ? ? ? ? <li>0</li>
? ? ? ? ? ? <li>C</li>
? ? ? ? ? ? <li>/</li>
? ? ? ? ? ? <li>*</li>
? ? ? ? ? ? <li>7</li>
? ? ? ? ? ? <li>8</li>
? ? ? ? ? ? <li>9</li>
? ? ? ? ? ? <li>-</li>
? ? ? ? ? ? <li>4</li>
? ? ? ? ? ? <li>5</li>
? ? ? ? ? ? <li>6</li>
? ? ? ? ? ? <li>+</li>
? ? ? ? ? ? <li>1</li>
? ? ? ? ? ? <li>2</li>
? ? ? ? ? ? <li>3</li>
? ? ? ? ? ? <li>=</li>
? ? ? ? </ul>
? ? ? ? <span>隂陽G.M ?</span>
? ? </div>
? ? <script>
? ? ? ? var ul=document.querySelector("body>div>ul");
? ? ? ? var XS=document.querySelector("body>div>div");
? ? ? ? ul.onclick=function(e){
? ? ? ? ? ? if(e.target.nodeName=="LI"){
? ? ? ? ? ? ? ? switch(e.target.innerHTML){
? ? ? ? ? ? ? ? ? ? case "C":XS.innerHTML="";break;
? ? ? ? ? ? ? ? ? ? case "=":try{XS.innerHTML=eval(XS.innerHTML)}catch(err){XS.innerHTML="錯誤"};break;
? ? ? ? ? ? ? ? ? ? default: XS.innerHTML+=e.target.innerHTML;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</body>
</html>以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了js實現(xiàn)點擊煙花特效，幫助大家更好的利用js美化網(wǎng)頁，感興趣的朋友可以了解下2020-10-10
今天小編就為大家分享一篇layui點擊彈框頁面 表單請求的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
克隆javascript對象的三個方法整理，需要的朋友可以參考下。2011-01-01
這篇文章主要介紹了深入理解javascript的getTime()方法,需要的朋友可以參考下2017-02-02
js 正則驗證密碼強度(包含數(shù)字+特殊字符+英文字母大小寫)
密碼驗證是常見的網(wǎng)站注冊方法，本文主要介紹了js 正則驗證密碼強度(包含數(shù)字+特殊字符+英文字母大小寫)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
淺談ES6中箭頭函數(shù)與普通函數(shù)的區(qū)別
箭頭函數(shù)是ES6中一種新的函數(shù)的表達式，本文就來介紹一下ES6中箭頭函數(shù)與普通函數(shù)的區(qū)別，非常具有實用價值，需要的朋友可以參考下2023-05-05
頁面滾動加載事件，獲取元素在頁面里的top值根據(jù)滾動條的位置判斷何時顯示圖片；獲取元素集合 加載過的圖片從集合里刪除，具體實現(xiàn)如下，感興趣的朋友各位可以參考下哈2013-06-06
JavaScript實現(xiàn)創(chuàng)建自定義對象的常用方式總結(jié)
這篇文章主要介紹了JavaScript實現(xiàn)創(chuàng)建自定義對象的常用方式,結(jié)合實例形式總結(jié)分析了JavaScript工廠模式、構造函數(shù)模式、原型模式、組合模式等常用的自定義對象創(chuàng)建模式操作與使用技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了JS vs TS二分法博弈對比分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
網(wǎng)頁前臺通過js非法字符過濾代碼(罵人的話等等)
項目中如果需要過濾非法字符(你不想用戶輸入的任何字符)的話在前臺可以使用js過濾,同樣可以提高用戶體驗，以前都是后臺過濾，這樣雙重過濾用戶體驗更好。2010-05-05