伊莉討論區

標題: 使用純JS 開發一個小算命程式(簡易版小六壬) [打印本頁]

作者: superjoeliao 時間: 2025-3-5 09:58 AM 標題: 使用純JS 開發一個小算命程式(簡易版小六壬)

本帖最後由 superjoeliao 於 2025-3-13 09:45 AM 編輯

我有寫出小六任的網頁程式
歡迎同好免費使用(懶得下載程式的人可以直接使用)
『bit(dot)ly/4hcIXFw』
上述網址QRCODE 圖
[attach]141131480[/attach]

PS.
由於貼網址會阻擋所以有需要請自行將(dot)替換成.即可使用

執行畫面
[attach]141108866[/attach]
程式碼分享
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小六壬網頁程式(Liu Ren HTML)</title>
<style>
      body {
         font-family: Arial, sans-serif;
         text-align: center;
         margin: 20px;
         font-size: 20px;
         background-color: #F0E68C; /* 鵝黃色 */
      }
      div{font-size: 20px;}
      label{font-size: 20px;}
      input{font-size: 20px;}
      input::placeholder { color: red;}
      .dice {
         font-size: 100px;
         margin: 20px;
      }
      button {
         font-size: 20px;
         padding: 10px 20px;
         margin: 10px;
         cursor: pointer;
      }
      .results {
         margin-top: 20px;
         font-size: 20px;
         color: #555;
      }
      .center-img {
         display: block;
         margin-left: auto;
         margin-right: auto;
         width: 20%;
      }
</style>
</head>
<body>
<h2>『隨機取數』小六壬算命程式</h2>
<div style="text-align: center;">
      <img src="./Liu-Ren.png" class="center-img" alt="Liu-Ren">
</div>
<br/>
<B>第一步:</B></br></br><input type="text" id="memo" name="memo" placeholder="請在此輸入本此想要詢問卜卦之事內容，並誠心默念三次" style="width: 500px; text-align: center;"> <br/><br/>
<B>第二步:</B><div style="white-space: pre-wrap;">
請在下面三個輸入框填入和此次卜卦之事相關的三個整數，
或者點選『隨機取數』按鈕由系統隨機幫你任取三個數
最後點選『開始算命』按鈕查看算命結果
</div>
<br/><br/>
<label>第一數：</label> <input type="text" id="v1" name="v1" value="0" style="width: 50px; text-align: center;">
<label>第二數：</label> <input type="text" id="v2" name="v2" value="0" style="width: 50px; text-align: center;">
<label>第三數：</label> <input type="text" id="v3" name="v3" value="0" style="width: 50px; text-align: center;"><br/>
<br/>
<button>隨機取數</button>
<button>開始算命</button>
<button>清除結果</button>
<br/><br/><br/>
<div id="results" class="results" style="white-space: pre-wrap; align-items: center; justify-content: flex-start;">結果：無</div>
<div id="dice" class="dice" style="display: none;">

歡迎光臨伊莉討論區 (http://a02.eyny.com/)