html css制作计算器,使用html+css+js实现计算器
使用html+css+js實現計算器，開啟你的計算之旅吧
效果圖：
代碼如下，復制即可使用：
/* 主體 */
.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;
}
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;
}
};
}
}
}
// 功能區--------------------------------------------------------------------------結束
總結
以上是生活随笔為你收集整理的html css制作计算器,使用html+css+js实现计算器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： gulp html 压缩,gulp-gz
- 下一篇： html页面怎么让高度充满屏幕,怎么让一