使用html+css+js实现计算器
使用html+css+js实现计算器，开启你的计算之旅吧
效果图：
代码如下，复制即可使用：
<!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>Atas ialah kandungan terperinci 使用html+css+js实现计算器. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1384
52
Apakah kunci ac pada kalkulator?
Feb 24, 2023 am 10:19 AM
Ac pada kalkulator ialah kekunci "all clear" Nama penuh bahasa Inggeris ac ialah "All Clear", yang bermaksud "all clear key" bermaksud mengosongkan nilai dalam semua register; , tekan pertama Menekan kekunci ac akan mengosongkan semua nilai kecuali kandungan memori.
Apakah e dalam kalkulator
Oct 19, 2022 am 11:23 AM
E dalam kalkulator mewakili kuasa 10, yang bermaksud eksponen dengan asas 10. Contohnya, 1.99714E13 bersamaan dengan 19971400000000 menyatakan nombor dalam bentuk darab dengan kuasa ke-10 dipanggil tatatanda saintifik : Apabila kita ingin menandakan atau mengendalikan sesuatu yang lebih besar atau lebih kecil dengan bilangan digit yang banyak, kita boleh menggunakan tatatanda saintifik untuk mengelakkan pembaziran banyak ruang dan masa.
Ajar anda cara membuka kalkulator win10
Jul 12, 2023 pm 11:21 PM
Sistem win10 mempunyai banyak fungsi yang berkuasa, yang menarik ramai netizen untuk memuat turun, memasang dan menggunakannya Terdapat juga banyak alat praktikal, seperti alat kalkulator win10. Sesetengah netizen masih tidak tahu cara membuka kalkulator Win10. Biar saya ajar anda cara membuka kalkulator Win10. Kaedah 1: Cari dalam menu Mula 1. Pada desktop sistem Windows 10, klik item menu "Mula/Kalkulator". 2. Anda boleh membuka tetingkap kalkulator Windows 10. Kaedah 2: Buka Carian Cortana 1. Pada desktop Windows 10, klik ikon "Carian Cortana" di penjuru kiri sebelah bawah bar tugas. 2. Masukkan kata kunci "kalkulator" dalam menu pop timbul untuk mencari, dan klik item menu kalkulator dalam hasil carian.
无存储功能的计算器指的是什么
Dec 29, 2020 am 10:59 AM
无存储功能的计算器指的是科学型计算器；科学型计算器是电子计算器的一种，可进行乘方、开方、指数、对数、三角函数、统计等方面的运算，又称函数计算器；计算器一般由运算器、控制器、存储器、键盘、显示器、电源和一些可选外围设备及电子配件组成。
Kalkulator jujukan Fibonacci yang cekap ditulis dalam PHP
Mar 21, 2024 am 10:06 AM
Kalkulator jujukan Fibonacci yang cekap: Pelaksanaan PHP jujukan Fibonacci ialah masalah matematik yang sangat klasik Peraturannya ialah setiap nombor adalah sama dengan jumlah dua nombor sebelumnya, iaitu, F(n)=F(n -1)+F. (n-2), di mana F(0)=0 dan F(1)=1. Apabila mengira jujukan Fibonacci, ia boleh dilaksanakan secara rekursif, tetapi masalah prestasi akan berlaku apabila nilai meningkat. Oleh itu, artikel ini akan memperkenalkan cara menulis Fibonacci yang cekap menggunakan PHP
Bagaimana untuk melaksanakan fungsi kalkulator mudah menggunakan JavaScript?
Oct 27, 2023 pm 02:51 PM
Bagaimana untuk melaksanakan fungsi kalkulator mudah menggunakan JavaScript? Kalkulator adalah salah satu alat yang biasa digunakan dalam kehidupan seharian kita. Ia boleh digunakan untuk melaksanakan operasi matematik yang mudah. Hari ini, kami akan menggunakan JavaScript untuk melaksanakan fungsi kalkulator mudah. Dalam artikel ini, saya akan menunjukkan kepada anda cara menulis kod dalam JavaScript untuk melaksanakan operasi matematik asas dan antara muka kalkulator. Pertama, kita perlu mencipta fail HTML yang mengandungi teks untuk memaparkan hasil operasi.
Bagaimana untuk menukar mata wang pada kalkulator sistem Mac - Bagaimana untuk menukar mata wang pada kalkulator sistem Mac
Mar 18, 2024 pm 03:58 PM
Rakan-rakan, adakah anda tahu cara menukar mata wang pada kalkulator sistem Mac Hari ini saya akan menerangkan cara menukar mata wang pada kalkulator sistem Mac Jika anda berminat, sila datang dan lihat dengan saya. Langkah 1: Buka kalkulator sistem Mac, klik Tukar pada bar menu. Langkah 2: Dalam menu Penukaran, klik Mata Wang. Langkah 3: Selepas memilih mata wang untuk ditukar, klik butang Tukar.
Apakah kunci ac pada kalkulator?
Aug 18, 2023 am 09:48 AM
Kekunci "AC" pada kalkulator bermaksud "All Clear". Menekan kekunci AC akan mengosongkan semua input dan operasi dalam kalkulator dan menetapkan semula kalkulator kepada keadaan awalnya, yang sama dengan memulakan semula pengiraan.
