js學習1

GJ504b發表於2024-10-03
JS

js實現簡單互動

js的外聯引入

必須在body裡&&你需要互動的元素下方
e.g.

<body>
    <div id="box">演示1</div>
    <script src="./演示1.js"></script>
</body>

實現點選互動 樣例1

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示1</title>
</head>
<link rel="stylesheet" href="./演示1.css">

<body>
    <div id="box">演示1</div>
    <script src="./演示1.js"></script>
</body>
</html>

.change{
    width: 200px;
    height: 200px;
    background-color: rgb(95, 195, 72);
    color: #fff;
    text-align: center;
    transition: all 1s;
}

box.onclick = function (){
    this.innerText = '新的內容'
    this.className = 'change'
}

簡而言之就是我寫一個css，用js實現點選之後出現css

實現點選互動 樣例2

img
img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./演示1.css">
</head>
<body>
    <div class="container">
        <div class="item" id="q1">1</div>
        <div class="item" id="q2">2</div>
        <div class="item" id="q3">3</div>
        <div class="item" id="q4">4</div>
        <div class="item" id="q5">5</div>
        <div class="item" id="q6">6</div>
        <div class="item" id="q7">7</div>
        <div class="item" id="q8">8</div>
        <div class="item" id="q9">9</div>
    </div>
    <script src="./演示1.js"></script>
</body>
</html>


.container {
    display: flex;
    height: 900px;  
    width: 900px;
    /* align-items:flex-start;  */
    /* 垂直居中 */
    /* justify-content: center; */
    background-color: rgba(115, 106, 106, 0.743);
    flex-direction: row;
    margin: auto;
    flex-wrap: wrap;
}
.item {
    background-color: cornflowerblue;
    width: 170px;
    height: 170px;
    border: 2px solid;
    margin:5% 6%; 
}
.change{
    /* position:relative; */
    display: flex;
    width: 170px;
    height: 170px;
    border: 2px solid;
    margin:5% 6%; 
    background-color: rgb(255, 253, 251);
    color: #161515dd;
    /* text-align: center; */
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
    font-size: 20px;
}

q1.onclick = function (){
    this.innerText = '希'
    // 標籤中的內容
    this.className = 'change'
    // 類名切換
}
q3.onclick = function (){
    this.innerText = '你'
    // 標籤中的內容
    this.className = 'change'
    // 類名切換
}
q4.onclick = function (){
    this.innerText = '十'
    // 標籤中的內容
    this.className = 'change'
    // 類名切換
}
q5.onclick = function (){
    this.innerText = '月'
    // 標籤中的內容
    this.className = 'change'
    // 類名切換
}
q2.onclick = function (){
    this.innerText = '望'
    // 標籤中的內容
    this.className = 'change'
    // 類名切換
}
q6.onclick = function (){
    this.innerText = '萬'
    // 標籤中的內容
    this.className = 'change'
    // 類名切換
}
q7.onclick = function (){
    this.innerText = '事'
    // 標籤中的內容
    this.className = 'change'
    // 類名切換
}                   
q8.onclick = function (){
    this.innerText = '勝'
    // 標籤中的內容
    this.className = 'change'
    // 類名切換
}
q9.onclick = function (){
    this.innerText = '意'
    // 標籤中的內容
    this.className = 'change'
    // 類名切換
}

一些問題

Q1. 設定點選前後的padding資料一樣為什麼點選後出現位移？
A1. 因為前後的content不一樣，而padding並沒有把盒子固定死，實際開發中還是設定width和height好，可以把盒子大小固定死，padding只適用於微調
Q2. 點選後的文字怎麼都不豎直水平居中咋回事？
A2.css的flex記混了

    align-items: center;
    /* 豎直居中 */
    justify-content: center;
    /* 水平居中 */
<!-- 兩者一起是的文字出現在正中間 -->

Q3侷限性：這種做法只能將html相應盒子都寫個id，而id具有唯一性，會使得同樣的動作重複書寫多次，程式碼冗雜，且必須使用類名轉換
A3：還是要學習點js語法

點選事件的語法

有機會再學

js實現輪播效果

img

html 部分

