Dạo gần đây thấy anh em SEO thích sử dụng các button hiển thị số giây đếm ngược nên mình quyết định share cho anh em 1 đoạn code nho nhỏ có để có thể thực hiện được việc này nhé.
-
Bắt đầu làm thôi nào
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
function btn_dowload(){ ob_start();?> <div class="box-get"> <div class="box-get-coupon btn-red-pt box-coupon text-center" post-id="<?php echo get_the_ID();?>"> <span>Bấm vào đây để lấy mã giảm giá</span> </div> </div> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.box-get-coupon.box-coupon').click(function(){ jQuery('.box-get-coupon').removeClass('btn-red-pt'); jQuery('.box-get-coupon').off('click'); var n=5; //thời gian 5s setInterval(function(){ n--; if(n>0){ jQuery('.box-get-coupon').html('Mã sẽ hiển thị sau: ' + n + ' giây '); } if(n==0){ jQuery('.box-get-coupon').html('<div>Mã của bạn là 123</div>'); } },1000); }); }); </script> <?php $content = ob_get_contents(); ob_end_clean(); return $content; } add_shortcode('btn_dowload','btn_dowload'); |
Sau đó các bạn dán đoạn shortcode vào chỗ mún hiển thị là được
|
1 |
[btn_dowload] |
Các bạn thêm 1 đoạn mã css này nữa cho đẹp mắt nhé.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/*download*/ body .btn-red-pt{ background: #fa5656; color: #FFF; display: inline-flex; } .box-get{ text-align:center; } .box-get-coupon:hover { background: #fa5656; color: #FFF; } .box-get-coupon{ background: #FFF; padding: 12px 20px; cursor: pointer; font-weight: bold; font-size: 15px; border: 2px dashed #fa5656; border-radius: 5px; -webkit-transition: ease all .4s; -o-transition: ease all .4s; transition: ease all .4s; } /*download*/ |
Chúc các bạn thành công.
