JavaScript-Lesson-1

函數的基本方法 呼叫函數的基本方法 onclick 事件的用法

by 000dd

HTML

<div class="wrap">
  <button onclick="order()">我要訂購</button>
  <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: 300px;
   display: flex;
   justify-content: center;
   align-content: center;
 }

  button{
    width: 70px;
    height: 30px;
    margin-top: 50px;
    margin-right: 20px;
    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() {
  alert('謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！');
}

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