API tools faq
paste
View difference between Paste ID: meqGQnhx and ziaZjPuR
SHOW: | | - or go back to the newest paste.
1-
<!DOCTYPE html>
1+
2
	<head>

3
		<title>Ma super calculatrice</title>

4-
		<title>Test</title>

4+
5
			body

6-
			#mario{

6+
			{

7-
			background-image:url("mario.png");

7+
				background-color: black;

8-
			width: 46px;

8+
9-
			height: 64px;

9+
10-
			position: absolute;

10+
			#calculatrice

11-
			top: 100px;

11+
			{

12-
			left: 100px;

12+
				border: 2px solid black;

13-
			background-position: 0px 64px;

13+
				border-radius: 15px;

14
				margin-left: auto;

15-
#cle{

15+
				margin-right: auto;

16-
				background-image:url("key.png");

16+
				width: 400px;

17
				height: 600px;

18-
				height: 43px;

18+
				background-color: white;

19
				margin-top: 50px;

20-
				top: 420px;

20+
				padding: 10px;

21-
				left: 1200px;

21+
22
23
			#calculatrice form

24-
			body{

24+
			{

25-
				background-image: url("herbe.jpg");

25+
				font-size: 30px;

26
				font-weight: bold;

27
				margin-top: 20px;

28-
	</style>

28+
29
30
			#calculatrice input

31-
		<div id="cle"></div>

31+
			{

32-
		<div id="carre0"></div>

32+
				width: 36%;

33-
		<div id="carre1"></div>

33+
				height: 50px;

34-
		<div id="carre2"></div>

34+
				margin-left: 10px;

35-
		<div id="carre3"></div>

35+
				font-size: 30px;

36-
		<div id="carre4"></div>

36+
				font-weight: bold;

37-
		<div id="mario"></div>

37+
				border: 2px solid black;

38
				text-align: center;

39-
			var score = 0;

39+
40-
			var star = 0;

40+
41-
			var x=100;

41+
			#calculatrice .input_operateur

42-
			var y=100;

42+
			{

43-
			var anim=0;

43+
				width: 50px;

44-
			var toucheHaut = false, toucheDroite = false, toucheBas = false, toucheGauche = false;

44+
45-
			

45+
46-
			var coorX = [0,0,100,2000,2000,200,200,400,200,600,700,300,400,1100,1300,800,800,1200,1100,1300,1600,1800,1800,1300,1700,1500];

46+
			#calculatrice #btn_valider

47-
			var coorY = [0,100,900,100,700,100,600,700,800,400,700,400,200,100,100,400,600,500,700,700,400,700,200,200,200,300];

47+
			{

48-
			var tailleX = [2080,100,1980,100,100,100,300,100,100,100,300,200,600,200,100,400,200,300,100,400,100,200,100,200,100,100];

48+
49-
			var tailleY = [100,900,100,500,200,400,100,100,100,400,100,100,100,300,100,100,100,100,200,100,300,100,500,200,100,100];

49+
				margin-left: -85px;

50
				margin-top: 470px;

51
				width: 60px;

52-
			window.onkeydown = function(event){

52+
				cursor: pointer;

53-
				if (event.keyCode==38){

53+
54-
					toucheHaut = true;

54+
55-
					document.getElementById("mario").style.backgroundPosition = anim * 46 + "px 256px";

55+
			#calculatrice #btn_valider:hover

56
			{

57-
				else if (event.keyCode==40){

57+
				color: red;

58-
					toucheBas = true;

58+
59-
					document.getElementById("mario").style.backgroundPosition = anim * 46 + "px 128px";

59+
60
			#calculatrice .btn_calculatrice

61-
				else if (event.keyCode==39){

61+
			{

62-
					toucheDroite = true;

62+
				width: 50px;

63-
					document.getElementById("mario").style.backgroundPosition = anim * 46 + "px 192px";

63+
				height: 50px;

64
				border: 2px solid black;

65-
				else if (event.keyCode==37){

65+
				float: left;

66-
					toucheGauche = true;

66+
				margin-left: 35px;

67-
					document.getElementById("mario").style.backgroundPosition = anim * 46 + "px 64px";

67+
				margin-top: 20px;

68
				text-align: center;

69-
				moveMario();

69+
				font-size: 40px;

70
				cursor: pointer;

71
			}

72-
			window.onkeyup = function(event){

72+
73-
				if (event.keyCode==38){

73+
			#calculatrice .btn_calculatrice:hover

74-
					toucheHaut = false;

74+
			{

75
				color: white;

76-
				else if (event.keyCode==40){

76+
				background-color: black;

77-
					toucheBas = false;

77+
78
79-
				else if (event.keyCode==39){

79+
			#calculatrice .btn_calculatrice:active

80-
					toucheDroite = false;

80+
			{

81
				color: red;

82-
				else if (event.keyCode==37){

82+
83-
					toucheGauche = false;

83+
84
			#content

85
			{

86
				margin-top: 50px;

87-
			function moveMario(){

87+
88-
				animation();

88+
89-
				var deplacementX = x + (toucheDroite - toucheGauche) * 10

89+
			#result

90-
				var deplacementY = y + (toucheBas - toucheHaut) * 10;

90+
			{

91-
				

91+
				margin-left: 3%;

92-
				var collision = false;

92+
				width: 92%;

93
				text-align: center;

94-
				

94+
				font-size: 40px;

95-
				if (deplacementX > 0 && deplacementX + 46 < window.innerWidth && deplacementY > 0 && deplacementY + 64 < window.innerHeight){

95+
				border: 2px solid black;

96-
					for (var i = 0; i < coorX.length; i++){	

96+
				height: 50px;

97-
						if (deplacementX + 46 > coorX[i] && deplacementX < coorX[i] + tailleX[i] && deplacementY +64 >= coorY[i] && deplacementY < coorY[i] + tailleY[i]){

97+
98-
						collision = true;

98+
		</style>

99-
						break;

99+
100
	<body>

101-
				

101+
		<div id='calculatrice'>

102
103-
					if (collision == false){

103+
			<div id='result'>

104-
					x = deplacementX;

104+
				<?php

105-
					y = deplacementY;

105+
106
				function operation($a, $b, $operateur)

107-
					if (deplacementX > 1200 && deplacementX + 46 < 1240 && deplacementY > 420 && deplacementY + 64 < 463){

107+
				{

108-
					suppCle();

108+
					if($operateur == "%2B")

109
			   		{

110
			      	 	return $a + $b;

111
					}

112-
				document.getElementById("mario").style.left = x + "px";

112+
					elseif($operateur == "-")

113-
				document.getElementById("mario").style.top = y + "px";

113+
					{

114
						return $a - $b;

115
					}

116
					elseif($operateur == "x" )

117-
			function suppCle(){

117+
					{

118-
				document.removeChild("cle");

118+
						return $a * $b;

119
					}

120
					elseif($operateur == "%2F" || $operateur == "%25")

121-
			function animation(){

121+
					{

122-
				anim++;

122+
						if($b != 0)

123-
				if (anim == 6){

123+
						{

124-
					anim = 0;

124+
							return $a / $b;

125
						}

126
						else

127
						{

128
							return "erreur";

129-
			for (var i = 0; i < coorX.length; i++){

129+
130-
				var bloc = document.createElement("div");

130+
131-
				bloc.style.position = "absolute";

131+
					else

132-
				bloc.style.top = coorY[i] + "px";

132+
					{

133-
				bloc.style.left = coorX[i] + "px";

133+
						return "opérateur indéfinie";

134-
				bloc.style.width = tailleX[i] + "px";

134+
135-
				bloc.style.height = tailleY[i] + "px";

135+
136-
				bloc.style.backgroundImage = "url(file:///C:/Users/Camille/Documents/HTML5/TP1/arbre.png)";

136+
137
				if(isset($_GET['submit']))

138-
				document.body.appendChild(bloc);

138+
				{

139
					if(isset($_GET['nombre1']) && isset($_GET['nombre2']) && isset($_GET['operateur']))

140-
		</script>

140+
					{

141
						$nombre1 = $_GET['nombre1'];

142
						$nombre2 = $_GET['nombre2'];

143
						$operateur = $_GET['operateur'];

144
						$result = $_GET['result'];

145
146
						$result = operation($nombre1, $nombre2, $operateur);

147
148
						echo $result;

149
					}

150
				}

151
				?>

152
			</div>

153
154
			<form method="get" action="#">

155
				<input class='input_number' name='number1' id='number1'/>

156
				<input class='input_operateur' name='operateur' id='operateur'/>

157
				<input class='input_number'name='number2' id='number2'/>

158
				<input id='btn_valider' type='submit' value='='></input>

159
			</form>

160
161
			<div id='content'>

162
				<div class='btn_calculatrice' onclick='remplirNumber(7)'>7</div>

163
				<div class='btn_calculatrice' onclick='remplirNumber(8)'>8</div>

164
				<div class='btn_calculatrice' onclick='remplirNumber(9)'>9</div>

165
				<div class='btn_calculatrice' onclick='remplirNumber("+")'>+</div>

166
167
				<div class='btn_calculatrice' onclick='remplirNumber(4)'>4</div>

168
				<div class='btn_calculatrice' onclick='remplirNumber(5)'>5</div>

169
				<div class='btn_calculatrice' onclick='remplirNumber(6)'>6</div>

170
				<div class='btn_calculatrice' onclick='remplirNumber("-")'>-</div>

171
172
				<div class='btn_calculatrice' onclick='remplirNumber(1)'>1</div>

173
				<div class='btn_calculatrice' onclick='remplirNumber(2)'>2</div>

174
				<div class='btn_calculatrice' onclick='remplirNumber(3)'>3</div>

175
				<div class='btn_calculatrice' onclick='remplirNumber("x")'>x</div>

176
177
				<div class='btn_calculatrice' onclick='remplirNumber(0)'>0</div>

178
				<div class='btn_calculatrice' onclick='remplirNumber(",")'>,</div>

179
				<div class='btn_calculatrice' onclick='remplirNumber("%")'>%</div>

180
				<div class='btn_calculatrice' onclick='remplirNumber("/")'>/</div>

181
			</div>

182
		</div>

183
	</body>

184
185
	<script>

186
		function remplirNumber(n)

187
		{

188
			var champ1 = document.getElementById("number1");

189
			var champ2 = document.getElementById("number2");

190
			var operateur = document.getElementById("operateur");

191
			if(typeof n == "number" || n == ',')

192
			{

193
				if(operateur.value.length == 0)

194
					champ1.value += n;

195
				else

196
					champ2.value += n;

197
			}

198
			else

199
				operateur.value = n;		

200
		}

201
	</script>

202
</html>
        

    


            


                                


        

            



                
    

        Public Pastes
    

    
            

    

                    

        

    





    


    
    
    
    
    
    
    
    




    


    



                

            We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.             OK, I Understand
        

    
                

            

                
                    
                
            

            

                Not a member of Pastebin yet?

                Sign Up, it unlocks many cool features!