---
# System prepended metadata

title: '"peipei的小工具網"所有物件程式碼'

---

## **Js期末成果:**

**"會陸續增加作品歐！
歡迎繼續關注我的網頁~"**
旋轉程式碼:
```HTML=
<html>
<head>
<title>旋轉字</title>
</head>
<body>
  <div class="spin-text"><br><br><br>會陸續增加作品歐！<br>
    歡迎繼續關注我的網頁~</div>
</body>
</html>
<style>
  /* 隱藏滾動條 */
  body {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }

  body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .spin-text {
    font-size: 35px;
    color: #afafce;
    transition: transform 0.5s ease;
  }

  .spin-text:hover {
    transform: rotate(360deg);
  }
</style>
```
****
**抽獎平台&訊息看板**
程式碼:
```HTML=
<html>
<head>
<title>訊息看板</title>
</head>
<body>
<h3>抽獎平台</h3>
<div class="text" id="ncyu"></div><br>
<div class="button-container">
  <button onclick="toggleTimer()">繼續</button>
</div>
</body>
</html>
<style>
/* CSS 部分 */
.text {
  color: #afafce; /* 變更訊息看板文字顏色為淺紫色 */
  font-size: 30px; /* 變更訊息看板文字大小 */
  text-align: center; /* 讓文字置中 */
  margin-top: 20px; /* 設置文字上方的 margin */
}

/* 額外設定 */
h3 {
  color: white; /* 變更標題文字顏色為白色 */
  font-size: 80px; /* 變更標題文字大小 */
  text-align: center; /* 讓標題置中 */
  margin-bottom: 20px; /* 設置標題下方的 margin */
}

.button-container {
  text-align: center; /* 讓按鈕置中 */
}
</style> 
  
<script>
let timer;
let cnt = 0;
let msg = ["好期待~", "緊張死了！", "恭喜中獎！"];
let isRunning = false; // 初次載入時按鈕為「繼續」狀態

function com() {
  cnt = cnt % msg.length;
  document.getElementById("ncyu").innerHTML = msg[cnt];
  cnt = cnt + 1;
}

function toggleTimer() {
  if (!isRunning) {
    timer = setInterval(com, 1000);
    document.querySelector("button").innerText = "停止";
  } else {
    clearInterval(timer);
    document.querySelector("button").innerText = "繼續";
  }
  isRunning = !isRunning;
}

// 初次載入頁面時按鈕是「繼續」狀態
toggleTimer();
</script>
```
****
**抽獎**
程式碼:
```HTML=
<html>
<head>
<title>抽獎平台</title>
 </head>
<body>
<div class="container">
  <label for="input">請換行輸入名字或座號：</label>
  <div class="input-field">
    <textarea id="input" rows="5"></textarea>
  </div>
  <button class="button" onclick="pickWinner()">抽獎！</button>
  <p class="result" id="result"></p>
</div>
</body>
</html>
<style>
/* CSS 部分 */
body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  color: white; /* 將文字顏色設為白色 */
}

.container {
  text-align: center;
}

.input-field {
  margin-bottom: 20px;
}

/* 修改輸入框寬度和高度 */
textarea {
  width: 600px;
  height: 300px;
  resize: none; /* 禁止調整大小 */
  font-size: 30px;
  color: black; /* 將輸入框文字顏色設為黑色 */
}

/* 修改標籤字大小和顏色 */
label {
  font-size: 40px;
  color: white; /* 將標籤文字顏色設為白色 */
}

.button {
  padding: 15px 30px;
  font-size: 20px;
  cursor: pointer;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 5px;
}

.result {
  margin-top: 20px;
  font-size: 24px;
}
</style>
<script>
// JavaScript 部分
function pickWinner() {
  const input = document.getElementById('input').value.trim();
  const namesOrNumbers = input.split('\n').map(entry => entry.trim()).filter(entry => entry !== ''); // 以換行分隔輸入

  if (namesOrNumbers.length > 0) {
    const randomIndex = Math.floor(Math.random() * namesOrNumbers.length);
    const winner = namesOrNumbers[randomIndex];
    document.getElementById('result').innerText = `恭喜 ${winner} 中獎！`;
  } else {
    document.getElementById('result').innerText = '請輸入有效的名字或座號！';
  }
}
</script>
```
****
**抽籤跑馬燈**
程式碼:
```HTML=
</head>
<body>
<div class="marquee">
  <p>大大吉、大吉、中吉、小吉、吉、末吉、末小吉、小小凶、小凶、中凶、凶、大凶、大凶兆</p>
</div>
</body>
</html>
<title>跑馬燈</title>
<style>
/* CSS 部分 */
.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: 10px;
  color:#e8e3fc
}

.marquee p {
  display: inline-block;
  margin: 0;
  font-size: 20px;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>

```
****
**抽籤**
程式碼:
```HTML=
<html>
<head>
  <title>抽籤程式</title>
</head>
<body>
  <h1>來~抽籤一"嚇"！</h1>
  <label for="userInput">請輸入一個正整數：</label>
  <input type="text" id="userInput" />
  <button onclick="pickRandom()">抽籤！</button>
  <div id="result"></div>
</body>
</html>
<style>
  body {
    font-family: Arial, sans-serif;
    text-align: center;
  }
  #result {
    font-size: 24px;
    margin-top: 20px;
  }
</style>
<script>
  function pickRandom() {
    const userInput = document.getElementById('userInput').value;
    const isInteger = userInput > 0 && Number.isInteger(parseFloat(userInput));  
    // 檢查使用者輸入是否為有效正整數
    if (!isInteger) {
      const resultElement = document.getElementById('result');
      resultElement.textContent = '請輸入有效數字，須為正整數！';
      return;
    }

    const numberOfOptions = 13; // 假設有13個籤文
    const resultIndex = userInput % numberOfOptions;

    const options = [
      '大大吉',
      '大吉',
      '中吉',
      '小吉',
      '吉',
      '末吉',
      '末小吉',
      '小小凶',
      '小凶',
      '中凶',
      '凶',
      '大凶',
      '大凶兆'
    ];

    const resultElement = document.getElementById('result');
    resultElement.textContent = `根據您的數字，抽到的籤文是：${options[resultIndex]}`;
  }
</script>
```
****
**留言中心**
程式碼:
```HTML=
<body onLoad="show()">
  <div id="ncyu">
    <img id="ico">
  </div>
 
<h2>Peipei的留言中心</h2>
<h3>主旨</h3>
<input type="text" id="title" size="50"></input>
<h3>內容</h3>
<textarea id="content" cols="50" rows="8"></textarea>
<br>
<button id="btn">送出</button>
<div id="list">
  <div id="news">
    <h4>忙碌中...</h4>
    <P>有事請留言!看到馬上回覆</p><hr>
  </div>
</div>
</body>
<style>
h2 {
  color: #7a62de;
  font-size: 40px;
}

h3 {
  color: #7f6ecc;
  font-size: 30px;
}
h4 {
  color: #e08e00;
  font-size: 35px;
}
h5 {
  color: #f0465f;
  font-size: 30px;
}

#title,
#content {
  font-size: 16px;
  
}

#ncyu {
  position: fixed;
  border: solid 5px gold;
  top: 20px; /* 調整圖片與頂部的距離 */
  right: 20px; /* 調整圖片與右邊的距離 */
}

#ico{
  width:500px;
}
</style>
<script>

let title = document.getElementById("title");
let content = document.getElementById("content");
let btn = document.getElementById("btn");
let list = document.getElementById("list");
btn.addEventListener("click",news);
function news(){
  list.innerHTML = list.innerHTML + `
  <div class="news">
    <h5>${title.value}</h5>
    <p>${content.value}</p><hr>
  </div>
  `;
}

let i=0, imgArr=new Array();
imgArr[0] = "https://i.ytimg.com/vi/IIJCTQDiQq0/mqdefault.jpg";
imgArr[1] = "https://memeprod.ap-south-****1.linodeobjects.com/user-template-thumbnail/1d27f077c546f31f6a656d7669f4eb2f.jpg";
imgArr[2] = "https://ballfish.io/docomo-poinko-textmaker/static/media/12.fa6d2eea.jpg";

function showImg() {
  document.getElementById("ico").src = imgArr[i]; //指定 img 的 src
  i = (i+1) % 3; //把i加1之後，除以3(因為有三張圖輪播)，將餘數再放到變數i裡
}

function show() {
  setInterval(showImg, 1000);//每隔2秒呼叫一次showImg函數
}
</script>
```
****
**個人簡介"目前"**
程式碼:
```HTML=
<html>
  <head>
    <title>我的個人網頁</title>
  </head>
  <body>
      <h2 style="color:#6666cc">目前：</h2>
      <h3 style="color:#6666cc">Email：<a href="mailto:coco20131028@gmail.com">coco20131028@gmail.com</a><br> 
      個人網頁連結：<a href="https://www.facebook.com/profile.php?id=100007757642607&mibextid=ZbWKwL" target="_blank">Fackbook</a><br>
      連絡電話:0965275062<br>
      研究興趣：
      <ul>
        <li>數位學習</li>
        <li>程式語言</li>
        <li>網頁設計</li>
        <li>Photoshop應用</li>
        <li>Illustrater應用</li>
      </ul>
      喜歡的食物：甜點 <br>
      休閒樂趣：追劇<br>
      喜歡的歌手：婁峻碩 <br></h3> 
  </body>
</html>
```
****
**喜歡的歌**
程式碼:
```HTML=
<html>
  <body><p><br><br>
      <h3 style="color:#6666cc">喜歡的歌：<br>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/YGl-s-FzsFI?si=bNOs5XgNZB2XcLsW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      </p></h3>

       
  </body>
</html>
```
****
**2024目標是意圖**
程式碼:
```HTML=
<body onLoad="show()">
  <div id="ncyu">
    <img id="ico">
  </div>
 </body>
<style>
#ncyu{
  position: fixed;
  border: solid 1px gold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#ico{
  width:300px;
}
}

</style>
<script>
let i=0, imgArr=new Array();
imgArr[0] = "https://images.pexels.com/photos/4913535/pexels-photo-4913535.jpeg";
imgArr[1] = "https://g.udn.com.tw/upfiles/B_FE/fee8f6f7/PSN_PHOTO/443/f_18818443_1.jpg";
imgArr[2] = "https://www.clipstudio.net/wp-content/uploads/2020/02/0028_007-1.jpg";

function showImg() {
  document.getElementById("ico").src = imgArr[i]; //指定 img 的 src
  i = (i+1) % 3; //把i加1之後，除以3(因為有三張圖輪播)，將餘數再放到變數i裡
}

function show() {
  setInterval(showImg, 2000);//每隔2秒呼叫一次showImg函數
}
 </script>
```
****
**感謝聆聽圖X滑鼠事件**
程式碼:
```HTML=
<img id="logo" src="https://memeprod.sgp1.digitaloceanspaces.com/user-wtf/1585578316528.jpg" alt="ncyu">

<style>
  #logo {
    width: 400px; /* 設置圖片寬度為 400px */
    display: block; /* 讓圖片置中 */
    margin: 0 auto; /* 讓圖片水平置中 */
  }
</style>
<script>
    let ncyu = document.getElementById("logo");
    ncyu.addEventListener("mouseover", function(){
      this.src = "https://memeprod.sgp1.digitaloceanspaces.com/user-wtf/1590740537759.jpg";
    });
    ncyu.addEventListener("mouseout", function(){
      this.src = "https://memeprod.sgp1.digitaloceanspaces.com/user-wtf/1585578316528.jpg";
    });
</script>
```
****
**九九乘法表**
程式碼:
```HTML=
<h2>九九乘法表</h2>
<form method="post" action="" name="inp" id="inp">
  <input type="button" name="sub" value="計算99乘法表" onclick="comp()">
</form>
<div id="ans"></div>

<script>
  function comp() {
    var output = "<pre>"; // 使用<pre>標籤來保留文字的格式
    for (var i = 1; i <= 9; i++) {
      for (var j = 1; j <= 9; j++) {
        var result = i * j;
        var spaces = result < 10 ? "   " : (result < 100 ? "  " : " "); // 根據乘積數字的位數添加適當的空格
        output += i + " x " + j + " = " + result + spaces;
        if (j !== 9) {
          output += " | "; // 在每個運算式後面加上垂直分隔符號
        }
      }
      output += "\n"; // 在每一行的結尾添加換行
    }
    output += "</pre>"; // 關閉<pre>標籤
    document.getElementById("ans").innerHTML = output;
  }
</script>
```
****



