JavaScript 系列一

by yuhn5813

HTML

<div class="practice1">
第1課 ── 基本的函數操作、onclick 事件
  <button class="btn" onclick="jumpalt1()">我要訂購</button>
  <button class="btn" onclick="jumpalt2()">認識工廠</button>

</div>
<div class="practice2">
第1課 ── 基本的函數操作、onclick 事件
  <div class="textbox">
    <h3><span>線上下單區</span></h3>
    <p>請輸入以下資訊，以完成訂購</p>
  </div>
  <p>
    名字: <input id="order_name" type="text">
  </p>
  <p>
    電話: <input id="order_num" type="text">
  </p>
  <p>
    email: <input id="order_mail" type="text">
  </p>
  <button class="btn" onclick="order_info()">送出
  </button>
</div>

CSS

.practice1 .btn {
  font-family: 'Noto Sans Tc';
  font-size: 16px;
  overflow: hidden;
  padding: 10px 20px;
  margin: 20px 0px;
  border-radius: 20px;
  border: 0px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 5px 0px #54a4c9;
  transition: .2s all linear;
  cursor: pointer;
  display: block;
}

.practice1 .btn:hover {
  background-color: #54a4c9;
  color: #FFF;
}

.practice2 {
  font-family: 'Noto Sans Tc';
  font-size: 16px;

}

.practice2 h3 span {
  background-image: linear-gradient(180deg, #34849f 50%, #b0d6ff 100%);
  color: transparent;
  background-clip: text;
}

.practice2 p {
  color: #094053;
  font-size: 14px;
}

.practice2 .btn {
  font-size: 14px;
  padding: 0px 10px;
  border-radius: 2px;
  border: 0px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 0px 1px #6c6c6c;
  transition: practice2 .3s all linear;
  cursor: pointer;
}

.practice2 .btn:hover {
  background-color: #6c6c6c;
  color: #FFF;
}

JavaScript

function jumpalt1() {
  alert('謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您https://jsfiddle.net/yuhn5813/fbt63dvm/3/#報價！');
}

function jumpalt2() {
  alert('我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！');

}

function order_info() {
    var name = document.getElementById('order_name').value;
    var num = document.getElementById('order_num').value;
    var mail = document.getElementById('order_mail').value;
    
    alert(name + '\n您好！謝謝您對我們的衣服有興趣！以下是您的訂購資訊\n電話：'+num+'\nEmail：'+mail+'\n\n感謝您的訂購！');
}