根据日期更改下拉内容(悬停时)。 jQuery的

时间:2017-05-24 16:14:02

标签: javascript jquery html css

如何根据当天更改下拉内容?事实上。只有在星期三。这是我到目前为止所得到的:

function startTime() {
  var today = new Date();
  var hr = today.getHours();
  var min = today.getMinutes();
  var sec = today.getSeconds();
  ap = (hr < 12) ? "<span>AM</span>" : "<span>PM</span>";
  hr = (hr == 0) ? 12 : hr;
  hr = (hr > 12) ? hr - 12 : hr;

  hr = checkTime(hr);
  min = checkTime(min);
  sec = checkTime(sec);
  document.getElementById("clock").innerHTML = hr + ":" + min + ":" + sec + " " + ap;

  var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  var curWeekDay = days[today.getDay()];
  var curDay = today.getDate();
  var curMonth = months[today.getMonth()];
  var curYear = today.getFullYear();
  var date = curWeekDay + ", " + curDay + " " + curMonth + " " + curYear;
  document.getElementById("date").innerHTML = date;

  var time = setTimeout(function() {
    startTime()
  }, 500);
}

function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}



if (curDay = 'Wed') {
  $(document).ready(function() {
    $("a").hover(function() {
      $(".dropdown-content2").css("display", "block");
    }, function() {
      $(".dropdown-content2").css("display", "none");
    });
  });
} else {
  $(document).ready(function() {
    $("a").hover(function() {
      $(".dropdown-content").css("display", "block");
    }, function() {
      $(".dropdown-content").css("display", "none");
    });
  });
}
#dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown-content2 {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown-content3 {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
current block:
<div id="dropdown"> <a>1</a>
  <div class="dropdown-content">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>lunch</p>
    <p>4</p>
    <p>5</p>
  </div>
  <div class="dropdown-content2">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>pack</p>
    <p>lunch</p>
    <p>4</p>
    <p>5</p>
  </div>
  <div class="dropdown-content3">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>lunch</p>
    <p>4</p>
    <p>5</p>
    <p>Event</p>
  </div>
</div>

0 个答案:

没有答案