JavaScript-Lesson-2

基本的變數賦值 基本的字串連接 能從 html 元素中，得到用戶輸入的內容

by 000dd

HTML

<div class="wrap">
  
  <button onclick="order()">我要訂購</button>
  <input class="name" id="keyword" type="text" placeholder="輸入用戶姓名"/>
  <button onclick="introduce()">認識工廠</button>
</div>

CSS

* {
  padding: 0;
  margin: 0;
}

@keyframes example {
    0% {
    background: #4CAF50;
    transform: rotate(0deg);
  }
  
    50% {
    background: #4CAF50;
    transform: scale(1.2);
    
  }

    100% {
      background: #3e8e41;
      
  }
}

 .wrap{
   width: 100%;
   height: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
.name{
   margin: 0 20px 0 20px;
   font-weight: 800;
   border-radius: 5px;
}
  button{
    width: 70px;
    height: 30px;
    color: white;
    background: #4CAF50;
    border: none;
    border-radius: 40px;
    box-shadow: 0px 7px #999;
    cursor: pointer;
  }

  button:hover {
    animation-name: example;
    animation-duration: 1.5s;
  }

  button:active {
    background: #3e8e41;
    box-shadow: 0px 4px #999;
  }

JavaScript

function order() {
	let customer = document.getElementById('keyword').value;
  alert(customer+'您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！');
}

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