Phần thứ nhất của bài hướng dẫn này tôi hướng dẫn các bạn tạo một box cho phép nhập mã màu hex code để thay đổi màu sắc của màn hình.Sử dụng css3 ,jQuery và biểu thức điều kiện regExp trong js để kiểm tra xem mã vừa nhập có phù hợp không.
Demo
Download
Luôn mở đầu với mã HTML
Code
<body>
<div class="change-box">
<label>#</label><input type="text" value="" class="box" id="box"/>
<button class="change">Change</button>
<span class="error" id="count">Hex code gồm 6 kí tự</span>
<span class="error" id="word">Hex code chỉ chứa kí tự A-F và 0-9</span>
</div>
<!--.....-->
</body>
Cấu trúc của change box gồm có thẻ input dạng text để nhập mã màu hexcode, thẻ button sau đây sử dụng jQuery để click vào nó giúp thay đổi background của body giống như mã màu vừa nhập vào thẻ input. Còn 2 thẻ span có class error ta sẽ để ẩn đi với mã css, rồi sau đó làm cho xuất hiện khi mã nhập vào không đúng.
Trang trí một chút với mã CSS
Code
body{
background-color:#adeacb;
font-family:helvetica;
font-size:12px;
color:#555;
}
.change-box{
background-color:#fff;
background-image:linear-gradient(top,#fff,#f6f6f6);
position:Absolute;
box-shadow:0 0 5px rgba(0,0,0,0.1);
width:270px;
padding:10px;
top:50%;
left:50%;
border-radius:3px;
margin-top:-100px;
margin-left:-150px;
}
.change-box label{
font-size:18px;
margin-right:5px;
color:#555;
position:Absolute;
top:17px;
left:20px;
}
.error{
position:absolute;
white-space:nowrap;
color:#fff;
background-color:#f55050;
display:block;
padding:8px 15px;
top:-10px;
right:15px;
opacity:0;
visibility:hidden;
}
.error:before{
content:"";
position:absolute;
border:6px solid transparent;
border-top:6px solid #f55050;
bottom:-12px;
left:50%;
margin-left:-6px;
}
.box{
border:none;
background-color:#f5f5f5;
text-indent:22px;
width:100%;
color:#555;
font-size:18px;
height:22px;
border-radius:3px;
padding:5px 0;
box-shadow:inset 0 0 10px rgba(0,0,0,0.1);
}
.change{
position:absolute;
right:0px;
bottom:-40px;
display:block;
margin-top:10px;
border:none;
font-size:12px;
text-transform:uppercase;
padding:5px 10px;
border-radius:3px;
background-color:#10d26f;
color:#fff;
box-shadow:inset 0 -3px 0px rgba(0,0,0,0.2);
cursor:pointer;
}
.change:active{
box-shadow:inset 0 -2px 0px rgba(0,0,0,0.2);
padding-top:4px;
color:#f9f9f9;
bottom:-41px;
}
Hơi dài một tý 
. Tuy nhiên các bạn có thể trang trí đơn giản hơn cũng được vì mục đích bài này không phải ở đoạn mã trên( ở trên ta chỉ chú ý ẩn thẻ error với visibility:hidden và opacity:0 là được ). Dưới đây là đoạn code css quan trọng hơn.
Code
body{
/*--code trước--*/
-moz-transition:background-color 0.4s ease;
-webkit-transition:background-color 0.4s ease;
-o-transition:background-color 0.4s ease;
-ms-transition:background-color 0.4s ease;
transition:background-color 0.4s ease;
}
.error{
/*--code trước--*/
-moz-transition:all 0.4s ease;
-webkit-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
-ms-transition:all 0.4s ease;
transition:all 0.4s ease;
}
.show{
visibility:visible;
opacity:1;
top:-20px;
}
Ta thêm cho body và error thuộc tính transition của css3 đồng thời thêm lớp show (nằm dưới error) với visibility:visible và opacity:1 để sau đây ta dùng jQuery thêm lớp show này cho error giúp hiện thẻ span lên.
Mã jQuery
Code
$('.change').click(function(){
code = $('.box').val(); // gắn giá trị của box cho biến code
if(code.length == 6){ //kiểm tra xem biến code có 6 kí tự không
patt = /[A-Fa-f0-9]{6}/g; //6 kí tự chỉ có thể là 0 đến 9 và a đến f
t = patt.test(code);
if(t){ //nếu t = true thay đổi background của body
$('body').css({'background-color':'#'+code});
}else{ //nếu t = false hiện thông báo lỗi cho span#word
$('#word').addClass('show');
}
}else{ // Nếu không có 6 kí tự thì hiện thông báo lỗi cho span#count
$('#count').addClass('show');
}
});
//khi chỉ chuột vào box thì ẩn error đi
$('.box').focusin(function(){
$('.show').removeClass('show');
})
Ta chú ý mã màu hex code chỉ gồm dấu # và 6 kí tự đi sau nó, mỗi kí tự chỉ có thể có khả năng nhận giá trị 0-9 và A-F.Do đó ta có biểu thức điều kiện:
Code
patt = /[A-Fa-f0-9]{6}/g;
t = patt.test(code);
Hoặc:
Code
t = /[A-Fa-f0-9]{6}/g.test(code)
Biểu thức trên sẽ kiểm tra lần lượt 6 kí tự của code xem nó nằm trong khoảng kí tự a-f,A-F và 0-9 hay không, nếu cả 6 kí tự của code đều thỏa mãn t sẽ có giá trị true ngược lại nếu chỉ một giá trị không thỏa mãn t sẽ nhận giá trị false. Các bạn có thể tìm hiều thêm về biểu thức điều kiện tại.
