Board logo

標題: 練習終、大家都是兩光占卜法師 [打印本頁]
作者: 游東祥    時間: 2014-7-19 10:43     標題: 練習終、大家都是兩光占卜法師

本帖最後由 游東祥 於 2014-7-19 12:08 編輯

大家的作品連結：

http://app.kitaspace.net/yoho/

http://app.kitaspace.net/fufu/

http://app.kitaspace.net/elmer/



原始未完成程式碼：
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.                 <!-- 引用 Bootstrap 素材與jQuery -->
  7.                 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  8.                 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  9.                 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  10.                 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  11.         </head>
  12.         <body>
  13.                 <div class="container">

  15.                         <div class="row">
  16.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  17.                                         <h1></h1>
  18.                                 </div>
  19.                         </div>

  21.                         <div class="row">
  22.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  23.                                         <div class="input-group">
  24.                                                 <span class="input-group-addon"></span>
  25.                                                 <input class="form-control" />
  26.                                                 <span class="input-group-addon"></span>
  27.                                         </div>
  28.                                 </div>
  29.                         </div>

  31.                         <div class="row">
  32.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  33.                                         <div class="input-group">
  34.                                                 <span class="input-group-addon"></span>
  35.                                                 <input class="form-control" />
  36.                                                 <span class="input-group-addon"></span>
  37.                                         </div>
  38.                                 </div>
  39.                         </div>

  41.                         <div class="row">
  42.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  43.                                         <div class="input-group">
  44.                                                 <span class="input-group-addon"></span>
  45.                                                 <input class="form-control" />
  46.                                                 <span class="input-group-addon"></span>
  47.                                         </div>
  48.                                 </div>
  49.                         </div>

  51.                         <div class="row">
  52.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  53.                                         <button type="button" class="btn btn-primary btn-lg btn-block"></button>
  54.                                 </div>
  55.                         </div>
  56.                         
  57.                         <div class="row">
  58.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3" style="margin-top:50px;">
  59.                                         <span style="font-size:50pt" class="label label-success"></span>
  60.                                         <span style="font-size:50pt" class="label label-info"></span>
  61.                                         <span style="font-size:50pt" class="label label-danger"></span>
  62.                                 </div>
  63.                         </div>

  65.                 </div>


  68.                 <script type="text/javascript">



  72.                 </script>


  75.         </body>
  76. </html>
複製代碼
作者: 陳威臣    時間: 2014-7-19 11:52

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.                 <!-- 引用 Bootstrap 素材與jQuery -->
  7.                 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  8.                 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  9.                 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  10.                 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  11.         </head>
  12.         <body>
  13.                 <div class="container">

  15.                         <div class="row">
  16.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  17.                                         <h1>占卜術x</h1>
  18.                                 </div>
  19.                         </div>

  21.                         <div class="row">
  22.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  23.                                         <div class="input-group">
  24.                                                 <span class="input-group-addon">出生年</span>
  25.                                                 <input id="iyear" class="form-control" />
  26.                                                 <span class="input-group-addon">年</span>
  27.                                         </div>
  28.                                 </div>
  29.                         </div>

  31.                         <div class="row">
  32.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  33.                                         <div class="input-group">
  34.                                                 <span class="input-group-addon">出生月</span>
  35.                                                 <input id="imath" class="form-control" />
  36.                                                 <span class="input-group-addon">月</span>
  37.                                         </div>
  38.                                 </div>
  39.                         </div>

  41.                         <div class="row">
  42.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  43.                                         <div class="input-group">
  44.                                                 <span class="input-group-addon">出生日</span>
  45.                                                 <input id="day" class="form-control" />
  46.                                                 <span class="input-group-addon">日</span>
  47.                                         </div>
  48.                                 </div>
  49.                         </div>

  51.                         <div class="row">
  52.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  53.                                         <button id="btn" type="button" class="btn btn-primary btn-lg btn-block">開始</button>
  54.                                 </div>
  55.                         </div>
  56.                        
  57.                         <div class="row">
  58.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3 test-center" style="margin-top:50px;">
  59.                                         <span id="r0" style="font-size:50pt" class="label label-success">吉</span>
  60.                                         <span id="r1" style="font-size:50pt" class="label label-info">普</span>
  61.                                         <span id="r2" style="font-size:50pt" class="label label-danger">凶</span>
  62.                                 </div>
  63.                         </div>

  65.                 </div>


  68.                 <script type="text/javascript">
  69.                 $("#btn").click(calc)
  70.                 function calc ()
  71.                 {
  72.                         var y=parseInt($("#iyear").val());
  73.                         var m=parseInt($("#imath").val());
  74.                         var d=parseInt($("#day").val());

  76.                         var r=((m+d)*m)%3;
  77.                         $("#r0").hide();                       
  78.                         $("#r1").hide();
  79.                         $("#r2").hide();

  81.                         $("#r"+r).fadeIn();
  82.                 }

  84.                 </script>


  87.         </body>
  88. </html>
