Javascript - 乱数生成

Question

私はブラウザをリフレッシュするたびにランダムな月を生成しようとしています。私はHTMLとCSSのコードを持っていますが、JavaScriptはどこから始めるべきかわかりません。もし私がこれをどうやって正しい方向に導くことができれば、私はそれを実現できると思う。

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

これは、月/年乱数を作成します。

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) 
}); 

は、説明のために、この記事を読む：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random