HTML+CSS+JS实现 ❤️基于Javascript简单计算器特效❤️
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JS实现 ❤️基于Javascript简单计算器特效❤️
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
🍅 作者主頁：Java李楊勇?
🍅 簡介：Java領域優質創作者🏆、Java李楊勇公號作者? ?簡歷模板、學習資料、面試題庫、技術互助【關注我，都給你】
🍅 歡迎點贊 👍 收藏 ?留言 📝 ??
效果演示：?文末獲取源碼?
代碼目錄：
主要代碼實現：
CSS樣式：
body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background-color: #dcf3f3; }.overall {background-color: #e3e7f1;--button-width: 80px;--button-height: 80px;box-shadow: -8px -8px 16px -10px rgba(255, 255, 255, 1), 8px 8px 16px -10px rgba(0, 0, 0, .9);padding: 44px 24px 24px 24px;border-radius: 20px;display: grid;grid-template-areas: "result result result result" "AC plus-minus percent divide" "num-7 num-8 num-9 multiply" "num-4 num-5 num-6 subtract" "num-1 num-2 num-3 add" "num-0 num-0 dot equal";grid-template-columns: repeat(4, var(--button-width));grid-template-rows: repeat(6, var(--button-height)); }/* ??‰é’? */.overall button {display: block;outline: none;border-radius: calc(var(--button-height)/3);font-size: 24px;font-family: Helvetica;font-weight: normal;margin: 10px;padding: 0;border: 0;color: rgb(66, 85, 105);background: linear-gradient(135deg, rgb(177, 202, 219)0%, rgba(246, 246, 246, 1)100%);box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1), 4px 4px 10px -8px rgba(0, 0, 0, .9); }HTML代碼 :
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>簡單計算器</title><link rel="stylesheet" type="text/css" href="css/mystyle.css" /></head><body><div class="overall"><div><input type="text" class="output" onfocus="this.blur();" value="0" id="result"></div><button style="grid-area :AC " onClick="clearzero()" color:gray><b>AC</b></button><button style="grid-area :plus-minus" onClick="calToggle()">±</button><button style="grid-area :percent" onClick="calPercentage()">%</button><button style="grid-area :add" onClick="append('+')">+</button><button style="grid-area :subtract" onClick="append('-')">-</button><button style="grid-area :multiply" onClick="append('×')">×</button><button style="grid-area :divide" onClick="append('÷')">÷</button><button style="grid-area :equal " onClick="equal()"><b>=</b></button><button style="grid-area :num-1" onClick="appendNum(1)">1</button><button style="grid-area :num-2" onClick="appendNum(2)">2</button><button style="grid-area :num-3" onClick="appendNum(3)">3</button><button style="grid-area :num-4" onClick="appendNum(4)">4</button><button style="grid-area :num-5" onClick="appendNum(5)">5</button><button style="grid-area :num-6" onClick="appendNum(6)">6</button><button style="grid-area :num-7" onClick="appendNum(7)">7</button><button style="grid-area :num-8" onClick="appendNum(8)">8</button><button style="grid-area :num-9" onClick="appendNum(9)">9</button><button style="grid-area :num-0" onClick="appendNum(0)">0</button><button style="grid-area :dot" onClick="dot('.')">.</button></div><script type="text/javascript" src="js/mystyle.js"></script></body></html>上面的JS文件需要引入
源碼獲取
大家可以點贊、收藏、關注、評論我啦 、查看博主主頁或下方微信公眾號獲取~！
打卡 文章 更新?46?/? 100天
精彩推薦更新中：
HTML5大作業實戰案例《100套》
Java畢設項目精品實戰案例《100套》
總結
以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️基于Javascript简单计算器特效❤️的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于javaweb(springboot
- 下一篇： HTML+CSS+JS实现 ❤️发光糖果