"首頁"的網頁原始碼連結:
[view-source:https://sites.google.com/view/peipeisayhi/%E9%A6%96%E9%A0%81](https://)

"抽獎平台"的網頁原始碼連結:
[view-source:https://sites.google.com/view/peipeisayhi/%E5%B7%A5%E5%85%B7/%E6%8A%BD%E7%8D%8E%E5%B9%B3%E5%8F%B0](https://)

"抽籤"的網頁原始碼連結:
[view-source:https://sites.google.com/view/peipeisayhi/%E5%B7%A5%E5%85%B7/%E8%A9%A6%E8%A9%A6%E9%81%8B%E6%B0%A3](https://)

"九九乘法表"的網頁原始碼連結:
[view-source:https://sites.google.com/view/peipeisayhi/%E5%B7%A5%E5%85%B7/%E4%B9%9D%E4%B9%9D%E4%B9%98%E6%B3%95%E8%A1%A8](https://)

"留言板"的網頁原始碼連結:
[view-source:https://sites.google.com/view/peipeisayhi/%E7%95%99%E8%A8%80%E4%B8%AD%E5%BF%83](https://)

"作者詳細介紹"的網頁原始碼連結:
[view-source:https://sites.google.com/view/peipeisayhi/%E4%BD%9C%E8%80%85%E8%A9%B3%E7%B4%B0%E4%BB%8B%E7%B4%B9](https://)

