Exemple d'application en langage javascript

avec bouton01.css

javascript.html
images/webjavascal.PNG

<! 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" > &nbsp; ACCUEIL &nbsp; </a>

</li>

<li>

<a href = "tableau.html#" class = "btn3" > &nbsp; Tableau &nbsp; </a>

</li>

<li>

<a href = "image.html" class = "btn3" > &nbsp; &nbsp; IMAGES &nbsp; &nbsp; </a>

</li>

<li>

<a href = "css.html" class = "btn3" > &nbsp; &nbsp; &nbsp; CSS &nbsp; &nbsp; &nbsp; </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;

}

education.numerique@outlook.fr  -  © Tous droits réservés - D PERARNAUD - LIMOGES