複製代碼
作者: 劉泳鱔    時間: 2014-7-19 12:01

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.                 <!-- 引用 Bootstrap 素材與jQuery -->
  7.                 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  8.                 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  9.                 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  10.                 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  11.         </head>
  12.         <body>
  13.                 <div class="container">

  15.                         <div class="row">
  16.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  17.                                         <h1>ㄞㄞ占卜術</h1>
  18.                                 </div>
  19.                         </div>

  21.                         <div class="row">
  22.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  23.                                         <div class="input-group">
  24.                                                 <span class="input-group-addon">出生年</span>
  25.                                                 <input id="year" class="form-control" />
  26.                                                 <span class="input-group-addon">年</span>
  27.                                         </div>
  28.                                 </div>
  29.                         </div>

  31.                         <div class="row">
  32.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  33.                                         <div class="input-group">
  34.                                                 <span class="input-group-addon">出生月</span>
  35.                                                 <input id="month" class="form-control" />
  36.                                                 <span class="input-group-addon">月</span>
  37.                                         </div>
  38.                                 </div>
  39.                         </div>

  41.                         <div class="row">
  42.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  43.                                         <div class="input-group">
  44.                                                 <span class="input-group-addon">出生日</span>
  45.                                                 <input id="day" class="form-control" />
  46.                                                 <span class="input-group-addon">日</span>
  47.                                         </div>
  48.                                 </div>
  49.                         </div>

  51.                         <div class="row">
  52.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  53.                                         <button id="btn" type="button" class="btn btn-primary btn-lg btn-block">開始占卜</button>
  54.                                 </div>
  55.                         </div>
  56.                        
  57.                         <div class="row">
  58.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3 -text-center" style="margin-top:50px;">
  59.                                         <span id="r0" style="font-size:50pt" class="label label-success">吉</span>
  60.                                         <span id="r1" style="font-size:50pt" class="label label-info">普</span>
  61.                                         <span id="r2" style="font-size:50pt" class="label label-danger">凶</span>
  62.                                 </div>
  63.                         </div>

  65.                 </div>


  68.                 <script type="text/javascript">

  70.                 $("#btn").click(calc)
  71.                 function calc()
  72.                 {
  73.                         var y=parseInt($("#year").val());
  74.                         var m=parseInt($("#month").val());
  75.                         var d=parseInt($("#day").val());
  76.                         var r=(y*m*d)%3
  77.                         $("#r0").hide();
  78.                         $("#r1").hide();
  79.                         $("#r2").hide();
  80.                         $("#r"+r).fadeIn();
  81.                 }
  82.                 </script>


  85.         </body>
  86. </html>
複製代碼
作者: 陳品諨    時間: 2014-7-19 12:01

  1. <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  2.                                         <button id="btn" type="button" class="btn btn-primary btn-lg btn-block">開始占卜</button>
  3.                                 </div>
  4.                         </div>
  5.                        
  6.                         <div class="row">
  7.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3 test-center" style="margin-top:50px;">
  8.                                         <span id="r0" style="font-size:50pt" class="label label-success">吉</span>
  9.                                         <span id="r1" style="font-size:50pt" class="label label-info">普</span>
  10.                                         <span id="r2" style="font-size:50pt" class="label label-danger">凶</span>
  11.                                 </div>
  12.                         </div>

  14.                 </div>


  17.                 <script type="text/javascript">
  18.                 $("#btn").click(calc)
  19.                 function calc () {
  20.                         var y =parseInt($("#year").val());
  21.                         var m =parseInt($("#mouth").val());
  22.                         var d =parseInt($("#day").val());

  24.                         var r=((d+y)*m)%3
  25.                         $("#r0").hide();
  26.                         $("#r1").hide();
  27.                         $("#r2").hide();
  28.                         $("#r"+r).fadeIn();
  29.                 }


  32.                 </script>


  35.         </body>
  36. </html>
