Poner 2 funciones en javascript en una pagina web
Publicado por helpme (7 intervenciones) el 29/11/2017 18:28:51
Buenos dias chicos quiero poner 2 java script en mi pagina web el primero es un menu que se despiega y el otro un contador como le podria hacer para que se ejecuten los 2 scripts por que nomas me ejecuta el primero. se los agradeceria demasiado gracias
se llama cont.html
y este se llama style.css
se llama cont.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
<title>SideBar Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="sidebar">
<br>
<ul>
<li>
<form id="form1" name="form1" method="post" action="findeturno.php" autocomplete="off">
<input name="1" type="submit" class="btn" id="1" value="OPCION 1" />
</form>
</li>
<li>
<form id="form1" name="form1" method="post" action="menuprueba.php" autocomplete="off">
<input name="2" type="submit" class="btn" id="2" value="MODO PRUEBA" />
</form>
</li>
<li>
<form id="form1" name="form1" method="post" action="comentarios.php" autocomplete="off">
<input name="3" type="submit" class="btn" id="3" value="COMENTARIOS" />
</form>
</li>
<li></li>
</ul>
</div>
<div id="toggle-btn" onclick="toggleSidebar(this)">
<span></span>
<span></span>
<span></span>
<form>
<label for="contador">Contador:</label><input type="text" id="contador">
</form>
<script>
function toggleSidebar(ref)
{ref.classList.toggle('active');
document.getElementById('sidebar').classList.toggle('active');
}</script>
<script>
var cont = 0;function contador(){
var contador = document.getElementById("contador");
contador.value = cont;
cont++;
}</script>
</body>
</html>
y este se llama style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
* {
margin:0px; padding:0px;box-sizing:border-box;
font-family:"Bree Serif",sans-serif;
}body { overflow:hidden;background-color: #41517F;
margin:15px; padding:15px;font-family:"Helvetica Neue", Helvetica, Arial;
cursor: pointer}.btn {
-webkit-border-radius: 16;
-moz-border-radius: 16;
border-radius: 16px;
font-family: Arial;
color: #ffffff;
font-size: 28px;
background: #273664;
padding: 5px 10px 5px 10px;border: solid #7986ae 0px;
text-decoration: none;
}.btn:hover {
background: #899DD5;
text-decoration: none;
}.btn2 {
-webkit-border-radius: 16;
-moz-border-radius: 16;
border-radius: 16px;
font-family: Arial;
color: #ffffff;
font-size: 22px;
background: #293E7A;
padding: 5px 10px 5px 10px;border: solid #7986ae 0px;
text-decoration: none;
}.btn2:hover {
background: #899DD5;
text-decoration: none;
}#sidebar {
position:absolute; top:0px; left:0px; width:310px; height:100vh;background:#1a1a1a;
text-align:center;
transform-origin:left;
transform:perspective(1200px) rotateY(90deg);
transition:all 400ms ease;}#sidebar ul li {
color:#ccc;
font-size:20px;
width:100%;
height:auto;border-bottom:1px solid #222222;
line-height:50px;
padding: 6px;}#sidebar.active {
transform:perspective(1200px) rotateY(0deg);
}#toggle-btn {
position:absolute; left:30px; top:20px;transition:left 200ms linear 0ms,transform 300ms ease 100ms;
width: auto; padding: 25px 25px 25px 25px;}#toggle-btn.active {
left:310px;transform:rotate(0deg);
}#toggle-btn span {
position:relative; top:0px; display:block;background:#1a1a1a;
width:30px; height:5px; margin:5px 0px; cursor:pointer; transition:transform 300ms ease 200ms;}#toggle-btn.active span:nth-child(1) {
top:10px;transform:rotate(45deg);
}#toggle-btn.active span:nth-child(2) {
opacity:0;}#toggle-btn.active span:nth-child(3) {
top:-10px;
transform:rotate(-45deg);
}ul {list-style-type: none;
list-style-image: url("");
list-style-position: outside;
}li { padding: 0px; margin: 0px; }a:visited {
color: none;}/* mouse over link */a:hover {
color: none;}/* selected link */a:active {
color: none;}Valora esta pregunta
0
