使用html+css+js實現計算器的代碼示例
今天小編給大家分享的是使用html+css+js實現計算器的代碼示例，相信很多人都不太了解，為了讓大家更加了解html+css+js實現計算器的代碼，所以給大家總結了以下內容，一起往下看吧。一定會有所收獲的哦。
成都創新互聯主營鞍山網站建設的網絡公司,主營網站建設方案,成都APP應用開發,鞍山h5小程序設計搭建,鞍山網站營銷推廣歡迎鞍山等地區企業咨詢
效果圖：
代碼如下，復制即可使用：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<style>
/* 主體 */
.counter{
width: 396px;
height: 486px;
background-color: #F2F2F2;
border: 1px solid #C2C3C6;
margin: 50px auto;
}
/* 顯示框 */
#box {
height: 70px;
width: 336px;
background-color: #323232;
border: none;
margin: 40px 25px 32px 25px;
font: 700 40px/70px "微軟雅黑";
color: #ffffff;
padding-right: 10px;
}
/* 功能區 */
.funct {
padding: 0 20px;
position: relative;
}
/* 按鈕樣式 */
.funct input {
height: 40px;
width: 60px;
margin: 10px 10px;
font: 400 20px/40px "微軟雅黑";
}
/* 清除按鈕樣式 */
.funct #res {
width: 150px;
}
/* + - = . 按鈕浮動 */
#add, #reduce, #round, #sum {
position: absolute;
right: 0px;
bottom: 0px;
}
/* 減號位置 */
#reduce {
right: 30px;
top: 60px;
}
/* 加號位置 */
#add {
right: 30px;
top: 120px;
}
/* 等于號位置 */
#sum {
height: 100px;
right: 30px;
bottom: 0px;
}
/* 小數點位置 */
#round {
right: 120px;
bottom: 0px;
}
/* 0 */
#zero {
width: 150px;
}
/* 數字區 */
.numb {
width: 280px;
}
</style>
<script>
window.onload = function(){
// 數據容器
var left = 0; //被除數
var right = 0; //除數
var sum = 0; //和
var numb = 0; //此變量用來限制點的輸入
// 獲取id并返回
function $(id){
return document.getElementById(id);
}
// 運算函數
function operation(id){
if( $("box").value != "0"){
if(left == 0)
{
$("box").value = $("box").value + $(id).value;
left = parseFloat($("box").value);
}
}
//numb 轉為number類型 讓點可以再輸入一次
numb = 0;
}
// 數字盤函數
function figure(id){
// 判斷被除數是否有值
if(left == 0)
{
// 改變value默認值
if ($("box").value === "0" ) {
$("box").value = $(id).value;
}else{
$("box").value = $("box").value + $(id).value;
}
}else{
$("box").value = $("box").value + $(id).value;
var str = $("box").value;
var num = "";
// 獲取第二次輸入的數字
for (var i = 0; i < str.length; i++) {
// 判斷加減乘除
if(str[i]== "+"){
for (var j = i + 1; j < str.length; j++) {
num+=str[j];
};
right = parseFloat(num);
}else if(str[i]== "-"){
for (var j = i + 1; j < str.length; j++) {
num+=str[j];
};
right = parseFloat(num);
}
else if(str[i]== "*"){
for (var j = i + 1; j < str.length; j++) {
num+=str[j];
};
right = parseFloat(num);
}
else if(str[i]== "/"){
for (var j = i + 1; j < str.length; j++) {
num+=str[j];
};
right = parseFloat(num);
}
};
}
// 清空所有數據
if(sum != 0){
left = 0;
right = 0;
sum = 0;
numb = 0;
$("box").value = $(id).value;
}
}
// 數字鍵盤區----------------------------------------------------------開始
$("one").onclick = function(){
figure("one");
}
$("two").onclick = function(){
figure("two");
}
$("three").onclick = function(){
figure("three");
}
$("four").onclick = function(){
figure("four");
}
$("five").onclick = function(){
figure("five");
}
$("six").onclick = function(){
figure("six");
}
$("seven").onclick = function(){
figure("seven");
}
$("eight").onclick = function(){
figure("eight");
}
$("nine").onclick = function(){
figure("nine");
}
$("zero").onclick = function(){
figure("zero");
}
// 數字鍵盤區----------------------------------------------------------結束
//功能區-----------------------------------------------------------開始
// 加
$("add").onclick = function(){
operation("add");
}
//減
$("reduce").onclick = function(){
operation("reduce");
}
// 乘
$("ride").onclick = function(){
operation("ride");
}
// 除
$("division").onclick = function(){
operation("division");
}
// 點
$("round").onclick = function(){
// 限制點的輸入
if(numb === 0 && sum == 0){ //numb值等于0 類型等于number
$("box").value = $("box").value + $("round").value;
numb = ($("box").value); //numb賦值為字符串
}
}
// 清除
$("res").onclick = function(){
if($("box").value != "0")
{
left = 0;
right = 0;
sum = 0;
numb = 0;
$("box").value = "0";
}
}
// 求和
$("sum").onclick = function(){
var symbol = "";
if(left != 0 && right != 0){
for (var i = 0; i < $("box").value.length; i ++ ) {
symbol = $("box").value[i];
if(symbol == "+"){
sum = left + right;
$("box").value = sum;
}else if(symbol == "-"){
sum = left - right;
$("box").value = sum;
}
else if(symbol == "*"){
sum = left * right;
$("box").value = sum;
}
else if(symbol == "/"){
sum = left / right;
$("box").value = sum;
}
};
}
}
}
// 功能區--------------------------------------------------------------------------結束
</script>
</head>
<body>
</div>
<div>
<input type="text" id="box" style="text-align:right" readOnly="true" value="0">
<div>
<input type="reset" id="res" value="C">
<input type="button" id="division" value="/">
<input type="button" id="ride" value="*">
<input type="button" id="add" value="+">
<input type="button" id="reduce" value="-">
<input type="button" id="round" value=".">
<input type="button" id="sum" value="=">
<div>
<input type="button" id="one" value="1">
<input type="button" id="two" value="2">
<input type="button" id="three" value="3">
<input type="button" id="four" value="4">
<input type="button" id="five" value="5">
<input type="button" id="six" value="6">
<input type="button" id="seven" value="7">
<input type="button" id="eight" value="8">
<input type="button" id="nine" value="9">
<input type="button" id="zero" value="0">
</div>
</div>
</div>
</body>
</html>關于使用html+css+js實現計算器的代碼示例就分享到這里了，希望以上內容可以對大家有一定的參考價值，可以學以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。
網頁題目：使用html+css+js實現計算器的代碼示例
分享URL：http://www.yijiale78.com/article48/gjhdhp.html
成都網站建設公司_創新互聯，為您提供標簽優化、網站內鏈、搜索引擎優化、響應式網站、靜態網站、微信小程序
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
- 移動網站建設中不可或缺的四大要素 2016-11-04
- 移動網站建設時要注意視覺的設計及優化 2016-10-05
- 成都網站建設與移動網站建設的關系 2016-10-29
- 移動網站建設的7條注意事項 2016-10-03
- 關于企業移動網站建設推廣計劃一點建議 2021-07-29
- 移動網站建設的基本技巧有哪些？ 2022-09-25
- 移動網站建設應特別注意哪些事項 2022-11-16
- 移動網站建設與電腦端網站建設有何不同？應如何提高用戶體驗？ 2022-10-28
- 移動網站建設必備的基本常識 2016-11-16
- 移動網站建設時這些問題千萬不能出現！ 2021-04-28
- 深圳移動網站建設需要注意的問題 2022-05-03
- 移動網站建設：從瀏覽者的角度提出幾點優化建議 2021-07-26