複製代碼
作者: 陳品諨    時間: 2014-7-19 12:11

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.                 <!-- 引用 Bootstrap 素材與jQuery -->
  7.                 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  8.                 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  9.                 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  10.                 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  11.         </head>
  12.         <body>
  13.                 <div class="container">

  15.                         <div class="row">
  16.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  17.                                         <h1>我的占卜術</h1>
  18.                                 </div>
  19.                         </div>

  21.                         <div class="row">
  22.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  23.                                         <div class="input-group">
  24.                                                 <span class="input-group-addon">出生年</span>
  25.                                                 <input id="year" class="form-control" />
  26.                                                 <span class="input-group-addon">年</span>
  27.                                         </div>
  28.                                 </div>
  29.                         </div>

  31.                         <div class="row">
  32.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  33.                                         <div class="input-group">
  34.                                                 <span class="input-group-addon">出生月</span>
  35.                                                 <input id="mouth" class="form-control" />
  36.                                                 <span class="input-group-addon">月</span>
  37.                                         </div>
  38.                                 </div>
  39.                         </div>

  41.                         <div class="row">
  42.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  43.                                         <div class="input-group">
  44.                                                 <span class="input-group-addon">出生日</span>
  45.                                                 <input id="day" class="form-control" />
  46.                                                 <span class="input-group-addon">日</span>
  47.                                         </div>
  48.                                 </div>
  49.                         </div>

  51.                         <div class="row">
  52.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  53.                                         <button id="btn" type="button" class="btn btn-primary btn-lg btn-block">開始占卜</button>
  54.                                 </div>
  55.                         </div>
  56.                        
  57.                         <div class="row">
  58.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3 test-center" style="margin-top:50px;">
  59.                                         <span id="r0" style="font-size:50pt" class="label label-success">吉</span>
  60.                                         <span id="r1" style="font-size:50pt" class="label label-info">普</span>
  61.                                         <span id="r2" style="font-size:50pt" class="label label-danger">凶</span>
  62.                                 </div>
  63.                         </div>

  65.                 </div>


  68.                 <script type="text/javascript">
  69.                 $("#btn").click(calc)
  70.                 function calc () {
  71.                         var y =parseInt($("#year").val());
  72.                         var m =parseInt($("#mouth").val());
  73.                         var d =parseInt($("#day").val());

  75.                         var r=((d+y)*m)%3
  76.                         $("#r0").hide();
  77.                         $("#r1").hide();
  78.                         $("#r2").hide();
  79.                         $("#r"+r).fadeIn();
  80.                 }


  83.                 </script>


  86.         </body>
  87. </html>
複製代碼
作者: 李允軒    時間: 2014-7-21 15:40

本帖最後由 李允軒 於 2014-7-23 07:08 編輯
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.                 <meta charset="utf-8">
  5.                 <title>占卜程式</title>
  6.                 <!-- 引用 Bootstrap 素材與jQuery -->
  7.                 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  8.                 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  9.                 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  10.                 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  11. </head>
  12. <body>
  13.                 <div class="container">

  15.                                                 <div class="row">
  16.                                                                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  17.                                                                                                                 <h1>占卜程式</h1>
  18.                                                                                 </div>
  19.                                                 </div>

  21.                                                 <div class="row">
  22.                                                                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  23.                                                                                                                 <div class="input-group">
  24.                                                                                                                                                 <span class="input-group-addon">出生年</span>
  25.                                                                                                                                                 <input class="form-control" id ="year" />
  26.                                                                                                                                                 <span class="input-group-addon">年</span>
  27.                                                                                                                 </div>
  28.                                                                                 </div>
  29.                                                 </div>

  31.                                                 <div class="row">
  32.                                                                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  33.                                                                                                                 <div class="input-group">
  34.                                                                                                                                                 <span class="input-group-addon">出生月</span>
  35.                                                                                                                                                 <input class="form-control" id ="month" />
  36.                                                                                                                                                 <span class="input-group-addon">月</span>
  37.                                                                                                                 </div>
  38.                                                                                 </div>
  39.                                                 </div>

  41.                                                 <div class="row">
  42.                                                                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  43.                                                                                                                 <div class="input-group">
  44.                                                                                                                                                 <span class="input-group-addon">出生日</span>
  45.                                                                                                                                                 <input class="form-control" / id ="day">
  46.                                                                                                                                                 <span class="input-group-addon">日</span>
  47.                                                                                                                 </div>
  48.                                                                                 </div>
  49.                                                 </div>

  51.                                                 <div class="row">
  52.                                                                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  53.                                                                                                                 <button  id ="btn" type="button" class="btn btn-primary btn-lg btn-block">開始占卜</button>
  54.                                                                                 </div>
  55.                                                 </div>
  56.                                                
  57.                                                 <div class="row">
  58.                                                                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3" style="margin-top:50px;">
  59.                                                                                                                 <span id ="r0" style="font-size:50pt" class="label label-success">吉</span>
  60.                                                                                                                 <span id ="r1" style="font-size:50pt" class="label label-info">普</span>
  61.                                                                                                                 <span id ="r2" style="font-size:50pt" class="label label-danger">兇</span>
  62.                                                                                 </div>
  63.                                                 </div>

  65.                 </div>


  68.                 <script type="text/javascript">
  69.                 $("#btn").click(calc)
  70.     function calc()
  71.     {
  72.             var y=parseInt($("#year").val());
  73.             var m=parseInt($("#month").val());
  74.             var d=parseInt($("#day").val());
  75.             var r=((y+m)*d)%3
  76.             $("#r0").hide();
  77.             $("#r1").hide();
  78.             $("#r2").hide();
  79.             $("#r"+r).fadeIn();
  80.                 }
  81.                 </script>


  84. </body>
  85. </html>
