Saya sedang dalam proses membuat halaman (menggunakan html, css, javascript dan php).

Saya ingin membuat halaman di mana akan ditampilkan 7 lingkaran yang menunjukkan tanggal saat ini dan 6 hari berikutnya dan kemudian pengguna dapat mengklik panah untuk melihat 7 hari berikutnya.

Saya berhasil menemukan cara membuat lingkaran sederhana menggunakan CSS (terima kasih kepada Cara yang lebih mudah untuk membuat div lingkaran daripada menggunakan gambar?) tapi saya rasa tidak akan efisien untuk melanjutkan ke arah yang saya tuju sehingga bantuan apa pun akan sangat dihargai.

(Kurang lebih bagaimana saya ingin lingkaran yang dapat diklik tetapi tanpa "tanggal" dan tanggal ditampilkan sebagai Hari dalam seminggu
Bulan
Tanggal) https://s-media-cache- ak0.pinimg.com/originals/c5/29/48/c529482834077a7d9b49320424d244f7.jpg

Sunting: Sesuatu seperti ini tetapi bukannya kotak, melainkan lingkaran.

0
itsmaleen 10 Agustus 2017, 07:20

2 jawaban

Jawaban Terbaik

Anda dapat menggunakan html dan css, bukan gambar. Menyesuaikan radius batas, lebar dan tinggi pada .circle css akan mengubah ukuran dan semuanya harus memiliki jumlah piksel yang sama.

$('.circle').click(function(){
   console.log($(this).children('.date').text() + ' was clicked');
});
.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;
}
<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>
0
Donald Powell 18 Agustus 2017, 15:40
$(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>

Periksa ini. Mungkin Anda ingin memperbarui sedikit lagi.

0
Eugine Joseph 10 Agustus 2017, 04:55