1
Я использую учебник, который я нашел онлайн, чтобы соответствовать моим потребностям в проекте. Я хотел бы добавить функциональные кнопки, которые выбирают между днями (изменение «активных» дней в календаре) и выбор между месяцами.html/css интерактивный календарь next/prev день кнопка кодировка
Мой первый вопрос: как мне закодировать кнопки prev и на следующий день, чтобы изменить предыдущий и следующий день на активный в соответствии с css?
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
}
body {
font-family: Verdana, sans-serif;
}
.month {
padding: 70px 25px;
width: 100%;
background: #1abc9c;
}
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: white;
font-size: 40px;
text-transform: uppercase;
letter-spacing: 3px;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .prevDay {
float: left;
}
.month .next {
float: right;
padding-top: 10px;
}
.month .nextDay {
float: right;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #ddd;
}
.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size: 12px;
color: #777;
}
.days li .active {
padding: 5px;
background: #1abc9c;
color: white !important
}
/* Add media queries for smaller screens */
@media screen and (max-width: 720px) {
.weekdays li,
.days li {
width: 13.1%;
}
}
@media screen and (max-width: 420px) {
.weekdays li,
.days li {
width: 12.5%;
}
.days li .active {
padding: 2px;
}
}
@media screen and (max-width: 290px) {
.weekdays li,
.days li {
width: 12.2%;
}
}
</style>
<style>
.pM_button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #cc9900;
background-color: #ffff00;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.pM_button:hover {
background-color: #ffff00
}
.pM_button:active {
background-color: #ffcc00;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.nM_button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #ffffff;
background-color: #9900cc;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.nM_button:hover {
background-color: #9900cc
}
.nM_button:active {
background-color: #660066;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.nD_button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #ffffff;
background-color: #ff0000;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.nD_button:hover {
background-color: #ff0000
}
.nD_button:active {
background-color: #800000;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.pD_button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #ffffff;
background-color: #33cc33;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.pD_button:hover {
background-color: #33cc33
}
.pD_button:active {
background-color: #009900;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
</head>
<body onkeydown="GetKey()">
<div class=" month ">
<ul>
<li class="prev ">
<button class="pM_button ">Prev Month</button>
</li>
<li class="prevDay ">
<button class="pD_button ">Prev Day</button>
</li>
<li class="next ">
<button class="nM_button ">Next Month</button>
</li>"
<li class="nextDay ">
<button class="nD_button ">Next Day</button>
</li>
<li style="text-align:center ">
August
<br>
<span style="font-size:18px ">2016</span>
</li>
</ul>
</div>
<ul class="weekdays ">
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
<ul class="days ">
<li><span class="active ">1</span>
</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
<script type="text/javascript ">
function GetKey(e) {
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
//var character = String.fromCharCode(code);
setTimeout('ShowTree(' + code + ');', 100);
}
function nextDay() {
}
function ShowTree(character, k) {
//Main Menu Key
if (character == 106) {
cWindow.close();
}
//Close Key
if (character == 111) {
alert(" Key:/");
responsiveVoice.speak("Close ", "UK English Male ");
}
//PageUP Key, next month
if (character == 98) {
alert(" Key: 2 ");
responsiveVoice.speak("Page Up ", "UK English Male ");
}
//PageDOWN key, previous month
if (character == 99) {
alert(" Key: 3 ");
responsiveVoice.speak("Page Down ", "UK English Male ");
}
//Previous Key, Previous Day
if (character == 65) { //keypad key 101
responsiveVoice.speak("Previous ", "UK English Male ");
//alert(" Key: 5 ");
}
//Next Key, Next Day
if (character == 68) { //keypad key 102
responsiveVoice.speak("Next ", "UK English Male ");
$(".pD_button ").click(.days.active++);
//alert(" Key: 6 ");
}
//Select Key
if (character == 83) { //keypad key 104
responsiveVoice.speak("Select ", "UK English Male ");
}
//alert(" Key: 8 ");
}
</script>
</body>
</html>
Чтобы clerify моей проблемы, я хотел бы кнопку 6 на цифровой клавиатуре (символ 102 или 68, если я не имеют клавиатуры), чтобы щелкнуть следующую кнопку, помещенную в заголовок календаря, и сделать следующую дату активной. То же самое относится к предыдущей кнопке, кроме символов 65 или 101, и сделать предыдущую дату активной. Решения, отправленные Rimon и 030, не работали для моего заявления, но я ценю вашу помощь. – Melissa