實現N個圖片輪播
1.有一個大盒子，大盒子裡面放N個小盒子，且設定各自的類名
2.設定按鈕，包裝在button裡

❮ 左箭頭
❯ 右箭頭

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>輪播圖</title>
    <link rel="stylesheet" href="./演示1.css">
</head>
<body>
    <div class="slider">
        <div class="slide slider1"></div>
        <div class="slide slider2"></div>
        <div class="slide slider3"></div>
        <!-- 新增左右箭頭 -->
        <button class="prev">&#10094;</button>
        <!-- &#10094;：這是一個HTML實體，代表一個左箭頭（←）。 -->
        <button class="next">&#10095;</button>
        <!-- &#10095;：這也是一個HTML實體，代表一個右箭頭（→）。 -->
      </div>
      <script src="./演示1.js"></script>
</body>
</html>

css部分

.slider {
position: relative;
 /* 非static，便於子級元素絕對定位 */
width: 300px;
height: 300px;
overflow: hidden;
/* 還是有必要的，雖然註釋了問題也不大 */
/* 剪裁內容：當元素設定了overflow: hidden;屬性後，如果內容超出了元素的尺寸，超出部分將不會顯示。這意味著，無論內容多大，它都不會溢位元素的邊界，而是被隱藏。 */
/* 防止捲軸出現：通常，當內容超出元素的尺寸時，瀏覽器會自動新增捲軸以便使用者滾動檢視隱藏的內容。但是，如果應用了overflow: hidden;，即使內容溢位，也不會出現捲軸。 */
}
.slide {
position: absolute;
width: 100%;  
height: 100%;
/* 這個是相較父級元素而言的 */
background-size: cover;
background-position: center;
/* 展示的圖片是正中央 */
}
/* 小結：製作輪播圖/想要圖片出現在一個固定大小的地方，我們選擇設定一個父元素，框住圖片&&非static的position，再給子級元素一個絕對定位，設定長高佔比100% ,也方便按鈕定位哈哈哈*/

.slider1{
    background-image: url('../登入頁面/登入一/background-login1.jpg');
}
.slider2{
    background-image: url('../登入頁面/登入一/background-login2.jpg');
}
.slider3{
    background-image: url('../華為2/華為2.0.img/menu2.jpg.webp');
}
/* 這三個class【id也可】來引入不同的圖片，防止鋪蓋 */

.prev, .next {
position: absolute;
top: 50%;
/* 我滴天，top原來不等於margin-top呀 */

/* 設定絕對定位之後，%n都是相對於父級元素 */
transform: translateY(-50%);
background-color: #fff;
border: none;
/* 移除按鈕的邊框 */
cursor: pointer;
}
.prev { left: 10px; }
/* 調節按鈕左右位置 */
/* 將上一個按鈕的左側邊緣放置在父元素左側10畫素的位置 */
.next { right: 10px; }
/* 將下一個按鈕的右側邊緣放置在父元素右側10畫素的位置 */

js部分

let currentIndex = 0;   
// 變數初始化，一般用let const
const slides = document.querySelectorAll('.slide');
// 獲取所有帶'class'.slide的選擇器
const totalSlides = slides.length;
// 獲取幻燈片總數
function showSlide(index) {
  // 定一個函式來顯示指定索引的幻燈片
  slides.forEach((slide) => {
// 遍歷所有幻燈片
    slide.style.display = 'none'; // 隱藏所有幻燈片
  });
  slides[index].style.display = 'block'; // 顯示當前幻燈片
} 

function nextSlide() {
  // 定義一個函式來切換到下一張幻燈片
  currentIndex = (currentIndex + 1) % totalSlides; // 計算下一張幻燈片的索引，使用取模運算子迴圈回到第一張
  showSlide(currentIndex);
  // 顯示下一張幻燈片
}

function prevSlide() {
  // 定義函式切換到上一張幻燈片的索引，使用取模運算子迴圈到最後一張
  currentIndex = (currentIndex - 1 + totalSlides) % totalSlides; // 計算上一張幻燈片的索引
  計算上一張幻燈片
  showSlide(currentIndex);
  // 顯示上一張幻燈片
}

