Javascript - Générer un mois aléatoire

Question

J'essaie de générer un mois aléatoire chaque fois que je rafraîchis le navigateur. J'ai le code HTML et CSS mais ne peux pas sembler savoir par où commencer pour le JavaScript. Si je peux être amené à la bonne direction sur la façon de faire cela, je pense que je serai en mesure de le mettre en œuvre.

body { 
 
    background: #e0e0e0; 
 
} 
 

 
#cal { 
 
    margin: 50px auto; 
 
    font: 13px/1.5 "Helvetica Neue", Helvetica, Arial, san-serif; 
 
    display: table; 
 
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25); 
 
    -moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25); 
 
    -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25); 
 
} 
 

 
#cal .header { 
 
    cursor: default; 
 
    background: #cd310d; 
 
    background: -moz-linear-gradient(top, #b32b0c, #cd310d); 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#b32b0c), to(#cd310d)); 
 
    height: 34px; 
 
    position: relative; 
 
    color: #fff; 
 
    -webkit-border-top-left-radius: 5px; 
 
    -webkit-border-top-right-radius: 5px; 
 
    -moz-border-radius-topleft: 5px; 
 
    -moz-border-radius-topright: 5px; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
    font-weight: bold; 
 
    text-shadow: 0px -1px 0 #87260c; 
 
    text-transform: uppercase; 
 
} 
 

 
#cal .header span { 
 
    display: inline-block; 
 
    line-height: 34px; 
 
} 
 

 
#cal .header .hook { 
 
    width: 9px; 
 
    height: 28px; 
 
    position: absolute; 
 
    bottom: 60%; 
 
    border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    background: #ececec; 
 
    background: -moz-linear-gradient(right top, #fff, #827e7d); 
 
    background: -webkit-gradient(linear, right top, right bottom, from(#fff), to(#827e7d)); 
 
    box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.65); 
 
    -moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.65); 
 
    -webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.65); 
 
} 
 

 
.right.hook { 
 
    right: 15%; 
 
} 
 

 
.left.hook { 
 
    left: 15%; 
 
} 
 

 
#cal .header .button { 
 
    width: 24px; 
 
    text-align: center; 
 
    position: absolute; 
 
} 
 

 
#cal .header .button:hover { 
 
    background: -moz-linear-gradient(top, #d94215, #bb330f); 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#d94215), to(#bb330f)); 
 
} 
 

 
#cal .header .right.button { 
 
    right: 0; 
 
    top: 0; 
 
    border-left: 1px solid #ae2a0c; 
 
    border-top-right-radius: 5px; 
 
    -moz-border-radius-topright: 5px; 
 
    -webkit-border-top-right-radius: 5px; 
 
} 
 

 
#cal .header .left.button { 
 
    left: 0; 
 
    border-right: 1px solid #ae2a0c; 
 
    border-top-left-radius: 5px; 
 
    -moz-border-radius-topleft: 5px; 
 
    -webkit-border-top-left-radius: 5px; 
 
} 
 

 
#cal .header .month-year { 
 
    letter-spacing: 1px; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
#cal table { 
 
    background: #fff; 
 
    border-collapse: collapse; 
 
} 
 

 
#cal td { 
 
    color: #2d2d2d; 
 
    width: 30px; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    text-align: center; 
 
    border: 1px solid #e6e6e6; 
 
    cursor: default; 
 
} 
 

 
#cal #day td { 
 
    height: 26px; 
 
    line-height: 26px; 
 
    text-transform: uppercase; 
 
    font-size: 90%; 
 
    color: #9e9e9e; 
 
} 
 

 
#cal #days td:not(:last-child) { 
 
    border-right: 1px solid #fff; 
 
} 
 

 
#cal #cal-frame td.today { 
 
    background: #ededed; 
 
    color: #8c8c8c8; 
 
    box-shadow: 1px 1px 0px #fff inset; 
 
    -moz-box-shadow: 1px 1px 0px #fff inset; 
 
    -webkit-box-shadow: 1px 1px 0px #fff inset; 
 
} 
 

 
#cal #cal-frame td:not(.nil):hover { 
 
    color: #fff; 
 
    text-shadow: #6c1a07 0px -1px; 
 
    background: #cd310d; 
 
    background: -moz-linear-gradient(top, #b32b0c, #cd310d); 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#b32b0c), to(#cd310d)); 
 
    box-shadow: 0px 0px 0px; 
 
    -moz-box-shadow: 0px 0px 0px; 
 
    -webkit-box-shadow: 0px 0px 0px; 
 
} 
 

 
#cal #cal-frame td span { 
 
    font-size: 80%; 
 
    position: relative; 
 
} 
 

 
#cal #cal-frame td span:first-child { 
 
    bottom: 5px; 
 
} 
 

 
#cal #cal-frame td span:last-child { 
 
    top: 5px; 
 
} 
 

 
#cal #cal-frame table.temp { 
 
    position: absolute; 
 
} 
 

 
#cal #cal-frame table.curr { 
 
    float: right; 
 
}

<div id="cal"> 
 
    <div class="header"> 
 
    <span class="month-year" id="label"> June 2010 </span> 
 
    </div> 
 
    <table id="days"> 
 
    <tr> 
 
     <td>sun</td> 
 
     <td>mon</td> 
 
     <td>tue</td> 
 
     <td>wed</td> 
 
     <td>thu</td> 
 
     <td>fri</td> 
 
     <td>sat</td> 
 
    </tr> 
 
    </table> 
 
    <div id="cal-frame"> 
 
    <table class="curr"> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     </tr> 
 
     <tr> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>11</td> 
 
     <td>12</td> 
 
     </tr> 
 
     <tr> 
 
     <td>13</td> 
 
     <td>14</td> 
 
     <td>15</td> 
 
     <td>16</td> 
 
     <td>17</td> 
 
     <td>18</td> 
 
     <td>19</td> 
 
     </tr> 
 
     <tr> 
 
     <td>20</td> 
 
     <td>21</td> 
 
     <td>22</td> 
 
     <td>23</td> 
 
     <td>24</td> 
 
     <td>25</td> 
 
     <td>26</td> 
 
     </tr> 
 
     <tr> 
 
     <td>27</td> 
 
     <td>28</td> 
 
     <td>29</td> 
 
     <td>30</td> 
 
     <td class="nil"></td> 
 
     <td class="nil"></td> 
 
     <td class="nil"></td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

View on CodePen

Answer 1

Cela va créer un nombre aléatoire pour le mois/année:

document.addEventListener('DOMContentLoaded', function() { 
    var randomMonth = parseInt(Math.random() * (12 - 1) + 1); 
    console.log(randomMonth) 

    var randomYear = parseInt(Math.random() * (2016 - 1980) + 1980); 
    console.log(randomYear) 
}); 

Lire cet article pour une explication: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random