interface Web
Questions et réponses frontales
Implémenter la calculatrice en utilisant html+css+js
Implémenter la calculatrice en utilisant html+css+js
Utilisez html+css+js pour implémenter la calculatrice et commencer votre parcours de calcul
Rendu :
Le code est comme suit, copiez et utilisez :
<!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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quelle touche est ac sur la calculatrice ?
Feb 24, 2023 am 10:19 AM
Le ac sur la calculatrice est la touche « all clear ». Le nom anglais complet de ac est « All Clear », ce qui signifie « all clear key » ; appuyer sur la touche ac signifie effacer les valeurs dans tous les registres ; , la première pression sur la touche ac effacera toutes les valeurs sauf le contenu de la mémoire.
Qu'est-ce que e dans la calculatrice
Oct 19, 2022 am 11:23 AM
Le e dans la calculatrice représente la puissance de 10, c'est-à-dire l'exposant de base 10. Par exemple, 1,99714E13 est égal à 19971400000000, exprimant un nombre sous la forme d'un multiplié par la nième puissance de 10. : Lorsque nous voulons marquer ou faire fonctionner quelque chose de plus grand ou de plus petit avec un grand nombre de chiffres, nous pouvons utiliser la notation scientifique pour éviter de perdre beaucoup d'espace et de temps.
Apprenez à ouvrir la calculatrice Win10
Jul 12, 2023 pm 11:21 PM
Le système Win10 possède de nombreuses fonctions puissantes, qui incitent de nombreux internautes à le télécharger, à l'installer et à l'utiliser. Il existe également de nombreux gadgets pratiques, tels que l'outil de calcul Win10. Certains internautes ne savent toujours pas comment ouvrir la calculatrice Win10. Laissez-moi vous apprendre à ouvrir la calculatrice Win10. Méthode 1 : Rechercher dans le menu Démarrer 1. Sur le bureau du système Windows 10, cliquez sur l'élément de menu « Démarrer/Calculatrice ». 2. Vous pouvez ouvrir la fenêtre de la calculatrice de Windows 10. Méthode 2 : ouvrir Cortana Search 1. Sur le bureau Windows 10, cliquez sur l'icône « Cortana Search » dans le coin inférieur gauche de la barre des tâches. 2. Entrez le mot-clé « calculatrice » dans le menu contextuel pour effectuer la recherche, puis cliquez sur l'élément de menu calculatrice dans les résultats de la recherche.
Qu'est-ce qu'une calculatrice sans fonction de stockage ?
Dec 29, 2020 am 10:59 AM
La calculatrice sans fonction de stockage fait référence à la calculatrice scientifique ; la calculatrice scientifique est un type de calculatrice électronique qui peut effectuer des opérations telles que l'exponentiation, la racine carrée, l'exposant, le logarithme, la fonction trigonométrique, les statistiques, etc., également connue sous le nom de calculatrice de fonction. d'une calculatrice, d'un contrôleur, d'une mémoire, d'un clavier, d'un écran, d'une alimentation et de certains périphériques et accessoires électroniques en option.
Un calculateur de séquence de Fibonacci efficace écrit en PHP
Mar 21, 2024 am 10:06 AM
Calculateur de séquence de Fibonacci efficace : l'implémentation PHP de la séquence de Fibonacci est un problème mathématique très classique. La règle est que chaque nombre est égal à la somme des deux nombres précédents, c'est-à-dire F(n)=F(n -1)+F. (n-2), où F(0)=0 et F(1)=1. Lors du calcul de la séquence de Fibonacci, elle peut être implémentée de manière récursive, mais des problèmes de performances surviendront à mesure que la valeur augmente. Par conséquent, cet article présentera comment écrire un Fibonacci efficace en utilisant PHP
Comment implémenter une fonction de calculatrice simple en utilisant JavaScript ?
Oct 27, 2023 pm 02:51 PM
Comment implémenter une fonction de calculatrice simple en utilisant JavaScript ? La calculatrice est l’un des outils couramment utilisés dans notre vie quotidienne. Elle peut être utilisée pour effectuer des opérations mathématiques simples. Aujourd'hui, nous utiliserons JavaScript pour implémenter une fonction de calculatrice simple. Dans cet article, je vais vous montrer comment écrire du code en JavaScript pour implémenter des opérations mathématiques de base et des interfaces de calculatrice. Tout d’abord, nous devons créer un fichier HTML contenant un texte permettant d’afficher les résultats de l’opération.
Comment convertir une devise sur la calculatrice système Mac - Comment convertir une devise sur la calculatrice système Mac
Mar 18, 2024 pm 03:58 PM
Mes amis, savez-vous comment convertir des devises sur une calculatrice système Mac ? Aujourd'hui, je vais vous expliquer comment convertir des devises sur une calculatrice système Mac. Si vous êtes intéressé, venez jeter un œil avec moi, j'espère que cela pourra vous aider. Étape 1 : Ouvrez la calculatrice du système Mac, cliquez sur Convertir dans la barre de menu. Étape 2 : Dans le menu Conversion, cliquez sur Devise. Étape 3 : Après avoir sélectionné la devise à convertir, cliquez sur le bouton Convertir.
Quelle touche est ac sur la calculatrice ?
Aug 18, 2023 am 09:48 AM
La touche « AC » sur la calculatrice signifie « All Clear ». Appuyer sur la touche AC effacera toutes les entrées et opérations de la calculatrice et réinitialisera la calculatrice à son état initial, ce qui équivaut à redémarrer un calcul.
