Question

我正在创建一个页面（使用html，css，javascript和php）。

我想制作一个显示7个圆圈的页面，显示当前日期和后续6天，然后用户可以点击箭头查看接下来的7个日子。

我设法弄清楚如何使用CSS创建一个简单的圆圈（感谢Easier way to create circle div than using an image?），但我认为继续朝着我的方向前进是有效的，所以任何帮助都会很大赞赏。

（或多或少我希望可点击的圈子如何但没有“日期”，日期显示为星期几
月日期） https://s-media-cache-ak0.pinimg.com/originals/c5/29/48/c529482834077a7d9b49320424d244f7.jpg

编辑： Something like this but instead of boxes, it would be circles.

Answer 1

您可以使用html和css代替图片。调整.circle css上的border-radius，width和height将改变大小，它们都必须是相同的像素数。

＆＃13;

$('.circle').click(function(){
   console.log($(this).children('.date').text() + ' was clicked');
});

＆＃13;

.circle {
    width: 150px;
    height: 150px;
    border-radius: 150px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    border: 5px solid #000000;
    margin-right: 10px;
    position: relative;
    overflow: hidden;
}
.date {
  position: relative;
  top: 55px;
  color: #000000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle">
  <div class="date">09/08/2017</div>
</div>
<div class="circle">
  <div class="date">09/09/2017</div>
</div>
<div class="circle">
  <div class="date">09/10/2017</div>
</div>
<div class="circle">
  <div class="date">09/11/2017</div>
</div>

＆＃13;

Answer 2

$(function() {
  $("#datepicker").datepicker();
});

.date-circle {
  width: 120px;
  height: 120px;
  background: pink;
  border-radius: 100px;
  border: 3px solid pink;
}

.date-circle .title {
  text-align: center;
  width: 50%;
  margin: 10px auto;
  padding-top: 10px;
  background: pink;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
}

.date-circle input,
.date-circle input:focus {
  width: 93%;
  position: relative;
  /* margin-top: -110px; */
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  height: 62px;
  border-color: transparent;
  margin: 2px;
  text-align: center;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="date-circle">
  <div class="title">Date</div>
  <input type="text" id="datepicker">
</div>

检查一下。也许你可能想要更新一点。

为网页创建可点击圆圈日期

2 个答案: