JS02

by etai200

HTML

<input id="username"type="text"placeholder="請輸入姓名"><br>
<button onclick="order()">我要訂購</button>
<button onclick="contact()">認識工廠</button>

CSS

input{
  font-weight: bold;
  border: 3px solid DarkGray;
   width: 205px;
   height: 30px;
   margin: 5px;
   -webkit-border-radius: 50px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}
input:hover{
box-shadow: 0 0 2px 2px Silver;
}
button{
  font-weight: bold;
  background-color: Orange;
  border: 2px solid Moccasin;
  color: white;
   width: 100px;
   height: 30px;
   margin: 5px;
    -webkit-border-radius: 50px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}
button:hover{
  font-weight: bold;
  background-color: DarkOrange;
  border: 2px solid Moccasin;
  color: white;
   width: 100px;
   height: 30px;
   margin: 5px;
    -webkit-border-radius: 50px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}
button:active{
  font-weight: bold;
  background-color: CornflowerBlue;
  border: 2px solid LightSkyBlue;
  color: white;
   width: 100px;
   height: 30px;
   margin: 5px;
    -webkit-border-radius: 50px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

JavaScript

function order()
{
	var str = document.getElementById('username').value;
  alert('親愛的 '+ str +' 先生/小姐 您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！');
}
function contact()
{
	alert('我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！')
}