## **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://)
Sign in with Wallet
Connect another wallet