1
2

<button class="back" type="button">回上一頁</button>
<button class="next" type="button">往下一頁</button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

let back = document.querySelector(".back");
let next = document.querySelector(".next");

//點擊"回上一頁"按鈕時
back.addEventListener("click",function(){
  window.history.back();
})

//點擊"往下一頁"按鈕時
next.addEventListener("click",function(){
  window.history.forward();
})

1

<button class="print" type="button">列印</button>

1
2
3
4
5

let print = document.querySelector(".print");

print.addEventListener("click",function(){
  window.print();
})

1
2

<button class="website1" type="button">網址1</button>
<button class="website2" type="button">網址2</button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

let website1 = document.querySelector(".website1");
let website2 = document.querySelector(".website2");

//點擊"網址1"按鈕時
website1.addEventListener("click",function(){
  window.open("https://www.google.com.tw/");
})

//點擊"網址2"按鈕時
website2.addEventListener("click",function(){
  location.href = "https://www.google.com.tw/";
})

1
2
3
4

<div class="banner"></div>
<section>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum quos facilis praesentium, dolore impedit ea est reprehenderit sapiente aliquam aspernatur odio expedita voluptates repellendus nobis modi, eveniet itaque tempore aliquid distinctio, quia rem sit! Itaque, voluptas praesentium sint facere nulla est saepe tenetur inventore ipsum consequatur tempore soluta aspernatur, non modi neque aperiam quibusdam, similique quaerat dolore cumque ducimus. Sint obcaecati, natus ipsum consequuntur facere numquam quibusdam, praesentium autem omnis deleniti porro, quae nesciunt perspiciatis qui repellat. Rem labore culpa tempora est blanditiis facere vel, error debitis ea atque quod dolor amet tenetur asperiores incidunt ipsum itaque, nemo doloribus ab!</p>
</section>

1
2
3
4
5
6
7

.banner{
  width: 100%;
  height: auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("https://images.unsplash.com/photo-1731466450638-959a6f0d1514?q=80&w=2675&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}

1
2
3
4
5
6
7

let banner = document.querySelector(".banner");

banner.style.height = window.innerHeight+"px";

window.onresize = function(){
  banner.style.height = window.innerHeight+"px";
}