生活随笔
收集整理的這篇文章主要介紹了
用css美化的简易计算器 |完整代码及注解
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果展示圖：
思路：
1.確定計算機頁面的具體內容，生成按鈕，文本框等
2.實現按鍵的具體功能，編寫函數
3.美化界面
計算器頁面的完整代碼
cal.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"><link rel
="stylesheet" href
="style.css"><title
>calculator
</title
>
</head
>
<body
><div id
="cal"><!-- 輸入“div#”就會自己完成基本語法
,#后面如果有輸入，id就是對應值
--><div id
="kong"></div
><div id
="shuru"><input type
="text" id
="shu"></div
><div id
="anniu"><ul
class="center"><li
class="an3" onclick
="clear_num()">C</li
><li
class="an3" onclick
="show('.')">.</li
><li
class="an3" onclick
="back_one()">←
</li
><li
class="an3" onclick
="show('/')">÷
</li
><li
class="an1" onclick
="show('1')">1</li
><li
class="an1" onclick
="show('2')">2</li
><li
class="an1" onclick
="show('3')">3</li
><li
class="an3" onclick
="show('*')">×
</li
><li
class="an1" onclick
="show('4')">4</li
><li
class="an1" onclick
="show('5')">5</li
><li
class="an1" onclick
="show('6')">6</li
><li
class="an3" onclick
="show('+')">+</li
><li
class="an1" onclick
="show('7')">7</li
><li
class="an1" onclick
="show('8')">8</li
><li
class="an1" onclick
="show('9')">9</li
><li
class="an3" onclick
="show('-')">-</li
><li
class="an3" onclick
="show('(')">(</li
><li
class="an1" onclick
="show('0')">0</li
><li
class="an3" onclick
="show(')')">)</li
><li
class="an3" onclick
="equal()">=</li
></ul
></div
></div
><script
>function show(num){var result
=document
.getElementById('shu').value
;document
.getElementById('shu').value
+=num
;}function equal(){var shuchu
=document
.getElementById('shu').value
;var result
=eval(shuchu
);document
.getElementById('shu').value
=result
;}function clear_num(){var result
=document
.getElementById('shu').value
;document
.getElementById('shu').value
=' ';}function back_one(){var backone
=document
.getElementById('shu');backone
.value
=backone
.value
.substring(0,backone
.value
.length
-1);}</script
></body
>
</html
>
對應的css美化代碼
style.css
*{user-select: none
;
}body{background-color: #60afe4
;
}
#cal{width: 280px
;height: 440px
;background-color:#f4f1f4
;-webkit-border-radius:10px
;-moz-border-radius: 10px
;border-radius: 10px
;margin: 10% auto
;
}
#kong{width: 100%
;height: 35px
;
}
#shuru{width: 100%
;height: 65px
;background-color: #f4f1f4
;
}
#shuru input{margin: 6px
;width: 95%
;height: 60px
;background-color:#e4dae4
;text-align: right
; border: none
;color:#60afe4
;font-size: 30px
;
}#anniu{width: 100%
;height: 330px
;float: left
;
}
#anniu li{list-style-type: none
;float: left
;
}#anniu .an1{width: 50px
;height: 50px
;background-color: #7fc1ee
;margin: 5px
;-webkit-border-radius:50px
;-moz-border-radius: 50px
;border-radius: 50px
;text-align: center
;line-height: 50px
;color:#f4f1f4
;font-size: 25px
;
}#anniu .an2{width: 110px
;height: 50px
;background-color: #60afe4
;margin: 5px
;-webkit-border-radius:50px
;-moz-border-radius: 50px
;border-radius: 50px
;text-align: center
;line-height: 50px
;color:#f4f1f4
;font-size: 25px
;
}
#anniu .center{position: relative
;right: 20px
;
}
#anniu .an3{width: 50px
;height: 50px
;background-color: #60afe4
;margin: 5px
;-webkit-border-radius:50px
;-moz-border-radius: 50px
;border-radius: 50px
;text-align: center
;line-height: 50px
;color:#f4f1f4
;font-size: 25px
;
}
總結
以上是生活随笔為你收集整理的用css美化的简易计算器 |完整代码及注解的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