// 初始化顯示第一張幻燈片
showSlide(currentIndex);
// 呼叫showSlide函式顯示當前索引的幻燈片，即第一張

// 為左右箭頭新增事件監聽
document.querySelector('.next').addEventListener('click', nextSlide);
// 當點選.next按鈕時，呼叫nextSlide函式
document.querySelector('.prev').addEventListener('click', prevSlide);
// 當點選.prev按鈕時，呼叫prevSlide函式
// 設定自動輪播
setInterval(nextSlide, 3000); // 每3秒切換到下一張幻燈片
// 使用setInterval函式每3000毫秒（3秒），呼叫一次nextSlide函式，實現自動輪播

AI分析js

let currentIndex = 0;

這行程式碼宣告瞭一個名為 currentIndex 的變數，並將其初始化為 0。這個變數用來跟蹤當前顯示的幻燈片的索引。

const slides = document.querySelectorAll('.slide');

這行程式碼宣告瞭一個常量 slides，它包含了頁面上所有帶有 .slide 類的元素。**document.querySelectorAll **是一個方法，用於選擇文件中所有匹配指定選擇器的元素。

const totalSlides = slides.length;

這行程式碼宣告瞭一個常量 totalSlides，並將其設定為 slides 陣列（或節點列表）的長度，即幻燈片的總數。

function showSlide(index) { ... }
這是一個名為 showSlide 的函式，它接受一個引數 index。這個函式的作用是顯示索引為 index 的幻燈片，並隱藏其他所有幻燈片。

slides.forEach((slide) => { ... });

這行程式碼使用了forEach 方法來遍歷slides 陣列中的每個元素。對於每個元素（在這裡叫做 slide），它

slide.style.display = 'none'; 和 slides[index].style.display = 'block';

這些程式碼行用來設定幻燈片的 display CSS屬性。第一行隱藏所有幻燈片（設定為 ‘none’），第二行顯示當前索引的幻燈片（設定為 ‘block’）。

function nextSlide() { ... } 和 function prevSlide() { ... }

這兩個函式分別用來切換到下一張和上一張幻燈片。它們透過修改 currentIndex 的值來實現這一點。

currentIndex = (currentIndex + 1) % totalSlides; 和 currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;

這些程式碼行用來更新 currentIndex 的值。使用

document.querySelector('.next').addEventListener('click', nextSlide); 和 document.querySelector('.prev').addEventListener('click', prevSlide);

這兩行程式碼為 .next 和 .prev 類的按鈕新增了點選事件監聽器。當這些按鈕被點選時，會分別呼叫 nextSlide 和 prevSlide 函式。

setInterval(nextSlide, 3000);

這行程式碼設定了一個定時器，每3000毫秒（即3秒）呼叫一次 nextSlide 函式，從而實現自動輪播效果。

紙上得來終覺淺，絕知此事要躬行

專案實踐

我把選擇器名字改了自己實現深入理解一下
ok啦
img

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>輪播圖</title>
    <link rel="stylesheet" href="./演示1.css">
</head>
<body>
    <div class="rollFather">
        <div class="rollSon rollSon1"></div>
        <div class="rollSon rollSon2"></div>
        <div class="rollSon rollSon3"></div>
        <div class="rollSon rollSon4"></div>
        <div class="rollSon rollSon5"></div>
        <div class="rollSon rollSon6"></div>
        <div class="rollSon rollSon7"></div>
        <div class="rollSon rollSon8"></div>
        <!-- 新增左右箭頭 -->
        <button class="arrowLeft">&#10094;</button>
        <!-- &#10094;：這是一個HTML實體，代表一個左箭頭（←）。 -->
        <button class="arrowRight">&#10095;</button>
        <!-- &#10095;：這也是一個HTML實體，代表一個右箭頭（→）。 -->
      </div>
      <script src="./演示1.js"></script>
</body>      
</html>

