想法：

樂透彩上看xx億，想知道現在去買彩卷的運勢如何 ? 點擊按鈕就可知道!!!!

程式需求：

1.點按鈕就知道結果
2.可重新占卜

這次用到的語法有jQuery和JavaScript，下面列出語法在這小程式扮演的腳色：

JavaScript:

Math.floor(): 傳回整數
Math.random()：產生隨機亂數
location.reload()：刷新頁面

jQuery:

append()：在該元素結尾插入內容
remove() ：移除元素
show()：顯示元素

首先在html網頁加入button、顯示文字等元素

HTML

  <div class="box">
    <h3>本日運氣</h3>
    <div class="result"></div><!-- 占卜結果-->
    <button class="btn">占卜</button>
    <button class="restart">重算</button>
  </div>

CSS

.box{
  width:120px;
  height:180px;
  border:1px solid orange;
  text-align:center;
}
.result{
  color:red;
  font-weight:bold;
}
.restart{
  margin-top:10px;
  display:none;//預設隱藏重算按鈕
}

接下來開始寫 JavaScript

先列出吉凶內容陣列

destiny_txt = new Array(6);
destiny_txt[0] = "大吉";
destiny_txt[1] = "中吉";
destiny_txt[2] = "小吉";
destiny_txt[3] = "凶";
destiny_txt[4] = "平";
destiny_txt[5] = "大凶";

再來把陣列放在亂數程式中隨機產生占卜結果，設定index等於該結果

index = Math.floor(Math.random() * destiny_txt.length);//JS亂數程式

接著，寫jQuery點擊按鈕事件

btn(占卜)按鈕按下時會觸發：插入結果、移除占卜按鈕、顯現重算按鈕
restart(重算)按鈕按下時會觸發：刷新網頁

$(document).ready(function(){

$('.btn').on('click',function(e){
  $('.result').append(destiny_txt[index]);//在該元素結尾插入占卜結果
  $(this).remove();//移除占卜按鈕
  $('.restart').show();//顯現重算按鈕
 });
$('.restart').on('click',function(e){
  location.reload(true);//刷新網頁
 });

});

上面重點如下：

1.先寫占卜結果陣列
2.陣列數值隨機產生
3.占卜按鈕按下時觸發顯示結果
4.重算按鈕按下時刷新網頁

結果如下：

codepen網址：https://codepen.io/yuski/pen/bYXPJj