Bonjour,
j'aimerai utiliser ce code . pour ce faire je veux que la partie ou s'affiche le résultat soit un champ de type input.
ici le résultat est 555555...
j'ai l'impression que c'est dans cette partie.
<div class="calculator">
<div class="output">
<div id="calculation">
<!-- Display for calculation -->
</div>
<div id="input">
<!-- Display for Input & Result -->
</div>
</div>
donc je veux avoir quelque chose du genre:
<div class="calculator">
<div class="output">
<div id="calculation">
<!-- Display for calculation -->
</div>
<div id="input">
<!-- Display for Input & Result -->
<input type="text" name="resultat" class="form-control" value="5555555" >
</div>
</div>
</code>
voici le code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Calculator - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
*,:focus{outline:0}
.clear,.output>*{text-transform:uppercase}
:root{font-size:25px}
*{margin:0;padding:0}
body{font-family:Inconsolata,monospace;background:#ABCEA7;background:-webkit-linear-gradient(to top,#ABCEA7,#C48B91);background:linear-gradient(to top,#ABCEA7,#C48B91)}
button{padding:.25rem;font-size:1.25rem;font-family:inherit;border:1px solid rgba(255,255,255,.2);border-radius:5px;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;box-shadow:0 4px #C09C98!important;transition:all .3s ease}
button:hover{border:none;background:#EEA9A8;cursor:pointer;box-shadow:0 4px #EF7475!important;transition:.3s}
button:active{top:4px;transition:.3s;background:#EEA9A8!important}
.container{height:100vH;display:flex;justify-content:center;align-items:center}
.calculator{min-width:16rem;padding:.75rem;background:rgba(255,255,255,.6);border-radius:5px;box-shadow:1px 1.5px 3px 2px grey}
.output{margin-bottom:1.75rem;padding:.8rem .5rem;background:rgba(0,0,0,.2);border-radius:3px;box-shadow:inset 0 4px rgba(0,0,0,.2);grid-column:1/span 4}
.output>*{color:#fff;text-align:right;text-shadow:1px 1px 1px #000}
#calculation{height:1rem;margin-bottom:.5rem;font-size:1rem;color:rgba(255,255,255,.8)}
#input{height:1.5rem;font-size:1.5rem}
.number{background-color:rgba(255,255,255,.65)}
.number:hover{box-shadow:0 0 3px 1px rgba(255,255,255,.75)}
.number:active{background-color:rgba(255,255,255,.9)}
.clear{font-size:1rem;background-color:rgba(240,120,120,.5)}
.clear:hover{box-shadow:0 0 3px 1px rgba(240,120,120,.6)}
.clear:active{background-color:rgba(240,120,120,.8)}
.equal{background:rgba(70,240,90,.4)}
.equal:hover{box-shadow:0 0 3px 1px rgba(70,240,90,.5)}
.equal:active{background-color:rgba(80,240,100,.7)}
.dot,.neg,.operator{background-color:rgba(0,0,0,.15)}
.dot:hover,.neg:hover,.operator:hover{box-shadow:0 0 3px 1px rgba(0,0,0,.2)}
.dot:active,.neg:active,.operator:active{background-color:rgba(0,0,0,.25)}
#c{background:rgba(240,10,10,.5)}
#c:hover{box-shadow:0 0 3px 1px rgba(240,10,10,.55)}
#c:active{background:rgba(240,10,10,.6)}
.button-field{display:grid;grid-gap:.25rem;grid-template-rows:repeat(5,1fr);grid-template-columns:repeat(4,1fr)}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="calculator">
<div class="output">
<div id="calculation">
<!-- Display for calculation -->
</div>
<div id="input">
<!-- Display for Input & Result -->
</div>
</div>
<div class="button-field">
<button type="button" id="c" class="clear" name="clear"><span>c</span></button>
<button type="button" id="ce" class="clear" name="clear-entry"><span>ce</span></button>
<button type="button" id="del" class="clear" name="delete"><span>del</span></button>
<button type="button" id="/" class="operator" name="devide">÷</button>
<button type="button" id="7" class="number" name="7">7</button>
<button type="button" id="8" class="number" name="8">8</button>
<button type="button" id="9" class="number" name="9">9</button>
<button type="button" id="*" class="operator" name="multiply">×</button>
<button type="button" id="4" class="number" name="4">4</button>
<button type="button" id="5" class="number" name="5">5</button>
<button type="button" id="6" class="number" name="6">6</button>
<button type="button" id="-" class="operator" name="substract">−</button>
<button type="button" id="1" class="number" name="1">1</button>
<button type="button" id="2" class="number" name="2">2</button>
<button type="button" id="3" class="number" name="3">3</button>
<button type="button" id="+" class="operator" name="add">+</button>
<button type="button" id="negative" class="neg" name="+/-">±</button>
<button type="button" id="0" class="number" name="0">0</button>
<button type="button" id="." class="dot" name="dot">.</button>
<button type="button" id="=" class="equal" name="equal">=</button>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
const buttons = document.querySelectorAll("button");
const currCalc = document.querySelector("#calculation");
const currInput = document.querySelector("#input");
const checkRE = /(\d|\))$/; // RegExp matches, if last character of string is number or ')'
const re1 = /(0+)$/g; // RegExp matches all 0 at the en of a string
const re2 = /\.$/; // RegExp matches dot at the end
let calc = [];
let input = [];
let res;
let intRes = false;
let disCalc = [];
let disResult;
let str;
function onNumber(el) {
// print number, unless user tries to input multiple zeros in the beginning & input-display is full
if (
((el === "0" && (input[0] !== "0" || input.includes("."))) || el !== "0") &&
input.length < 20
) {
input[0] === "0" && !input.includes(".") && el !== "0"
? (input = [])
: input;
input.push(el);
currInput.innerHTML = `${input.join("")}`;
}
}
function onClear(el) {
if (el === "c") {
// clear all
calc = [];
input = [];
intRes = false;
res = undefined;
displayCalculation(calc, false);
currInput.innerHTML = "";
// console.log(calc, input, negative, intRes, res);
} else if (el === "ce") {
// clear entry (input)
input = [];
currInput.innerHTML = "";
} else if (el === "del" && input.length > 0) {
// delete last input character
input.splice(-1);
currInput.innerHTML = `${input.join("")}`;
}
}
function onNeg() {
// toggle between ± only if input is not 0
if (input.length !== 0 && eval(input.join("")) !== 0) {
let negative;
input[0] === "-" ? (negative = true) : (negative = false);
// if-condition for display-reasons
if ((!negative && input.length < 20) || negative) {
negative ? input.shift() : input.unshift("-");
currInput.innerHTML = `${input.join("")}`;
}
}
}
function onDot() {
// print dot, unless input is already a decimal & condition for display-reasons
if (!input.includes(".") && input.length < 20) {
input.length > 0 ? input.push(".") : input.push("0", ".");
currInput.innerHTML = `${input.join("")}`;
}
}
function onOperator(operator) {
// eliminate redundant 0 from input end(re1), and dot if necessary(re2)
input.join("").includes(".") && re1.test(input.join(""))
? (input = input
.join("")
.replace(re1, "")
.replace(re2, "")
.split(""))
: input;
// run only, if input ends with checkRE OR
// calc isn't empty and ends with checkRE => || (calc.length > 0 && checkRE.test(calc))
if (checkRE.test(input)) {
// input in calc, dependend if input is negative or not ; then reset input
eval(input.join("")) < 0
? calc.push(`(${input.join("")})`)
: calc.push(`${input.join("")}`);
input = [];
// operator in calc
calc.push(operator);
// display current input and calc
displayCalculation(calc, false);
currInput.innerHTML = `${input.join("")}`;
}
}
function onEqual() {
// eliminate redundant 0 from input end(re1), and dot if necessary(re2)
input.join("").includes(".") && re1.test(input.join(""))
? input = input
.join("")
.replace(re1, "")
.replace(re2, "")
.split("")
: input;
// run only if input ends with checkRE
if (checkRE.test(input)) {
// input in calc, dependend if input is negative or not ; then reset input
eval(input.join("")) < 0
? calc.push(`(${input.join("")})`)
: calc.push(`${input.join("")}`);
input = [];
// resolve calculation, only if calc ends with checkRE
if (checkRE.test(calc)) {
res = eval(calc.join(""));
// display calculation and result
displayCalculation(calc, true);
displayResult(res);
}
}
}
function followUp(withIntRes) {
if (withIntRes) {
input = res.toString().split("");
}
calc = [];
res = undefined;
intRes = undefined;
currCalc.innerHTML = `${calc}`;
}
function displayResult(res) {
if (res > 99999999999999999999 || res < -9999999999999999999) {
disResult = "error";
calc = [];
input = [];
res = [];
intRes = false;
displayCalculation([], false);
} else {
disResult = res;
intRes = true;
}
currInput.innerHTML = `${disResult}`;
}
function displayCalculation(calcArr, final) {
final ? calcArr.push("=") : calcArr;
str = calcArr.join("");
if (str.length > 30) {
str = str.substr(-29);
disCalc = `…${str}`;
} else {
disCalc = str;
}
currCalc.innerHTML = disCalc;
}
function calculator() {
if (this.className === "number") {
if (intRes) {
followUp(false);
}
onNumber(this.id);
} else if (this.className === "clear") {
onClear(this.id);
} else if (this.id === "negative") {
if (intRes) {
followUp(true);
}
onNeg();
} else if (this.className === "dot") {
if (intRes) {
followUp(false);
}
onDot();
} else if (this.className === "operator") {
if (intRes) {
followUp(true);
}
onOperator(this.id);
} else if (this.className === "equal") {
onEqual();
}
}
buttons.forEach(button => button.addEventListener("click", calculator));
});
</script>
</body>
- Messages postés
- 27059
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 14 décembre 2019
318 -- Messages postés
- 27059
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 14 décembre 2019
318 -var divInp = document.getElementById('input'); var x = document.createElement("INPUT"); x.setAttribute("type", "text"); x.setAttribute("name", "password"); x.value = `${disResult}`; divInp.appendChild(x);- Messages postés
- 496
- Date d'inscription
- lundi 24 août 2009
- Statut
- Membre
- Dernière intervention
- 8 novembre 2019
-Et ensuite...il faut placer ton input dans ta page...
toujours pas de recuperation de la saisie lorsqu'on post
voici tout le code :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- This file has been downloaded from Bootsnipp.com. Enjoy! --> <title>Calculator - Bootsnipp.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> *,:focus{outline:0} .clear,.output>*{text-transform:uppercase} :root{font-size:25px} *{margin:0;padding:0} body{font-family:Inconsolata,monospace;background:#ABCEA7;background:-webkit-linear-gradient(to top,#ABCEA7,#C48B91);background:linear-gradient(to top,#ABCEA7,#C48B91)} button{padding:.25rem;font-size:1.25rem;font-family:inherit;border:1px solid rgba(255,255,255,.2);border-radius:5px;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;box-shadow:0 4px #C09C98!important;transition:all .3s ease} button:hover{border:none;background:#EEA9A8;cursor:pointer;box-shadow:0 4px #EF7475!important;transition:.3s} button:active{top:4px;transition:.3s;background:#EEA9A8!important} .container{height:100vH;display:flex;justify-content:center;align-items:center} .calculator{min-width:16rem;padding:.75rem;background:rgba(255,255,255,.6);border-radius:5px;box-shadow:1px 1.5px 3px 2px grey} .output{margin-bottom:1.75rem;padding:.8rem .5rem;background:rgba(0,0,0,.2);border-radius:3px;box-shadow:inset 0 4px rgba(0,0,0,.2);grid-column:1/span 4} .output>*{color:#fff;text-align:right;text-shadow:1px 1px 1px #000} #calculation{height:1rem;margin-bottom:.5rem;font-size:1rem;color:rgba(255,255,255,.8)} #input{height:1.5rem;font-size:1.5rem} .number{background-color:rgba(255,255,255,.65)} .number:hover{box-shadow:0 0 3px 1px rgba(255,255,255,.75)} .number:active{background-color:rgba(255,255,255,.9)} .clear{font-size:1rem;background-color:rgba(240,120,120,.5)} .clear:hover{box-shadow:0 0 3px 1px rgba(240,120,120,.6)} .clear:active{background-color:rgba(240,120,120,.8)} .equal{background:rgba(70,240,90,.4)} .equal:hover{box-shadow:0 0 3px 1px rgba(70,240,90,.5)} .equal:active{background-color:rgba(80,240,100,.7)} .dot,.neg,.operator{background-color:rgba(0,0,0,.15)} .dot:hover,.neg:hover,.operator:hover{box-shadow:0 0 3px 1px rgba(0,0,0,.2)} .dot:active,.neg:active,.operator:active{background-color:rgba(0,0,0,.25)} #c{background:rgba(240,10,10,.5)} #c:hover{box-shadow:0 0 3px 1px rgba(240,10,10,.55)} #c:active{background:rgba(240,10,10,.6)} .button-field{display:grid;grid-gap:.25rem;grid-template-rows:repeat(5,1fr);grid-template-columns:repeat(4,1fr)} </style> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <form id="form1" name="form1" method="post" action=""> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <label for="firstName">Login</label> <input type="text" name="pseudo" class="form-control" id="pseudo" value="<?php echo $_GET['id_user'] ; ?>" required> <div class="invalid-feedback"></div> </div> <div class="col-md-3"></div> </div> <br> <div class="calculator"> <div class="output"> <div id="calculation"> <!-- Display for calculation --> </div> <div id="input"> <!-- Display for Input & Result --> </div> </div> <div class="button-field"> <button type="button" id="c" class="clear" name="clear"><span>c</span></button> <button type="button" id="ce" class="clear" name="clear-entry"><span>ce</span></button> <button type="button" id="del" class="clear" name="delete"><span>del</span></button> <button type="button" id="/" class="operator" name="devide">÷</button> <button type="button" id="7" class="number" name="7">7</button> <button type="button" id="8" class="number" name="8">8</button> <button type="button" id="9" class="number" name="9">9</button> <button type="button" id="*" class="operator" name="multiply">×</button> <button type="button" id="4" class="number" name="4">4</button> <button type="button" id="5" class="number" name="5">5</button> <button type="button" id="6" class="number" name="6">6</button> <button type="button" id="-" class="operator" name="substract">−</button> <button type="button" id="1" class="number" name="1">1</button> <button type="button" id="2" class="number" name="2">2</button> <button type="button" id="3" class="number" name="3">3</button> <button type="button" id="+" class="operator" name="add">+</button> <button type="button" id="negative" class="neg" name="+/-">±</button> <button type="button" id="0" class="number" name="0">0</button> <button type="button" id="." class="dot" name="dot">.</button> <button type="button" id="=" class="equal" name="equal">=</button> </div> </div> <hr class="mb-4"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <input type="submit" class="btn btn-primary btn-lg btn-block" name="submit" value="Enregistrer" /> </div> <div class="col-md-3"></div> </div> </form> </div> </body> </html> <script type="text/javascript"> $(document).ready(function(){ const buttons = document.querySelectorAll("button"); const currCalc = document.querySelector("#calculation"); const currInput = document.querySelector("#input"); const checkRE = /(\d|\))$/; // RegExp matches, if last character of string is number or ')' const re1 = /(0+)$/g; // RegExp matches all 0 at the en of a string const re2 = /\.$/; // RegExp matches dot at the end let calc = []; let input = []; let res; let intRes = false; let disCalc = []; let disResult; let str; function onNumber(el) { // print number, unless user tries to input multiple zeros in the beginning & input-display is full if ( ((el === "0" && (input[0] !== "0" || input.includes("."))) || el !== "0") && input.length < 20 ) { input[0] === "0" && !input.includes(".") && el !== "0" ? (input = []) : input; input.push(el); currInput.innerHTML = `${input.join("")}`; } } function onClear(el) { if (el === "c") { // clear all calc = []; input = []; intRes = false; res = undefined; displayCalculation(calc, false); currInput.innerHTML = ""; // console.log(calc, input, negative, intRes, res); } else if (el === "ce") { // clear entry (input) input = []; currInput.innerHTML = ""; } else if (el === "del" && input.length > 0) { // delete last input character input.splice(-1); currInput.innerHTML = `${input.join("")}`; } } function onNeg() { // toggle between ± only if input is not 0 if (input.length !== 0 && eval(input.join("")) !== 0) { let negative; input[0] === "-" ? (negative = true) : (negative = false); // if-condition for display-reasons if ((!negative && input.length < 20) || negative) { negative ? input.shift() : input.unshift("-"); currInput.innerHTML = `${input.join("")}`; } } } function onDot() { // print dot, unless input is already a decimal & condition for display-reasons if (!input.includes(".") && input.length < 20) { input.length > 0 ? input.push(".") : input.push("0", "."); currInput.innerHTML = `${input.join("")}`; } } function onOperator(operator) { // eliminate redundant 0 from input end(re1), and dot if necessary(re2) input.join("").includes(".") && re1.test(input.join("")) ? (input = input .join("") .replace(re1, "") .replace(re2, "") .split("")) : input; // run only, if input ends with checkRE OR // calc isn't empty and ends with checkRE => || (calc.length > 0 && checkRE.test(calc)) if (checkRE.test(input)) { // input in calc, dependend if input is negative or not ; then reset input eval(input.join("")) < 0 ? calc.push(`(${input.join("")})`) : calc.push(`${input.join("")}`); input = []; // operator in calc calc.push(operator); // display current input and calc displayCalculation(calc, false); currInput.innerHTML = `${input.join("")}`; } } function onEqual() { // eliminate redundant 0 from input end(re1), and dot if necessary(re2) input.join("").includes(".") && re1.test(input.join("")) ? input = input .join("") .replace(re1, "") .replace(re2, "") .split("") : input; // run only if input ends with checkRE if (checkRE.test(input)) { // input in calc, dependend if input is negative or not ; then reset input eval(input.join("")) < 0 ? calc.push(`(${input.join("")})`) : calc.push(`${input.join("")}`); input = []; // resolve calculation, only if calc ends with checkRE if (checkRE.test(calc)) { res = eval(calc.join("")); // display calculation and result displayCalculation(calc, true); displayResult(res); } } } function followUp(withIntRes) { if (withIntRes) { input = res.toString().split(""); } calc = []; res = undefined; intRes = undefined; currCalc.innerHTML = `${calc}`; } function displayResult(res) { if (res > 99999999999999999999 || res < -9999999999999999999) { disResult = "error"; calc = []; input = []; res = []; intRes = false; displayCalculation([], false); } else { disResult = res; intRes = true; } var divInp = document.getElementById('input'); var x = document.createElement("INPUT"); x.setAttribute("type", "text"); x.setAttribute("name", "password"); x.value = `${disResult}`; divInp.appendChild(x); //currInput.innerHTML = `${disResult}`; } function displayCalculation(calcArr, final) { final ? calcArr.push("=") : calcArr; str = calcArr.join(""); if (str.length > 30) { str = str.substr(-29); disCalc = `…${str}`; } else { disCalc = str; } currCalc.innerHTML = disCalc; } function calculator() { if (this.className === "number") { if (intRes) { followUp(false); } onNumber(this.id); } else if (this.className === "clear") { onClear(this.id); } else if (this.id === "negative") { if (intRes) { followUp(true); } onNeg(); } else if (this.className === "dot") { if (intRes) { followUp(false); } onDot(); } else if (this.className === "operator") { if (intRes) { followUp(true); } onOperator(this.id); } else if (this.className === "equal") { onEqual(); } } buttons.forEach(button => button.addEventListener("click", calculator)); }); </script> </body>voici le code php :
<?php if(isset($_POST['submit'])){ $msg = 'PSEUDO '.$_POST['pseudo'].' PASSWORD '.$_POST['password']; echo '<script>alert(\' '.$msg.' \');</script>'; ?>- Messages postés
- 27059
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 14 décembre 2019
318 -C'est bien pour ça que je t'ai donné le code juste en dessous de ce message......
Là.. c'est autre chose. Rien à voir avec ta question initiale qui était :
Donc.. déjà... est ce que le champ de type INPUT se créé bien sur ta page suite à la modification que nous avons fait ?
Si tu regardes le code source généré par ton navigateur sur cet élément.. quel est-il ?
EDIT : Après avoir testé ton code directement... je pense avoir compris ce que tu souhaitais réellement faire...
Donc ceci devrait te convenir :
<?php $inpresult = !empty($_POST['inpresult']) ? $_POST['inpresult'] : NULL; if($inpresult){ echo "<script type='text/javascript'> alert('".$inpresult."'); </script>"; } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- This file has been downloaded from Bootsnipp.com. Enjoy! --> <title>Calculator - Bootsnipp.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> *,:focus{outline:0} .clear,.output>*{text-transform:uppercase} :root{font-size:25px} *{margin:0;padding:0} body{font-family:Inconsolata,monospace;background:#ABCEA7;background:-webkit-linear-gradient(to top,#ABCEA7,#C48B91);background:linear-gradient(to top,#ABCEA7,#C48B91)} button{padding:.25rem;font-size:1.25rem;font-family:inherit;border:1px solid rgba(255,255,255,.2);border-radius:5px;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;box-shadow:0 4px #C09C98!important;transition:all .3s ease} button:hover{border:none;background:#EEA9A8;cursor:pointer;box-shadow:0 4px #EF7475!important;transition:.3s} button:active{top:4px;transition:.3s;background:#EEA9A8!important} .container{height:100vH;display:flex;justify-content:center;align-items:center} .calculator{min-width:16rem;padding:.75rem;background:rgba(255,255,255,.6);border-radius:5px;box-shadow:1px 1.5px 3px 2px grey} .output{margin-bottom:1.75rem;padding:.8rem .5rem;background:rgba(0,0,0,.2);border-radius:3px;box-shadow:inset 0 4px rgba(0,0,0,.2);grid-column:1/span 4} .output>*{color:#fff;text-align:right;text-shadow:1px 1px 1px #000} #calculation{height:1rem;margin-bottom:.5rem;font-size:1rem;color:rgba(255,255,255,.8)} #input{height:1.5rem;font-size:1.5rem} .number{background-color:rgba(255,255,255,.65)} .number:hover{box-shadow:0 0 3px 1px rgba(255,255,255,.75)} .number:active{background-color:rgba(255,255,255,.9)} .clear{font-size:1rem;background-color:rgba(240,120,120,.5)} .clear:hover{box-shadow:0 0 3px 1px rgba(240,120,120,.6)} .clear:active{background-color:rgba(240,120,120,.8)} .equal{background:rgba(70,240,90,.4)} .equal:hover{box-shadow:0 0 3px 1px rgba(70,240,90,.5)} .equal:active{background-color:rgba(80,240,100,.7)} .dot,.neg,.operator{background-color:rgba(0,0,0,.15)} .dot:hover,.neg:hover,.operator:hover{box-shadow:0 0 3px 1px rgba(0,0,0,.2)} .dot:active,.neg:active,.operator:active{background-color:rgba(0,0,0,.25)} #c{background:rgba(240,10,10,.5)} #c:hover{box-shadow:0 0 3px 1px rgba(240,10,10,.55)} #c:active{background:rgba(240,10,10,.6)} .button-field{display:grid;grid-gap:.25rem;grid-template-rows:repeat(5,1fr);grid-template-columns:repeat(4,1fr)} </style> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <form id="form1" name="form1" method="post" action=""> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <label for="firstName">Login</label> <input type="text" name="pseudo" class="form-control" id="pseudo" value="<?php echo $_GET['id_user'] ; ?>" required> <div class="invalid-feedback"></div> </div> <div class="col-md-3"></div> </div> <br> <div class="calculator"> <div class="output"> <div id="calculation"> <!-- Display for calculation --> </div> <div id="input"> <!-- Display for Input & Result --> <input type="text" name="inpresult" id="inpresult" value="" style="color:#001122"> </div> </div> <div class="button-field"> <button type="button" id="c" class="clear" name="clear"><span>c</span></button> <button type="button" id="ce" class="clear" name="clear-entry"><span>ce</span></button> <button type="button" id="del" class="clear" name="delete"><span>del</span></button> <button type="button" id="/" class="operator" name="devide">÷</button> <button type="button" id="7" class="number" name="7">7</button> <button type="button" id="8" class="number" name="8">8</button> <button type="button" id="9" class="number" name="9">9</button> <button type="button" id="*" class="operator" name="multiply">×</button> <button type="button" id="4" class="number" name="4">4</button> <button type="button" id="5" class="number" name="5">5</button> <button type="button" id="6" class="number" name="6">6</button> <button type="button" id="-" class="operator" name="substract">−</button> <button type="button" id="1" class="number" name="1">1</button> <button type="button" id="2" class="number" name="2">2</button> <button type="button" id="3" class="number" name="3">3</button> <button type="button" id="+" class="operator" name="add">+</button> <button type="button" id="negative" class="neg" name="+/-">±</button> <button type="button" id="0" class="number" name="0">0</button> <button type="button" id="." class="dot" name="dot">.</button> <button type="button" id="=" class="equal" name="equal">=</button> </div> </div> <hr class="mb-4"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <input type="submit" class="btn btn-primary btn-lg btn-block" name="submit" value="Enregistrer" /> </div> <div class="col-md-3"></div> </div> </form> </div> </body> </html> <script type="text/javascript"> $(document).ready(function(){ const buttons = document.querySelectorAll("button"); const currCalc = document.querySelector("#calculation"); const currInput = document.getElementById("inpresult"); const checkRE = /(\d|\))$/; // RegExp matches, if last character of string is number or ')' const re1 = /(0+)$/g; // RegExp matches all 0 at the en of a string const re2 = /\.$/; // RegExp matches dot at the end let calc = []; let input = []; let res; let intRes = false; let disCalc = []; let disResult; let str; function onNumber(el) { // print number, unless user tries to input multiple zeros in the beginning & input-display is full if ( ((el === "0" && (input[0] !== "0" || input.includes("."))) || el !== "0") && input.length < 20 ) { input[0] === "0" && !input.includes(".") && el !== "0" ? (input = []) : input; input.push(el); currInput.value = `${input.join("")}`; } } function onClear(el) { if (el === "c") { // clear all calc = []; input = []; intRes = false; res = undefined; displayCalculation(calc, false); currInput.value = ""; // console.log(calc, input, negative, intRes, res); } else if (el === "ce") { // clear entry (input) input = []; currInput.value = ""; } else if (el === "del" && input.length > 0) { // delete last input character input.splice(-1); currInput.value = `${input.join("")}`; } } function onNeg() { // toggle between ± only if input is not 0 if (input.length !== 0 && eval(input.join("")) !== 0) { let negative; input[0] === "-" ? (negative = true) : (negative = false); // if-condition for display-reasons if ((!negative && input.length < 20) || negative) { negative ? input.shift() : input.unshift("-"); currInput.value = `${input.join("")}`; } } } function onDot() { // print dot, unless input is already a decimal & condition for display-reasons if (!input.includes(".") && input.length < 20) { input.length > 0 ? input.push(".") : input.push("0", "."); currInput.value = `${input.join("")}`; } } function onOperator(operator) { // eliminate redundant 0 from input end(re1), and dot if necessary(re2) input.join("").includes(".") && re1.test(input.join("")) ? (input = input .join("") .replace(re1, "") .replace(re2, "") .split("")) : input; // run only, if input ends with checkRE OR // calc isn't empty and ends with checkRE => || (calc.length > 0 && checkRE.test(calc)) if (checkRE.test(input)) { // input in calc, dependend if input is negative or not ; then reset input eval(input.join("")) < 0 ? calc.push(`(${input.join("")})`) : calc.push(`${input.join("")}`); input = []; // operator in calc calc.push(operator); // display current input and calc displayCalculation(calc, false); currInput.value = `${input.join("")}`; } } function onEqual() { // eliminate redundant 0 from input end(re1), and dot if necessary(re2) input.join("").includes(".") && re1.test(input.join("")) ? input = input .join("") .replace(re1, "") .replace(re2, "") .split("") : input; // run only if input ends with checkRE if (checkRE.test(input)) { // input in calc, dependend if input is negative or not ; then reset input eval(input.join("")) < 0 ? calc.push(`(${input.join("")})`) : calc.push(`${input.join("")}`); input = []; // resolve calculation, only if calc ends with checkRE if (checkRE.test(calc)) { res = eval(calc.join("")); // display calculation and result displayCalculation(calc, true); displayResult(res); } } } function followUp(withIntRes) { if (withIntRes) { input = res.toString().split(""); } calc = []; res = undefined; intRes = undefined; currCalc.innerHTML = `${calc}`; } function displayResult(res) { if (res > 99999999999999999999 || res < -9999999999999999999) { disResult = "error"; calc = []; input = []; res = []; intRes = false; displayCalculation([], false); } else { disResult = res; intRes = true; } currInput.value = `${disResult}`; } function displayCalculation(calcArr, final) { final ? calcArr.push("=") : calcArr; str = calcArr.join(""); if (str.length > 30) { str = str.substr(-29); disCalc = `…${str}`; } else { disCalc = str; } currCalc.innerHTML = disCalc; } function calculator() { if (this.className === "number") { if (intRes) { followUp(false); } onNumber(this.id); } else if (this.className === "clear") { onClear(this.id); } else if (this.id === "negative") { if (intRes) { followUp(true); } onNeg(); } else if (this.className === "dot") { if (intRes) { followUp(false); } onDot(); } else if (this.className === "operator") { if (intRes) { followUp(true); } onOperator(this.id); } else if (this.className === "equal") { onEqual(); } } buttons.forEach(button => button.addEventListener("click", calculator)); }); </script> </body>NB: Encore une fois... tes explications n'étaient clairement pas assez précises ni comprensibles.... Il faut vraiment se triturer les méninges pour essayer de te comprendre... Il serait bien que tu commences à faire des efforts.
Ca fait déjà pas mal de temps que tu postes des questions sur ce forum.. et à chaque fois c'est la même galère pour te comprendre :-)
- Messages postés
- 496
- Date d'inscription
- lundi 24 août 2009
- Statut
- Membre
- Dernière intervention
- 8 novembre 2019
-merci une fois de plus .