Exemple d'application en langage javascript
javascript.html |
---|
<! DOCTYPE html > <html xmlns = " http://www.w3.org/1999/xhtml " lang = "fr" > <head> <head> <meta http-equipv= "content-Type" content = "text/html" charset = "UTF-8" > <title> Education Numérique </title> <title> Scripts javascript : Aperçu </title> <script language = "Javascript" > <!-- var valor= 0 ; var stock= "" ,stock2= "" ; var ope= false ,plu= false ,moi= false ,mul= false ,div= false ,flag_egal= false ; function affiche(res) { document.calc.ecran.value=res;} function touche(param) { if ( param == "12" ) { valor= 0 ;document.calc.ecran.value= "" ;stock= "" ;stock2= "" ; raz_flags();ope= false ; } if ((param >= 0 )&&(param <= 10 )) { if (flag_egal) {raz_flags();valor= 0 ;ope= false ;stock= "" ;} if (ope== true ) { if (param== 10 ) stock2+= '.' ; else stock2+=param; affiche(stock2); if (plu) valor = (stock* 1 )+(stock2* 1 ); if (moi) valor = (stock* 1 )-(stock2* 1 ); if (mul) valor = (stock* 1 )*(stock2* 1 ); if (div) valor = (stock* 1 )/(stock2* 1 ); } else { if (param== 10 ) stock+= '.' ; else stock+=param; affiche(stock);} } if (param== 13 ) {raz_flags() ; plu= true ; if (stock2 != "" ) inter();ope= true ;} if (param== 14 ) {raz_flags() ; moi= true ; if (stock2 != "" ) inter();ope= true ;} if (param== 15 ) {raz_flags() ; mul= true ; if (stock2 != "" ) inter();ope= true ;} if (param== 16 ) {raz_flags() ; div= true ; if (stock2 != "" ) inter();ope= true ;} if (param== 17 ) {inter();flag_egal= true ;} } function raz_flags() { plu= false ;moi= false ;mul= false ;div= false ;flag_egal= false ;} function inter() {affiche(valor); stock=valor;stock2= "" ;} //--> </script> <link href = "style.css" rel = "stylesheet" media = "screen" > <link href = "bouton01.css" rel = "stylesheet" media = "screen" > <link href = "menu1.css" rel = "stylesheet" media = "screen" > </head> <body > <h3 style = "text-align: center;color:#F1F2F6 ;background:#004C8C" > <span style = "font-size:35px;" > Application en javascript </span> </h3> <h2 style = "text-align: center;color:#FFFFFF ;background:#FFFFF" > <span style = "font-size:25px;" > . </span> </h2> <div id = "menu1" > <ul> <li> <a href = "index.html" class = "btna" > ACCUEIL </a> </li> <li> <a href = "tableau.html#" class = "btn3" > Tableau </a> </li> <li> <a href = "image.html" class = "btn3" > IMAGES </a> </li> <li> <a href = "css.html" class = "btn3" > CSS </a> </li> </ul> </div> <body text = "#ffffff" bgcolor = "#ffffff" > <br /> <p > Calculatrice </p> <br /> <br /> <div > <form name = "calc" > <table border = "2" class = "bordered" width = "100%" style = "color:#0526F5; background-color: #ffff99;font-size:15px;" cellspadding= "0" > <colgroup> <col width = "100%" /> </colgroup> <thead> <tr class = "row-odd" > <th > Calculatrice </th> <table border = "2" class = "bordered; " width = "100%" style = "color:#0526F5;background-color: #ffff99;font-size:15px;" cellspadding= "0" > <colgroup> <col width = "25%" /> <col width = "25%" /> <col width = "25%" /> <col width = "25%" /> </colgroup> <thead > <tr id = "caisse" > <td class = "linenodiv" COLSPAN = "10" > <input type = "text" name = "ecran" size = "25" maxlength = "25" > </td> </tr> <tr id = "caiss" class = "row-odd" > <td class = "linenodiv" > <input type = "button" value = " 7 " onClick = "touche(7)" > </td> <td id = "caiss" class = "linenodiv" > <input type = "button" value = " 8 " onClick = "touche(8)" > </td> <td id = "caiss" class = "linenodiv" > <input type = "button" value = " 9 " onClick = "touche(9)" > </td> <td id = "caiss" class = "linenodiv" > <input type = "button" name = "/" value = " / " onClick = "touche(16)" > </td> </tr> <tr id = "caiss" class = "row-odd" > <td class = "linenodiv" > <input HEIGHT = "20%" type = "button" value = " 4 " onclick = "touche(4)" > </td> <td id = "caiss" class = "linenodiv" > <input type = "button" value = " 5 " onclick = "touche(5)" > </td> <td id = "caiss" class = "linenodiv" > <input type = "button" value = " 6 " onclick = "touche(6)" > </td> <td id = "caiss" class = "linenodiv" > <input type = "button" name = "*" value = " * " onclick = "touche(15)" > </td> </tr> <tr id = "caiss" class = "row-odd" > <td class = "linenodiv" > <input type = "button" value = " 1 " onclick = "touche(1)" > </td> <td id = "caiss" class = "linenodiv" > <input type = "button" value = " 2 " onclick = "touche(2)" > </td> <td id = "caiss" class = "linenodiv" > <input type = "button" value = " 3 " onclick = "touche(3)" > </td> <td id = "caiss" class = "linenodiv" > <input type = "button" name = "-" value = " - " onclick = "touche(14)" > </td> </tr> </tr> </tbody> </table> <table border = "2" class = "bordered" width = "100%" style = "background-color: #ffff99;font-size:15px; cellspadding=" 0 " > <colgroup> <col width = "33%" /> <col width = "33%" /> <col width = "33%" /> </colgroup> <thead> <tr class = "row-odd" > <td class = "linenodiv" id = "caiss" > <input type = "button" value = " 0 " onclick = "touche(0)" > </td> <td class = "linenodiv" id = "cais" > <input type = "button" name = "." value = " , " onclick = "touche(10)" > </td> <td class = "linenodiv" id = "cais" > <input type = "button" name = "+" value = " + " onclick = "touche(13)" > </td> </tr> </tr> </tbody> </table> <table border = "2" class = "bordered" width = "100%" style = "background-color: #ffff99;font-size:15px; cellspadding=" 0 " > <colgroup> <col width = "50%" /> <col width = "50%" /> </colgroup> <thead> <tr class = "row-odd" > <td class = "linenodiv" id = "cais" > <input type = "button" name = "C" value = " C " onclick = "touche(12)" > </td> <td class = "linenodiv" id = "cais" > <input type = "button" value = " = " onclick = "touche(17)" > </td> </tr> </tr> </tbody> </table> </tr> </tbody> </table> </div> </body> </html> |
bouton01.css |
#menu1{ background: no-repeat bottom center; height:100px; width:auto; } #menu1 ul li{ list-style:none; float:left; padding:0; width:25%; } .echelle{ transform: scale(1.0); background-size: contain; } .bordered { border: solid #FFFFFF 3px; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius: 20px; -webkit-box-shadow:0 10px 0 #ccc; -moz-box-shadow: 0 10px 0 #ccc; box-shadow: 0 10px 0 #ccc; } .bordered td, .bordered th { border-left: 1px solid #4000FF; border-top: 1px solid #4000FF; border-bottom: 1px solid #4000FF; padding: 10px; text-align: left; vertical-align:center; } .bordered th { background-color:#FFFFFF; background-image:linear-gradient(top, #FFFFFF #FFFFFF); box-shadow: 0 1px 0 rgba(255,255,2555,.8) inset; border-top:none; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,.5); } .bordered .head { background-color:#7FF15D;
text-align: center; } .bordered .head th { background-color:#7FF15D; border-radius: 20px 0 0 0; text-align: center; } .bordered .coul { background-color:#B0C6EE ;
text-align: center; } .bordered .coul th { background-color:#B0C6EE ; border-radius: 20px 0 0 0; text-align: center; } .bordered .headbord { background-color:#7FF15D;
font-style:bold; text-align: center; } .bordered .bord { background-color:#FFFFFF;
font-style:bold; text-align: center; } .bordered .droid { background-color:#FFFFFF;
font-style:bold;
} .bordered th:first-child{ border-radius: 20px 0 0 0; }
.bordered th:last-child { border-radius:0 20px 0 0; } .bordered tr :last-child td:first-child { border-radius:0 0 0 20px; } .bordered tr:hover { background: #fbfbe9; }
.bordered tr :last-child td:last-child { border-radius:0 0 20px 0; } .table head td {vertical-align:center;} code{padding:2px 4px;color:#d14;background-color:#f7f7f9;font-size:16px;border:1px solid #e1e1e8;white-space:nowrap;} pre{display:block;padding:9.5px;margin:0 0 10px;font-size:16px;line-height:16px;word-break:break-all;word-wrap:break-word;white-space:pre;white-space:pre-wrap;background-color:transparent;color:#4000FF; border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}pre.prettyprint{margin-bottom:20px;}
#caisse{ background: no-repeat bottom center; height:25px; width:auto; } #caisse td input{ text-decoration: none; padding: 5px; font-family: tahoma; font-size: 1.6em; color: #000000; background-color: #fdeada; border-radius: 18px; -webkit-border-radius: 18px; -moz-border-radius: 18px; border: 6px solid #0070c0; box-shadow: 0px 7px 14px #b7dde8; -webkit-box-shadow: 0px 7px 14px #b7dde8; -moz-box-shadow: 0px 7px 14px #b7dde8; } #cais{ background: no-repeat bottom center; height:30px; width:auto; } #cais input { text-decoration: none; padding: 5px; font-family: tahoma; font-size: 1.6em; color: #000000; background-color: #76923c; border-radius: 18px; -webkit-border-radius: 18px; -moz-border-radius: 18px; border: 6px solid #0070c0; box-shadow: 0px 7px 14px #b7dde8; -webkit-box-shadow: 0px 7px 14px #b7dde8; -moz-box-shadow: 0px 7px 14px #b7dde8; }
#cais input:hover { padding: 4px; font-family: arial; color: #ff0000; background-color: #66ff99; border: 6px solid #000000; box-shadow: 0px 0px 4px #fbd5b5; -webkit-box-shadow: 0px 0px 4px #fbd5b5; -moz-box-shadow: 0px 0px 4px #fbd5b5; }
#caiss{ background: no-repeat bottom center; height:30px; width:auto; } #caiss input { text-decoration: none; padding: 5px; font-family: tahoma; font-size: 1.6em; color: #000000; background-color: #dbe5f1; border-radius: 18px; -webkit-border-radius: 18px; -moz-border-radius: 18px; border: 6px solid #0070c0; box-shadow: 0px 7px 14px #b7dde8; -webkit-box-shadow: 0px 7px 14px #b7dde8; -moz-box-shadow: 0px 7px 14px #b7dde8; }
#caiss td input:hover { padding: 4px; font-family: arial; color: #ff0000; background-color: #3399ff; border: 6px solid #000000; box-shadow: 0px 0px 4px #fbd5b5; -webkit-box-shadow: 0px 0px 4px #fbd5b5; -moz-box-shadow: 0px 0px 4px #fbd5b5; }
#menu1 ul li a.btn3 { width:auto; text-decoration: none; padding: 10px; font-family: tahoma; font-size: 1.3em; color: #000000; background-color: #dbe5f1; border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px; border: 6px solid #0070c0; box-shadow: 5px 5px 14px #b7dde8; -webkit-box-shadow: 5px 5px 14px #b7dde8; -moz-box-shadow: 5px 5px 14px #b7dde8; }
#menu1 ul li a.btn3:hover { padding: 10px; font-family: arial; font-size: 1.3em; color: #4f81bd; background-color: #99ff66; border-radius: 26px; -webkit-border-radius: 26px; -moz-border-radius: 26px; border: 7px solid #000000; box-shadow: 7px 9px 4px #fbd5b5; -webkit-box-shadow: 7px 9px 4px #fbd5b5; -moz-box-shadow: 7px 9px 4px #fbd5b5; } #menu ul li a.btn:hover { padding: 12px; font-size: 1.5em; color: #4f81bd; background-color: #ffc000; border-radius: 26px; -webkit-border-radius: 26px; -moz-border-radius: 26px; border: 4px solid #000000; box-shadow: 1px 1px 4px #fbd5b5; -webkit-box-shadow: 1px 1px 4px #fbd5b5; -moz-box-shadow: 1px 1px 4px #fbd5b5; } #menu ul li a.btn1 { text-decoration: none; padding: 10px; font-family: arial; font-size: 1em; color: #000000; background-color: #ffff00; border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px; border: 4px solid #0070c0; box-shadow: 3px 9px 12px #b7dde8; -webkit-box-shadow: 3px 9px 12px #b7dde8; -moz-box-shadow: 3px 9px 12px #b7dde8; }
#menu ul li a.btn1:hover { padding: 12px; font-size: 0.9em; color: #4f81bd; background-color: #ffc000; border-radius: 26px; -webkit-border-radius: 26px; -moz-border-radius: 26px; border: 4px solid #000000; box-shadow: 1px 1px 4px #fbd5b5; -webkit-box-shadow: 1px 1px 4px #fbd5b5; -moz-box-shadow: 1px 1px 4px #fbd5b5; } |