js學習1

GJ504b發表於2024-10-03

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

<!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實現輪播效果

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啦

<!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一些基礎知識

變數宣告
變數用於儲存資料，可以用 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}

函式
函式是一組可重用的程式碼塊，可以執行特定任務。

function greet() {
    console.log("Hello!");
}
greet(); // 呼叫函式

事件
JS 可以響應使用者的操作，例如點選按鈕。

document.getElementById("myButton").onclick = function() {
    alert("Button clicked!");
};

控制結構
使用條件語句和迴圈來控制程式碼的執行流程。

if (age > 18) {
    console.log("Adult");
} else {
    console.log("Minor");
}

for (let i = 0; i < 5; i++) {
    console.log(i);
}

DOM操作000
JS 可以與網頁的結構（DOM）互動，例如更改文字或樣式。

document.getElementById("myElement").innerText = "New text";

Node.js學習筆記1
2019-02-16
Node.js筆記
<node.js學習筆記(1)>
2018-11-12
Node.js筆記
JavaScript學習筆記1: JS引入方法
2024-03-18
JavaScript筆記JS
安心學習，重學前端之（js基礎篇（1））
2019-04-07
前端JS
Three.js學習1_快速入門
2020-08-30
JS
深入學習js之——原型和原型鏈#1
2019-01-29
JS原型
學習JS
2024-11-04
JS
js學習
2024-08-07
JS
前端學習輯錄（1）：js繼承總結
2020-11-09
前端JS繼承
VUE JS 學習
2018-07-15
VueJS
js fabric 學習
2018-06-14
JS
JS animate() 學習
2024-10-07
JS
教程：JS學習
2020-12-20
JS
Day1-學習筆記-js之正規表示式
2020-11-08
筆記JS
學習1
2024-05-22
js 部分學習整理
2019-02-16
JS
Vue.js學習
2018-10-01
Vue.js
JS 正則學習
2018-07-13
JS
簡單學習js
2019-06-14
JS
js學習筆記
2019-05-09
JS筆記
codeigniter學習1
2019-02-16
Jquery學習1
2024-03-10
jQuery
AJAX學習1
2024-03-10
Vuex學習（1）
2019-06-12
Vue
python學習1
2019-05-13
Python
NLP學習1
2024-09-16
Java學習（1）
2024-07-21
Java
odoo學習-1
2024-07-01
Odoo
flask學習1
2022-02-03
Flask
Kettle學習1
2020-11-25
JS原生示例案例學習
2018-06-02
JS
學習JS原理之BFC
2019-12-18
JS
【Three.js】Three.js學習記錄
2019-02-16
JS
前端如何學習機器學習之TensorFlow.js
2019-03-03
前端機器學習JS
Vue.js原始碼學習三 —— 事件 Event 學習
2018-03-07
Vue.js原始碼事件
初學Node.js--學習隨筆
2019-03-27
Node.js
機器學習-1
2018-04-10
機器學習
NopCommerce學習(1) Caching
2018-07-19