*{
    padding: 0;
    margin: 0;
}
.rollFather{
    height: 500px;
    width: 100%;
    position: relative;
    overflow: hidden;
    top: 190px;
}
.rollSon{
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.rollSon1{
    background-image: url(../華為2/華為2.0.img/menu1.jpg);
}
.rollSon2{
    background-image: url(../華為2/華為2.0.img/menu2.jpg.webp);
}
.rollSon3{
    background-image: url(../華為2/華為2.0.img/menu3.jpg);
}
.rollSon4{
    background-image: url(../華為2/華為2.0.img/menu4.jpg);
}
.rollSon5{
    background-image: url(../華為2/華為2.0.img/menu5.jpg);
}
.rollSon6{
    background-image: url(../華為2/華為2.0.img/menu6.jpg);
}
.rollSon7{
    background-image: url(../華為2/華為2.0.img/menu7.jpg);
}
.rollSon8{
    background-image: url(../華為2/華為2.0.img/menu8.jpg);
}

.arrowLeft, .arrowRight{
    position: absolute;
    top: 50%;
    background-color: #fff;
    border: none;
    cursor: pointer;
    width: 50px;
    height: 50px;
}
.arrowLeft{
    left: 10px;
}
.arrowRight{
    right: 10px;
}

let a = 0;
// a是一個變數，表示當前的rollSon元素，變數初始化
const b = document.querySelectorAll('.rollSon');
// b是一個常量,收集所有rollerSon選擇器的元素
const c = b.length;
// c是一個常量,就是指幻燈片的總數量
function showSlide(index) {
  // 定一個函式來顯示指定索引的幻燈片
b.forEach((rollSon) => {
// 遍歷所有幻燈片
rollSon.style.display = 'none'; // 隱藏所有幻燈片
});
  b[index].style.display = 'block'; // 顯示當前幻燈片
} 

function arrowLeft() {
// 定義函式切換到上一張幻燈片的索引，使用取模運算子迴圈到最後一張
if (a>0){
    a--;
}else{
    a=c-1;
}
showSlide(a);
// 顯示上一張幻燈片
}

function arrowRight() {
// 定義一個函式來切換到下一張幻燈片
if (a<c-1){
    a++;
} else{
    a=0;
}
showSlide(a);
// 顯示下一張幻燈片
}

/// 初始化顯示第一張幻燈片
showSlide(a);
// 呼叫showSlide函式顯示當前索引的幻燈片，即第一張

/// 為左右箭頭新增事件監聽
document.querySelector('.arrowRight').addEventListener('click',arrowRight);
// 當點選按鈕時啟用函式
document.querySelector('.arrowLeft').addEventListener('click', arrowLeft);
// 當點選按鈕時啟用函式

/// 設定自動輪播
setInterval(arrowRight, 3000); 
// 使用setInterval函式每3000毫秒（3秒），呼叫一次arrowRight函式，實現自動輪播

js一些基礎知識

  1. 變數宣告
    變數用於儲存資料，可以用 let、const 或 var 宣告。
let name = "Alice";
const age = 25;

一般推薦使用 let 和const，因為它們提供更好的作用域控制。
var：可以在整個函式里使用，能被重新賦值，但在宣告前使用會變成 undefined。

let：變數的值改變需要重複賦值，用let
var一般不用
const：當一個變數的值不會改變，用const
2. 資料型別
常見資料型別

  • 字串（String）
  • 數字（int&&float）
  • 布林值(boolean):true&&false
  • 陣列(array)
[1, 2, 3]
  • 物件（object）：一組鍵值對000
{name : "Alice", age ；25}
  1. 函式
    函式是一組可重用的程式碼塊，可以執行特定任務。
function greet() {
    console.log("Hello!");
}
greet(); // 呼叫函式
  1. 事件
    JS 可以響應使用者的操作，例如點選按鈕。
document.getElementById("myButton").onclick = function() {
    alert("Button clicked!");
};
  1. 控制結構
    使用條件語句和迴圈來控制程式碼的執行流程。
if (age > 18) {
    console.log("Adult");
} else {
    console.log("Minor");
}

for (let i = 0; i < 5; i++) {
    console.log(i);
}
  1. DOM操作000
    JS 可以與網頁的結構（DOM）互動，例如更改文字或樣式。
document.getElementById("myElement").innerText = "New text";

相關文章