Scribd
Upload
51 views

Aquí Hay Mas Código de Estilos

This document contains the HTML and CSS code for a calculator web page. The HTML includes the page structure, links, buttons, and a form for the calculator. The CSS includes styles for colors, fonts, positioning of elements, and hover effects. When buttons are clicked, JavaScript functions are called to add or remove numbers from the calculator display and calculate results.

Uploaded by

Jerson Ramirez Ortiz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
51 views

Aquí Hay Mas Código de Estilos

This document contains the HTML and CSS code for a calculator web page. The HTML includes the page structure, links, buttons, and a form for the calculator. The CSS includes styles for colors, fonts, positioning of elements, and hover effects. When buttons are clicked, JavaScript functions are called to add or remove numbers from the calculator display and calculate results.

Uploaded by

Jerson Ramirez Ortiz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 21

<!

DOCTYPE html>

<html>

<head lang="es">

<link rel="stylesheet" type="text/css" href="b.css"> ->AQUÍ HAY MAS CÓDIGO DE ESTILOS

<link rel="stylesheet" type="text/css" href="lima.css">

<link rel="stylesheet" type="text/css" href="tema2.css">

<meta charset="utf-8">

<title>CALCULADORA</title>

<style type="text/css">

body

background-image: url(fond2.png);

background-attachment: fixed;

background-repeat: no-repeat;

.calculadora2

margin-left: 450px;

h1

padding-top: 230px;

padding-left: 480px;

margin-bottom: 15px;

color: rgba(255,55,121,1);

font-family: Arial;

font-weight: bold;

font-style: italic;
font-size: 40px;

text-decoration: underline;

.cuadrodetexto