複製代碼
作者: 張彥承    時間: 2014-7-21 15:52

本帖最後由 張彥承 於 2014-7-21 16:00 編輯
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>Legend is a genious</title>
  6.                 <!-- 引用 Bootstrap 素材與jQuery -->
  7.                 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  8.                 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  9.                 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  10.                 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  11.         </head>
  12.         <body>
  13.                 <div class="container">

  15.                         <div class="row">
  16.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  17.                                         <h1>Legion's Legend</h1>
  18.                                 </div>
  19.                         </div>

  21.                         <div class="row">
  22.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  23.                                         <div id="year" class="input-group">
  24.                                                 <span class="input-group-addon">出生年</span>
  25.                                                 <input id="year" class="form-control" />
  26.                                                 <span class="input-group-addon">年</span>
  27.                                         </div>
  28.                                 </div>
  29.                         </div>

  31.                         <div class="row">
  32.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  33.                                         <div id="month" class="input-group">
  34.                                                 <span class="input-group-addon">出生月</span>
  35.                                                 <input class="form-control" />
  36.                                                 <span class="input-group-addon">月</span>
  37.                                         </div>
  38.                                 </div>
  39.                         </div>

  41.                         <div class="row">
  42.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  43.                                         <div id="day" class="input-group">
  44.                                                 <span class="input-group-addon">出生日</span>
  45.                                                 <input class="form-control" />
  46.                                                 <span class="input-group-addon">日</span>
  47.                                         </div>
  48.                                 </div>
  49.                         </div>

  51.                         <div class="row">
  52.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
  53.                                         <button id="btn" type="button" class="btn btn-primary btn-lg btn-block">開始占卜
  54.                                         </button>
  55.                                 </div>
  56.                         </div>
  57.                         
  58.                         <div class="row">
  59.                                 <div class="col-xs-12 col-sm-6 col-sm-offset-3" style="margin-top:50px;">
  60.                                         <span style="font-size:50pt" class="label label-success">吉</span>
  61.                                         <span style="font-size:50pt" class="label label-info">普</span>
  62.                                         <span style="font-size:50pt" class="label label-danger">凶</span>
  63.                                 </div>
  64.                         </div>

  66.                 </div>


  69.                 <script type="text/javascript">
  70.                 $("#btn").click(calc);
  71.                 function calc()
  72.                 {
  73.                          var y=parseInt($("#year").val());
  74.                          var m=parseInt($("#month").val());
  75.                          var d=parseInt($("#day").val());
  76.                          var r=(y*m*d)%3
  77.                          $("#r0").hide();
  78.                          $("#r1").hide();
  79.                          $("#r2").hide();
  80.                         $("#r"+r).fadeIn();
  81.                 }


  84.                 </script>


  87.         </body>
  88. </html>
複製代碼
作者: tonyh    時間: 2014-7-21 15:52

允軒作品
http://app.kitaspace.net/jerry/
彥承作品
http://app.kitaspace.net/yan/



歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://seed.istak.org.tw/) Powered by Discuz! 7.2