排版快捷鍵: alt+f+control
* 各種工具:
* spline 線上3D建模
*
沒雙引號就沒括號
基本git更新資料
```c=!
cd desktop
cd 資料夾名稱
git status
gut add .
git status
git config --global user.email "jiarong701@gmail.com"
git config --global uaer.name "jiarongm"
git commit -m "註解"
git push
```
第十五周
--
#### 各種物件
第十三周 Canvas
--
#### 在畫布上顯示圖片
```js=
<canvas id="cc" width="320" height="300"></canvas>
<script>
var cc = document.getElementById("cc");
var ctx = cc.getContext("2d");
var img = new Image();
img.src = "images/2.jpg";
img.onload = function(){ //在畫布上畫圖
//ctx.drawImage(img, 10, 10, 160, 150); //顯示圖片
ctx.drawImage(img, 200, 100, 80, 75 ,10, 10, 160, 150); //裁切圖片
}
</script>
```
#### 截取影片
```js=
<style>
#cc{
width: 320px;
height: 180px;
border: medium solid blue;
position: absolute;
top: 400px;
left: 50px;
}
</style>
<video id="vv" src="movie/mov1.mp4" width="640" height="360" controls></video> <br>
<button onclick="snap()">CLIP</button>
<canvas id="cc" width="320" height="180"></canvas>
<script>
var vv = document.getElementById("vv");
var cc = document.getElementById("cc");
var ctx = cc.getContext("2d");
function snap(){
ctx.drawImage(vv, 0, 0, 320, 180);
}
</script>
```
#### 同步出現灰階影片
```js=
<style>
#cc{
width: 320px;
height: 180px;
border: medium solid blue;
position: absolute;
top: 400px;
left: 50px;
}
</style>
<video id="vv" src="movie/mov1.mp4" width="640" height="360" controls></video> <br>
<canvas id="cc" width="320" height="180"></canvas>
<script>
var vv = document.getElementById("vv");
var cc = document.getElementById("cc");
var ctx = cc.getContext("2d");
vv.addEventListener("play", setTimer);
vv.addEventListener("pause", clearTimer);
vv.addEventListener("ended", clearTimer);
var timer;
function setTimer(){
timer = setInterval(snap,30);
}
function clearTimer(){
clearInterval(timer);
}
function snap(){
ctx.drawImage(vv, 0, 0, 320, 180);
var p = ctx.getImageData(0,0,320,180); //得到影像的資料(r,g,b,a)，p為一維陣列
for(var i=0; i<p.data.length; i+=4){
var r = p.data[i];
var g = p.data[i+1];
var b = p.data[i+2];
var gray = (r+g+b)/3;
p.data[i] = gray;
p.data[i+1] = gray;
p.data[i+2] = gray;
}
ctx.putImageData(p,0,0); //繪製影像的資料到canvas上
}
</script>
```
#### 即時函數
( function() ) ()
- (前括號): 要執行的函式
- (後括號): 傳參數
網頁載入就會執行的函式，因為函示沒名稱，所以只會執行一次
```js=
<script>
(function(a){ //即時函式
console.log(a); //網頁載入就會執行的函式，因為函示沒名稱，所以只會執行一次
})("hi");
</script>
```
#### 建構函式
屬性age，方法print
```js=
function MyObject(){
this.age = 28;
this.print = function(){
console.log(this.age);
}
}
var c = new MyObject();
//c.age = 100;
c.print();
```
第十二周 Canvas
--
#### 在畫布上畫矩形
取得渲染環境及其繪圖函數 **``canvas.getContext("2d")``** 輸入參數'2d':渲染環境類型
```js=
<canvas id="cc" width="600" height="800"></canvas>
<script>
var cc=document.getElementById("cc");
var ctx=cc.getContext("2d");
ctx.fillStyle="rgb(200,0,0)";
ctx.fillRect(20,20,150,100);
ctx.fillStyle="rgb(0,200,0,0.5)";
ctx.fillRect(40,40,150,100);//座標
</script>
```
開始話、結束畫
```js=
ctx.beginPath();
ctx.moveTo(100,20);//在畫布上的起點
ctx.lineTo(180,180);//畫線到180,180
ctx.lineTo(20,180);
ctx.closePath();
ctx.fillStyle="blue";
ctx.fill();//填滿
```
#### 用滑鼠畫圖
1. 準備好滑鼠事件
```js=
var cc=document.getElementById("cc");
var ctx=cc.getContext("2d");
cc.addEventListener("mousedown",start);
cc.addEventListener("mouseup",end);
function start(){
console.log("start");
}
function end(){
console.log("end");
}
```
2. 跟著滑鼠畫線
用點連成線 ==`arc(x, y, radius, startAngle, endAngle)`==
```js=
var isdrawing = false;
cc.addEventListener("mousemove", draw);
function start() {
isdrawing = true;
}
function end() {
isdrawing = false;
}
function draw(e) {
if(isdrawing==false)return;
var x = e.pageX-50;//要扣掉畫布偏移的位置
var y = e.pageY-50;
ctx.beginPath();
ctx.arc(x, y, 10, 0, 2 * Math.PI);//畫圓
ctx.closePath();
ctx.fillstyle = "rgb(0,0,0)";
ctx.fill();
}
```
#### 使用另一種方法創造畫布
```js=
var cc=document.creatElement("canvas");//1.創
cc.width=600;//1.5 設屬性
cc.height=500;
document.body.appendChild(cc);//2. 加到網頁中
//3. 其他使用方法皆同
```
第十一周 Spline
--
第十周 卷軸
--
1. 使用卷軸向下滑時觸發 淡出淡入動畫
卷軸事件
```js=
winodw.onscroll()
```
卷軸的移動量``window.pageYoffset``
淡出淡入 用樣式控制屬性來做動畫 ==關鍵影格`@keyframes`==
```js=
@keyframes fadeOut { //名稱
from{opacity:1.0}//開始
tp{opacity: 0;}//結束
}
.title_fadeOut{
animation:fadeOut 2s 1;//執行的animation名稱 持續時間 執行次數(infinite無限次)
animation-fill-mode: forwards;//播放前後狀態 停在結束狀態，希望動畫結束停在最後一格時使用。
}
```
使用:要設一個開關器(status)
```js=
if(y>250){
if(status==0){
title.classList.remove("title_fadeIn");
title.classList.add("title_fadeOut");
status=1;
}
}else{
if(status==1){
title.classList.remove("title_fadeOut");
title.classList.add("title_fadeIn");
status=0;
}
}
```
畫到下面讓影片撥放 `v.play()` 往上滑暫停影片 `v.pause()`
#### Array in javascript
陣列 index 一樣從0開始
宣告`var array=[]` 用中括號，可以同時儲存不同資料類型
1. 新增/刪除 元素
* 在末端 新增`array.push("test")` 刪除`array.pop()`
* 在開頭 新增`array.shift()` 刪除`array.shift()`
2. 走訪
* 迴圈`for(var i=0;i<array.length;i++)`
* 對於每個//53s/6tj06gj456
*
```js=
array.forEach(function(a)
{console.log(a)
});
```
3. 使用實例
用類別來抓元素`var g=document.getElementsByClassName("a")`
如果class為a的有很多個，就會將抓下來的元素儲存為陣列g、從0開始依照元素出現次序擺放
4. 二維陣列 製作遊戲地圖
```js=
var map=[
[1,1,1,1,1,1],//map[0]
[1,2,2,2,2,1],//map[1]
[1,2,2,2,2,1]
];
```
5. 畫地圖
先設一個物件放圖
==用 **``innerHTML``** 渲染網頁==(重畫圖)
```js=
<div id='world'><div>
```
用陣列加圖片
```js=
var el=document.getElementById('world');
el.innerHTML="";
map.forEach(function(a){//可視為map[a][v]
a.forEach(function(v){
if(v==1)el.innerHTML+="<div class="wall"></div>";
if(v==2)el.innerHTML+="<div class="coin"></div>";
});
el.innerHTML+="<br>";
});
```
- 讀入陣列裡，所有數值的方法
```js=
var c = ["vox","luca","ike","mysta","shu"];
/*for(var i=0; i<c.length; i++){ //for迴圈
console.log(c[i]);
}*/
c.forEach(function(d){ //新寫法，一個一個讀入，但只能傳數字or字串，不能傳物件
console.log(d);
});
```
第九周 side project
--
構想:like動態島 滑鼠控制盤子去接球 球碰到會反彈
1. 去背的球、盤子 與樣式
>注: 去背的圖只能用.png不然還是會留白喔
2. 控制球與盤子的位置
* 固定在視窗中solid 用百分比
3. 滑鼠事件控制盤子移動
* 滑鼠點一下元素 ```onclick``` --->開始移動 or 暫停移動--->設定一個開關
* 盤子跟隨滑鼠移動--->找到盤子( **相對於視窗**) 的座標 **==```getBoundingClientRect()```==**
* 把滑鼠放在盤子中間---> 滑鼠的位置=滑鼠(相對於視窗)的位置 再減掉一半的 盤子大小
* 更改盤子的位置--->開關打開時 盤子位置=滑鼠位置
4. 按開始鍵後，球掉下來
* 球相對於視窗的座標 + 加速度dx、dy = 移動
* 要show出掉落的過程---> **需要一直重畫畫面** ，用迴圈會閃現(中間過程要短暫停留，肉眼才看得到) ---> 用計時器重複執行 "球掉落的函式"
* 觸底結束--->Y方向:球的位置By視窗高度 **```window.innerHeight```** ```ball.offsetHeight```元素高度(包含邊框跟padding)
* 左右碰到反彈--->dx*=-
* 讓球邊動邊 "轉"
5. 重來鍵
6. 教學說明+demo影片
//os:只有80分 青菜辣
第八周 Video Object
--
#### 影片
**避免載入影片的等待時間，先載影片才在背景裡，按按鈕後再重播。**
1. 藏影片
背景圖片放在最下面、先不show影片、播放鍵置頂
```javascript=!
#bg{
position:absolute;
z-index=-99;//底圖
}
#v{
position:absolute;
display:none;//先藏影片
}
#play{
position:absolute;
}
#play:hover{
border:medium solid blue;
}
```
2. 播放/播完換影片
```controls``` 下方有播放按鈕
```autoplay```自動撥放
```javascript=
<video id='v' controls autoplay width='1024' src=""></video>
```
影片開始撥放影格時會觸發 ==**```timeupdate```**==
播放時間 ==```v.currentTime```== (可以用它來製作播放進度條)
播放影片 **```video.play()```**
``video.ended``是布林變數，影片結束時會==True
```javascript=
<img id='bg' src='背景圖片' alt=''>
<video id='v' src="要放的影片"></video>
<button id='play' onclick="playVideo()">Play</button>
<script>
var v=document.getElementById("v");
v.addEventListener("timeupdate",checkEnd);//注意不用()
//開始播放時呼叫checkEnd，確認是不是播完了
function playVideo(){
v.style.display="block";
v.currentTime=0;//顯示播放的時間
v.play();
}
function checkEnd(){
if(v.ended)location.herf="new/video_path";
}
</script>
```
#### 複習淡出淡入
待打
第六周 鍵盤事件/
--
#### 樣式表
避免重複載入造成的呆滯時間--->加上開關
document.addEventListener("ketdown", move);
圖片隱藏/顯示
樣式設定display: none;
程式控制moodbox.style.display = "block";
免命名函式
```javascript=
p.onclick = function () {
count++;
if (count <= 3) p.src = "images/plant/plant_" + count + ".gif";
if (count == 3) status = 1;
}
```
改善剛按鍵盤的卡頓--->用計時器每0.03秒執行乙次
```javascript=!
setInterval(moving,30);
function moving(){
var y=parseInt(char.style.top);
var x=parseInt(char.style.left);
x=x+dx;
y=y+dy;
}
```
第五周 物件/Event物件
--
#### 物件的N種寫法
* **``{}``** 代表一個 ==物件== 或是程式區塊
* 在大括號裡面直接設定物件的屬性 用冒號
* **用逗號分行**
* 物件裡面的方法 **```fun_name:function(){}```**
* ==``this``== 呼叫自己
**方法一:**
```js=
<script>
a = {//物件
name:"Wang",//屬性:
age:"18",
score:{
englisg:90,
math:70,
},
print:function(){//物件裡面的方法
alert(this.score.math);//this呼叫自己
}
}
a.print();//呼叫並使用他
</script>
```
結果
**方法二:**
* 用 ==new== 建出物件
* 用分號分隔
* 物件.屬性= 直接給值
* 物件.函式名=function(){}
```js=
<script>
b=new Object();
b.name="Zoe";
b.age=20;
b.score={
englisg:90,
math:78,
}
b.print=function(){
alert(this.score.math);
}
b.print();
</script>
```
#### Event物件事件
```javascript=
<body>
<img id="p1" src="images/1.jpg" alt="" width="450" onclick="show(event)">
<img id="p2" src="images/2.jpg" alt="" width="450" onclick="show(event)">
<img id="p3" src="images/3.jpg" alt="" width="450" onclick="show(event)">
<script>
function show(a){
alert(a.target.src);
}
</script>
</body>
```
#### 課堂作業
水果籃，設定水果單價、點案後圖片消失 金額加總
```javascript=
<body>
<img id="p1" src="images/西瓜.jpg" alt="30" width="100" onclick="show(event)">
<img id="p2" src="images/香蕉.jpg" alt="5" width="100" onclick="show(event)">
<img id="p3" src="images/橘子.jpg" alt="10" width="100" onclick="show(event)">
<img id="p4" src="images/荔枝.jpg" alt="25" width="100" onclick="show(event)">
<img id="p5" src="images/芭樂.jpg" alt="10" width="100" onclick="show(event)">
<img id="p6" src="images/蘋果.jpg" alt="15" width="100" onclick="show(event)">
<div id="sum">0</div><div>元</div>
<script>
var sum=0;
var total=document.getElementById("sum");
function show(a){
alert("單價:"+a.target.alt+"$");
sum+=parseInt(a.target.alt);
a.target.style.display="none";
alert("總金額 = "+sum);
total.innerHTML=sum;
}
</script>
```
第四周 CSS樣式
--
#### CSS樣式
* ``padding:70px`` 元素內邊框的留白
* ``padding-right``/``padding-bottom`` 可以指定方向
* 所有填充的屬性 單位:px/pt/%，可用繼承(指定從老爸填充)
* ==用比例的方式可以在縮放時跟著動==
* **``z-index:1``** 不會被遮蓋(值>0就好)
* id裡面的類別樣式(老爸裡面的兒子的孫子..)：
* ```js=!
<div id='main'>
<div class="page">
<img class="p1" src="1.png" alt="">
</div>
</div>
```
```j=!
#main{
//位置寬度
}
#main.page{//相對於main
width:100%; //填滿
}
#main.page.p1{
}
```
* 不要有卷軸:
* 刪掉預設的留白
```js=!
<style>
body{
margin-top:10;
overflow:hidden;
}
</style>
```
第三周 背景/類別/樣式/繼承
--
#### 背景圖/類別/樣式
樣式存放在
```j=!
<head>
<style>
//放在這裡
</style>
</head>
```
* 幫id 加樣式 **``#id_name{}``**
* 幫類別class 加樣式 **``.class_name{}``**
```p=!
<style>
.scene{ ///for class
background-image: url(images/image3.jpg);//圖片
background-repeat: no-repeat;
width: 600px;
height: 440px;
border: medium solid #ff3;
position: relative;
}
#balloon{ ///for id
background-image: url(images/balloon.png);
background-repeat: no-repeat;
width: 90px;
height: 90px;
position: absolute;
bottom: 50px;
right: 50px;
}
</style>
```
#### position樣式設定
1. solid預設:固定
2. relative:相對於預設值
3. absolitive:固定於老爸
4. fixed:固定於視窗(就算滾動頁面 還是在同一位置
#### 繼承關係
讓氣球在背景圖的範圍內飄動
**step1 設定階層、樣式**
1. 背景圖當老爸 氣球當兒子
```j=
<div class="scene">
<div id="balloon"></div>
</div>
```
2. 設定position樣式 讓氣球位置可移動
``position: absolute;``
**step2 控制style中的屬性(控制氣球座標)**
1. 設變數
```j=
var b=document.getElementById("balloon");
b.style.top="460px";//要先給值 像是在宣告
```
2. 轉換型態 **``parseInt()``**
```j=
function move(){
var y=parseInt(b.style.top);
y=y-3;//y變小，氣球往上飄
b.style.top=y+"px";//要把單位寫上
console.log("y="+y);//除錯
}
```
3. 加上Y方向 左右飄動
四捨五入 變整數 **``Math.round()``**
```j=
var x=parseInt(b.style.left);
x=x+Math.round(Math.random()*10-5);//四捨五入
b.style.left=x+"px";//要把單位寫上
```
4. **超過底圖的範圍就看不到** ：在底圖的樣式中 新增覆蓋``overflow:hidden``
或是``id.style.visibility="hidden"``
#### 把程式、樣式分開
樣式放在.html，程式碼放在.js
- html的物件可以使用js的程式控制
``<script src="程式名稱.js"></script>``
第二周 計時器
--
#### 倒數計時器
1. 在 固定的一段時間 結束後重複執行某事
**依電腦效能 不同電腦時間不一致**
```p=!
setInterval(時間到要執行的程式,1000)//時間1000(毫秒)=10秒
```
2. 覆蓋原本的內容
```p=!
id.innerHTML=變數;
```
```!=
//顯示倒數計時器
var n =10;
var count = document.getElementById("count");
setInterval(showNum,1000); //計時器
function showNum(){
n--;
count.innerHTML = n; //顯示數字
if(n==0)location.href="home.html"; //煥頁
}
```
3. 每1秒，圖片切換一次
```!=
<body>
<img id="p" src="images/img1.jpg" alt="">
<div id="count">10</div>
<script>
var n =1; //每1秒，圖片切換一次
var p = document.getElementById("p");
setInterval(showNum,1000); //計時器
function showNum(){
if(n==1){
p.src = "images/img2.jpg";
n=2;
}
else if(n==2){
p.src = "images/img1.jpg";
n=1;
}
}
</script>
</body>
```
#### 隨機切換多張圖片
1. 陣列放圖片
```!=
//index也是從0開始
name=["p1.jpg","p2.jpg","p3.jpg","p4.jpg"];
```
2. ==**隨機**== `Math.random()`得到0-1之間的數
```!=
//得到一個介於0~3之間的數得到一個介於0~3之間的數
function change(){
n=Math.random()*4;//隨機得到n 因圖有4張所以*4 (index在0~4之間不會是4，不會溢位)
console.log(n);//show出n 看看
}
```
#### 計時器開關
* **重複觸發**
```!=
//開
setInterval(時間到要執行的程式,time);
///關
clearInterval()//跟一般函式一樣 接收回傳值執行
```
* **只觸發一次**
在一段時間time後，執行一次函式
```!=
let timeID = setTimeout(founction_name,time);
//呼叫時 會回傳一個值 放到timeID裡
//let是區域變數 多用在for條件裡
//關
clearTimeout(timeoutID);
```
* **匿名函式** (不用命名 直接綁定在事件上)
```!=
id.onclick=function (){
clearInterval()
}
```
#### 作業二 點按圖片漸消失
**方法一**
1. 放圖、點擊事件onclick、給id用id控制換圖
2. 每0.1秒換圖--->每幾秒重複呼叫換圖，直到沒圖
```j=!
<body>
<img id="photo" onclick="GoRun()" src="disappear/chars_0.png" alt="">
<script>
var i = 0;
var p1 = document.getElementById("photo");
function GoRun() {
p1.src = "disappear/chars_" + i + ".png"
if (i < 29) {
i++;
setTimeout(GoRun, 100);//遞迴 每0.1秒呼叫自己換圖
}
}
</script>
</body>
```
第一周 圖片/滑鼠/物件監聽
--
* 使用工具vs code
* 裝外掛可以在瀏覽器中呈現
* 開啟專案的資料夾
* 創造一個html檔案
* 操作快捷鍵: **!** + **enter** 網頁架構、**Tab**系統推薦程式
#### 滑鼠事件換圖片
1. 圖片放在專案的資料夾內
2. 放圖片 + 滑鼠事件
```!=
<img src="圖1" alt="" onmouseover=" src='圖2' " onmouseleave=" src='圖1' "
onclick="showMesg()"">
```
3. 自定義函式
```!=
<script>
//自定義函式放在此標頭下
function showMesg(){
alert("Hi"); //除錯的方式1:會跳出視窗 要點掉
console.log("OK");//在console裡秀出
}
<script>
```
4. 除錯的方式(在網頁按F12)
5. 按鈕事件
````!=
<button onclick="showMesg('可以放字串喔')">按鈕名稱</button><br>
//換行
<button onclick="showMesg('可以放字串喔')">按鈕名稱</button>
````
##### Demo
```!=
<body>
<img src="images/img1.jpg" alt="" onmouseover=" src='images/img2.jpg'"
onmouseleave="src='images/img1.jpg'" onclick="showMesg()"><br>
<button onclick="showMesg('b1 is used')">b1</button><br>
<button onclick="showMesg('b2 is used')">b2</button>
<script>
function showMesg(s){
alert(s);
console.log("Ok");
}
</script>
</body>
```
#### 回到上頁 X 多頁的網頁
1. 新增另一頁
2. 前往指定的頁 javascript語法
```!=
location.href='路徑'
```
3. 包在自訂義涵式裡 再 放到按鈕事件
```!=
<button onclick="gotoPage()">Home</button>
<script>
function gotoPage(){
location.href='w1_01.html';
}
</script>
```
#### 事件監聽器
1. 設定變數
```!=
var b3=document.getElementById("b3");
```
2. 利用id做偵聽 ==**``document.getElementById("id")``**==
```!=
<button id="b3">b3</button>
<script>
var b3=document.getElementById('b3'); //設定變數b3 為 id是b3的物件
b3=document.addEventListener("click",gotoPage);
//監聽id為 'b3' 的這個物件，當此物件發生"click'事件時，執行gotoPage函式
</script>
```
#### 開啟&關閉新視窗 window物件
1. 設定==全域==變數
```!=
<script>
var newwin;
//需要是全域變數,否則變數會只存在 在某段程式中
</script>
```
2. 按鈕
```!=
<button onclick="opNewPage()">open new page</button>
<button onclick="clNewPage()">close new page</button>
```
3. 開啟額外視窗 **``window.open("url","name","width=,height= ")``**
```!=
<script>
var newwin;//全域變數
function opNewPage(){
newwin = window.open("http://tw.yahoo.com","yahoo","width=450,height=400");
//newwin = window.open("URL","名稱","視窗大小")
//newwin是一個視窗物件
newwin.moveTo(300,300);
//將視窗移到300*300的位置
}
function clNewPage(){
newwin.close(); //視窗關閉
}
</script>
```
#### 作業一
>滑鼠點按小圖片後，將大圖片置換成對應的小圖片
>
>
**方法一**
1. 放圖片 設定長寬與排版
2. 滑鼠點擊事件```onclick=""```
3. 自己定義換圖片的函式
4. 用id設定物件變數，更改物件屬性 以置換圖片
```!=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>HW1 09161141江佳蓉：滑鼠點按小圖片後，將大圖片置換成對應的小圖片。</table><br>
<img id='p1'src="images/img1.jpg" alt="" width="733" height="460"><br>
<img onclick="changePho('1')" src="images/img1.jpg" alt="" width="180" height="150">
<img onclick="changePho('2')" src="images/img2.jpg" alt="" width="180" height="150">
<img onclick="changePho('3')" src="images/img3.jpg" alt="" width="180" height="150">
<img onclick="changePho('4')" src="images/img4.jpg" alt="" width="180" height="150">
<script>
var p1;
var p1=document.getElementById('p1');
function changePho(s){
if(s=='1')p1.src='images/img1.jpg';
if(s=='2')p1.src='images/img2.jpg';
if(s=='3')p1.src='images/img3.jpg';
if(s=='4')p1.src='images/img4.jpg';
}
</script>
</body>
</html>
```
**方法二**
1. 設定5張圖片的大小，並將5張圖片都設上id 和 onclick事件(滑鼠點擊)
2. 定義一個函式後，設定var變數
3. 用if判斷id為哪張圖片，接著再置換圖片
```!=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="images/img1.jpg" width="810" id="m"><br>
<img src="images/img1.jpg" alt="" width="200" id="b1" onclick="change_pic('b1')">
<img src="images/img2.jpg" alt="" width="200" id="b2" onclick="change_pic('b2')">
<img src="images/img3.jpg" alt="" width="200" id="b3" onclick="change_pic('b3')">
<img src="images/img4.jpg" alt="" width="200" id="b4" onclick="change_pic('b4')">
<script>
function change_pic(s){
var main_pic = document.getElementById("m");
var b1, b2, b3, b4;
if(s=='b1'){
b1 = document.getElementById("b1");
main_pic.src = b1.src;
}
if(s=='b2'){
b2 = document.getElementById("b2");
main_pic.src = b2.src;
}
if(s=='b3'){
b3 = document.getElementById("b3");
main_pic.src = b3.src;
}
if(s=='b4'){
b4 = document.getElementById("b4");
main_pic.src = b4.src;
}
}
</script>
</body>
</html>
```
**方法三**
```!=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="images/img1.jpg" width="810" id="m"><br>
<img src="images/img1.jpg" alt="" width="200" id="b1" onclick="m.src = images/img1.jpg">
<img src="images/img2.jpg" alt="" width="200" id="b2" onclick="m.src = images/img2.jpg">
<img src="images/img3.jpg" alt="" width="200" id="b3" onclick="m.src = images/img3.jpg">
<img src="images/img4.jpg" alt="" width="200" id="b4" onclick="m.src = images/img4.jpg">
</body>
</html>
```
Sign in with Wallet
Connect another wallet