iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 11
0
自我挑戰組

網頁學習日誌系列 第 11

jQuery:本日占卜

想法:

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

程式需求:

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

這次用到的語法有jQueryJavaScript,下面列出語法在這小程式扮演的腳色:

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


上一篇
RWD : 網頁版面轉RWD設定
下一篇
jQuery :尋找餐廳
系列文
網頁學習日誌30

2 則留言

0
king742171
iT邦新手 3 級 ‧ 2017-12-14 15:50:09

可惡!!
被標題吸引!!
根本亂數產生而已阿~~~~~
XDDDD

yuski iT邦新手 5 級‧ 2017-12-14 16:00:12 檢舉

嘿嘿..他還是有占卜的效果阿..

並沒有ㄚ~~
按六次..
反差都超大的阿~~~~
大吉.大凶.大吉.大凶.大吉.平......
/images/emoticon/emoticon10.gif

yuski iT邦新手 5 級‧ 2017-12-14 16:36:09 檢舉

辛苦你了!!!
如果最近要買彩卷可能時機未到..搞不好之後會中大獎..頭獎得主就是你啦!!!

0
not
iT邦新手 5 級 ‧ 2017-12-14 17:47:24

蠻好玩的!
不過我比較急性子,等不及重新整理,改了一個可以一直按占卜就更新結果的版本
https://codepen.io/not0000/pen/Eojxrd

yuski iT邦新手 5 級‧ 2017-12-14 18:24:29 檢舉

高手出現!!
其實主要是要在這篇文章介紹jquery語法像是remove()
所以才把程式改這樣的..

我要留言

立即登入留言