{ font-size: 30px;

font-family: Arial,Helvetica;

font-weight: bold;

font-style: italic;

color: white;

border: 0px;

background: rgba(255,55,121,.8);

width: 366px;

height: 80px;

margin-top: 0px;

.columna1{

font-size: 30px;

font-family: Arial,Helvetica;

color: white;

border: 0px;

background-color: rgba(255,55,121,.6);

box-shadow: 0px 20px 0px 60px rgba(255,255,255,0);

transition: box-shadow .3s;

width: 90px;

height: 75px;

.columna2{
font-size: 30px;

font-family: Arial,Helvetica;

color: white;

border: 0px;

border-color: red;

background-color: rgba(255,55,121,.6);

box-shadow: 0px 20px 0px 60px rgba(255,255,255,0);

transition: box-shadow .3s;

width: 90px;

height: 75px;

.columna1:hover

box-shadow: 0px 0px 30px 10px rgba(55,25,255,1);

color: red;

text-shadow: 0px 0px 0px 30px rgba(250,255,120,1);

transition: text-shadow .6s, border-radius .7s;

border-radius: 50%;

background-color: rgba(255,55,121,1);

.columna2:hover

box-shadow: 0px 0px 30px 10px rgba(55,25,255,1);

color: red;

text-shadow: 0px 0px 0px 30px rgba(250,255,120,1);


transition: text-shadow .6s, border-radius .7s;

border-radius: 50%;

background-color: rgba(255,55,121,1);

footer

color: red;

background-color: white;

height: 100px;

width: 100%;

#unnn

margin-left: 500px;

margin-top: 20px;

font-family: arial;

font-size: 20px;

font-style: italic;

margin-right: 15px;

width: 250px;

height: 70px;

#donn

font-family: arial;
font-size: 20px;

font-style: italic;

margin-right: 15px;

width: 280px;

height: 70px;

#denn

font-family: arial;

font-size: 20px;

font-style: italic;

margin-right: 15px;

width: 280px;

height: 70px;

</style>

<script type="text/javascript">

function agregarNumero(valor, cantidadEnPantalla){

if(valor.value == null | valor.value == "0" )

valor.value = cantidadEnPantalla

else

valor.value += cantidadEnPantalla

}
function eliminarNumero(valor){

valor.value = valor.value.substring(0, valor.value.length - 1 )

function calcular (form){

form.resultado.value = eval(form.resultado.value)

</script>

</head>

<body id="cuerpo1">

<header style="position: fixed;">

<div class="un"> <p class="enlinea"


id="color">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;UNJFSC<br>

<span id="pan">ING. INFORMÁTICA</span></p> </div>

<nav>

<div class="enlinea">

<div class="contenedor">

<a
href="file:///C:/Users/JERSON%20RAMÍREZ/Desktop/a.html" target="_blank"> <span
id="inicio">INICIO</span> </a> &nbsp;&nbsp;

<a
href="file:///C:/Users/JERSON%20RAMÍREZ/Desktop/calculadora%20en%20una%20página%20
web/menu%20de%20navegacion.html" class="texto" id="calculadora" target="_blank" title="ir
a la calculadora">CALCULADORA</a>&nbsp;&nbsp;
<a
href="file:///C:/Users/JERSON%20RAMÍREZ/Desktop/ejerciciohtml.html" class="texto"
id="contacto" target="_blank" title="Sólo de 4 números">PROMEDIOS</a>&nbsp;&nbsp;

<a
href="https://www.google.com.pe/maps/place/Universidad+Nacional+Jos%C3%A9+Faustino+
S%C3%A1nchez+Carri%C3%B3n/@-11.1217068,-
77.6076532,16.69z/data=!4m5!3m4!1s0x9106dfa9f929e083:0xbd6ef754e61fed3e!8m2!3d-
11.1217315!4d-77.6067852" class="texto" id="ubicación" target="_blank" title="ver la
ubicación">UBICACIÓN</a>&nbsp;&nbsp;

<a href="http://www.unjfsc.edu.pe/" class="texto"


id="unjfsc" target="_blank" title="ir a la página de la
universidad">UNJFSC</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="#" class="texto" id="icon"> <img


src="icon5.png" width="30px" height="30px"></a>

</div>

</div>

</nav>

</header>

<h1>CALCULADORA</h1>

<form id="calculadora" class="calculadora2">

<table id="abc">

<tr>

<td colspan="4">

<table>

<tr>

<td>
<input type="text"
name="resultado" placeholder="ING. INFORMÁTICA..." class="cuadrodetexto">

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<input type="button" value=" 7 " id="nu7"


class="columna1" onclick="agregarNumero(form.resultado, '7')">

</td>

<td>

<input type="button" value=" 8 " id="nu8"


class="columna1" onclick="agregarNumero(form.resultado, '8')">

</td>

<td>

<input type="button" value=" 9 " id="nu9"


class="columna1" onclick="agregarNumero(form.resultado, '9')">

</td>

<td>

<input type="button" value=" / " id="nu/"


class="columna2" onclick="agregarNumero(form.resultado, '/')">

</td>
</tr>

<tr>

<td>

<input type="button" value=" 4 " id="nu4"

class="columna1"
onclick="agregarNumero(form.resultado, '4')">

</td>

<td>

<input type="button" value=" 5 " id="nu5"


class="columna1" onclick="agregarNumero(form.resultado, '5')">

</td>

<td>

<input type="button" value=" 6 " id="nu6"


class="columna1" onclick="agregarNumero(form.resultado, '6')">

</td>

<td>

<input type="button" value=" * " id="nu*"


class="columna2" onclick="agregarNumero(form.resultado, '*')">

</td>

</tr>

<tr>
<td>

<input type="button" value=" 1 " id="nu1"


class="columna1" onclick="agregarNumero(form.resultado, '1')">

</td>

<td>

<input type="button" value=" 2 " id="nu2"


class="columna1" onclick="agregarNumero(form.resultado, '2')">

</td>

<td>

<input type="button" value=" 3 " id="nu3"


class="columna1" onclick="agregarNumero(form.resultado, '3')">

</td>

<td>

<input type="button" value=" - " id="nu-"


class="columna2" onclick="agregarNumero(form.resultado, '-')">

</td>

</tr>

<tr>

<td colspan="2">

<input type="button" value=" 0 " id="nu0"


class="columna1" onclick="agregarNumero(form.resultado, '0')">

</td>
<td>

<input type="button" value=" . " id="nu."


class="columna1" onclick="agregarNumero(form.resultado, '.')">

</td>

<td>

<input type="button" value=" + " id="nu+"


class="columna2" onclick="agregarNumero(form.resultado, '+')">

</td>

</tr>

<tr>

<td colspan="2">

<input type="button" value=" = " id="nu="


class="columna1" name="enter" onclick="calcular(form)">

</td>

<td>

<input type="button" value=" <- " id="nu<-"


class="columna1" onclick="eliminarNumero(form.resultado)">

</td>

<td colspan="2">

<input type="button" value=" c " id="nuc"


class="columna2" onclick="form.resultado.value = 0">

</td>

</tr>

</table>
</form>

<aside class="love">

<div class="slider">

<ul>

<li>

<img src="imagenes/papu.jpg" alt="">

<p align="center" class="nombre">PAPU</p>

</li>

<li>

<img src="imagenes/piero.jpg" alt="">

<p align="center" class="nombre">PIERO</p>

</li>

<li>

<img src="imagenes/eduardo.jpg">

<p align="center" class="nombre">EDUARDO</p>

</li>

<li>
<img src="imagenes/keny1.jpg" alt="" width="110px"
height="193px">

<p align="center" class="nombre">KENY</p>

</li>

</ul>

</div>

</aside>

<aside class="hate">

<div class="slider">

<ul>

<li>

<img src="imagenes/daniel.jpg" alt="" width="110px"


height="200px">

<p align="center" class="nombre">DANIEL</p>

</li>

<li>

<img src="imagenes/victor.jpg" alt="" width="110px"


height="200px">

<p align="center" class="nombre">VICTOR</p>

</li>

<li>

<img src="imagenes/yover.jpg" width="110px"


height="200px">

<p align="center" class="nombre">YOVER</p>


</li>

<li>

<img src="imagenes/julio.jpg" alt="" width="110px"


height="200px">

<p align="center" class="nombre">JULIO</p>

</li>

</ul>

</div>

</aside>

<aside class="hate">

<div class="slider">

<ul>

<li>

<img src="imagenes/jerson.jpg" width="110px"


height="200px" >

<p align="center" class="nombre">JERSON</p>

</li>

<li>

<img src="imagenes/moya.jpg" width="110px"


height="200px">

<p align="center" class="nombre">MOYA</p>

</li>

<li>

<img src="imagenes/william.jpg" width="110px"


height="200px">

<p align="center" class="nombre">WILLIAM</p>

</li>
<li>

<img src="imagenes/keny1.jpg" width="110px"


height="193px">

<p align="center" class="nombre">KENY</p>

</li>

</ul>

</div>

</aside>

<div class="ropero">

<div>

<div class="almacen" id="a">

<a href="file:///C:/Users/JERSON%20RAMÍREZ/Desktop/a.html"
style=" text-decoration: none;" target="_blank"><img src="icon1.png" class="icono1">

<p class="texto1">INICIO</p> </a>

</div>

<div class="almacen" id="b">

<img src="icon2.png" class="icono1">

<p class="texto1">EJEMPLO2</p>

</div>

<div class="almacen" id="c">

<img src="icon3.png" class="icono1">

<p class="texto1">EJEMPLO3</p>
</div>

<div class="almacen" id="d">

<img src="icon4.png" class="icono1">

<p class="texto1">EJEMPLO4</p>

</div>

<div class="almacen" id="e">

<img src="icon5.png" class="icono1">

<p class="texto1">EJEMPLO5</p>

</div>

<div class="almacen" id="f">

<img src="icon6.png" class="icono1">

<p class="texto1">EJEMPLO6</p>

</div>

<div class="almacen" id="g">

<img src="icon1.png" class="icono1">

<p class="texto1">EJEMPLO7</p>

</div>

</div>

</div>

<footer>
<div class="cuadrofooter">

<form>

<input type="button" name="boton" onclick="prueba3();" value="Cambiar


imagen de fondo" class="cambiodeimagen" id="unnn">

<input type="button" name="boton" onclick="prueba4();" value="Agregar


fondo a la calculadora" class="cambiodeimagen" id="donn">

<input type="button" name="boton" onclick="anime();" value="Agregar fondo


de ánimes" class="cambiodeimagen" id="denn">

</form>

</div>

</footer>

</body>

<script type="text/javascript">

var fon= document.getElementById("cuerpo1")

function prueba3(){

var pregunta= prompt("Que fondo quiere ponerle, eliga entre:


fondo1, fondo2, fondo3, fondo4, fondo5, fondo6 ");

if (pregunta == "fondo1") {

fon.style.backgroundImage= "url(fond1.jpg)";

else if (pregunta == "fondo2") {

fon.style.backgroundImage= "url(fond2.png)";

else if (pregunta == "fondo3") {

fon.style.backgroundImage= "url(fond3.jpg)";
}

else if (pregunta == "fondo4") {

fon.style.backgroundImage= "url(fond4.jpg)";

else if (pregunta == "fondo5") {

fon.style.backgroundImage= "url(fond5.jpg)";

else if (pregunta == "fondo6") {

fon.style.backgroundImage= "url(fond6.jpg)";

else{

alert("Introdusca adecuadamente como se muestra en


pantalla los fondos");

alert("========>>>>>>BYE<<<<<<========");

</script>

<script type="text/javascript">

var calcu= document.getElementById("abc")

function prueba4(){

var pregunta1= prompt("Que color quiere ponerle, tiene 7 opciones:


azul, morado, verde, anaranjado, amarillo, rojo, rosado");

if (pregunta1 == "azul") {

calcu.style.backgroundColor ="rgba(46,81,240,.6)";

calcu.style.border= "5px solid rgba(46,81,240,.9)";

else if (pregunta1 == "morado") {


calcu.style.backgroundColor= "rgba(252,18,244,.6)";

calcu.style.border= "5px solid rgba(252,18,244,.9)";

else if (pregunta1 == "verde") {

calcu.style.backgroundColor= "rgba(121,254,75,.6)";

calcu.style.border= "5px solid rgba(121,254,75,.9)";

else if (pregunta1 == "anaranjado") {

calcu.style.backgroundColor= "rgba(230,134,60,.6)";

calcu.style.border= "5px solid rgba(230,134,60,.9)";

else if (pregunta1 == "amarillo") {

calcu.style.backgroundColor= "rgba(196,210,44,.6)";

calcu.style.border= "5px solid rgba(196,210,44,.9)";

else if (pregunta1 == "rojo") {

calcu.style.backgroundColor= "rgba(241,97,90,.6)";

calcu.style.border= "5px solid rgba(241,97,90,.9)";

else if (pregunta1 == "rosado") {

calcu.style.backgroundColor= "rgba(255,138,136,.6)";

calcu.style.border= "5px solid rgba(255,138,136,.9)";

else{

alert("Usted no inserto adecuadamente el nombre del color


:D");

alert("---->>>!!!BYE!!!!<<<----");

}
</script>

<script type="text/javascript">

var imagenanime= document.getElementById("cuerpo1")

function anime(){

var dibujos= prompt("Que anime quieres agregar como fondo,


contamos con 7 fondos, los cuales son: naruto, dragonball, dragonball2, flash, flash2, anime2,
bleach");

if (dibujos == "dragonball") {

imagenanime.style.backgroundImage=
"url(dragonball.jpg)";

else if (dibujos == "dragonball2") {

imagenanime.style.backgroundImage=
"url(dragonball2.jpg)";

else if (dibujos == "naruto") {

imagenanime.style.backgroundImage=
"url(naruto.jpg)";

else if (dibujos == "bleach") {

imagenanime.style.backgroundImage=
"url(bleach.jpg)";

else if (dibujos == "flash") {

imagenanime.style.backgroundImage= "url(flash.jpg)";

}
else if (dibujos == "flash2") {

imagenanime.style.backgroundImage=
"url(flash2.jpg)";

else if (dibujos == "anime2") {

imagenanime.style.backgroundImage=
"url(anime2.png)";

else{

alert("Usted a introducido mal el nombre del anime");

alert("========>>>>>>BYE<<<<<<========");

</script>

</html>

You might also like