--- title: 2022/11/8 社課共筆 tags: 社課 --- :::warning - 社課資源: - [簡報](https://hackmd.io/@c4t0212/SJDUng8Bo) - [IDE 環境](https://jsfiddle.net/2cyerqhn/) - [slido](https://app.sli.do/event/uWJdDXqoHGh2VzKN2b5noq) - [回饋表單](https://forms.gle/PhJjzgAUiHcNTWz39) <!-- 記得弄直播 --> ::: https://developer.mozilla.org/zh-TW/docs/Web 透過輸入框改變圖片的顯示大小 ```html <!DOCTYPE html> <html> <head></head> <body> <span class="A"> A! </span> <input id="size"><button onclick="getImg()">Enter</button> <br> </body> </html> ``` ```js function getImg(){ let size = document.querySelector('#size'); let url = `https://picsum.photos/${size.value}`; fetch(url, {}) .then((response) => { console.log(response); return response.blob(); }) .then((data) => { let img = new Image(); img.src = URL.createObjectURL(data); document.body.appendChild(img); }) .catch(error => {console.error(error)} ); } ```