个人中心
gpt4 book ai didi

javascript - html/css 交互式日历下一天/前一天按钮编码

转载 作者：行者123 更新时间：2023-11-28 15:56:55 25 4
gpt4 key购买 nike

我正在使用我在网上找到的教程来满足我对元素的需求。我想添加在日期之间选择(更改日历中的“事件”日期)和月份之间选择的功能按钮。

我的第一个问题是，如何根据 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>

最佳答案

您可以使用 addClass("class") 轻松地将 active 类添加到任何 DOM 元素，并使用 removeClass("class") 删除该类，前提是您使用的是 jQuery。

因此，如果您希望将 pD_button 标记为事件状态，您可以使用 jQuery 这样做

$(".pD_button").addClass("active");

如果您希望使用原生 JavaScript 完成此操作，则必须编写自己的函数来添加和删除类。你可以用

类列表 https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

或

类名 https://developer.mozilla.org/en-US/docs/Web/API/Element/className .

这种方法比在 CSS 中使用 :active 伪类要好。:active 伪类在单击鼠标时触发，但仅在按住鼠标按钮时触发。这意味着在您释放鼠标单击后，:active 将关闭。通过使用上述方法，您只需在 onclick 事件恰好获得所需行为时添加另一个类。

var prevButton = $(".pD_button");
prevButton.on("click", function() {
  if (!prevButton.hasClass("active")) {
    prevButton.addClass("active");
  } else /*if (prevButton.hasClass("active"))*/ {
    prevButton.removeClass("active");
  }
});

您可以在这里查看:https://jsfiddle.net/cqm26q1n/ .

重要的是，CSS 中的 .active 位于 .pD_button 类之后，这样当 active 时它会覆盖其 CSS类 get 附加到它。

编辑:使用我建议结合 jQuery .keydown(handler) 的方法:

var prevButton = $(".pD_button");
prevButton.on("keydown", function(e) {
  if (e.which === 102 || e.which === 68) {
    if (!prevButton.hasClass("active")) {
     prevButton.addClass("active");
    } else /*if (prevButton.hasClass("active"))*/ {
      prevButton.removeClass("active");
    }
  }
});

查看keydown的文档here .

关于javascript - html/css 交互式日历下一天/前一天按钮编码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40954302/

25 4 0
文章推荐： html - 验证(CSS 3.0): "var (--my-border-top)" is not valid value for the "border-top" property
文章推荐： javascript - jquery ajax请求如何获得成功？
文章推荐： javascript - 在表单发布上调用 Javascript 以通过 jQuery 更新 UI
文章推荐： javascript - jQuery - 在图像之间随机播放
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com