伊人博客 一款有技术又有生活的博客

<style>
/* 点赞 */
.like-img{width:20px;height:20px;position:absolute;top:0px;left:0;z-index:999;}
.btn{width:100px;height:30px;border:0;background:red;color:#fff;}
.like-hint{font-size:12px;color:red;margin-left:10px;visibility:hidden;}
</style>

<div class="article_content">
    文章内容
</div>
<p style="text-align: center;">
    <input id="btn1" type="button" class="btn" value="赞（0）" /><br/>
    <span class="like-hint">每篇文章每天只能点赞10次</span>
</p>

<script>
//js获取cookie
function getCookie(name)
{
  var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
  if(arr=document.cookie.match(reg))
    return unescape(arr[2]);
  else
    return null;
}
//js设置cookie，有效期1天
function setCookie(name,value)
{
  var days = 1;
  var exp = new Date();
  exp.setTime(exp.getTime() + days*24*60*60*1000);
  document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
$(function() {
  var count = 0;//文章当前点赞数量，可从后台数据库读取
  $("#btn1").click(function() {
    var i = getCookie('like_<%= id%>');
    i = i ? i : 0;
    //只能点10次
    if (i >= 10) {
      $('.like-hint').css('visibility','visible');
      return;
    }
    //<%= id%> 为文章ID，限制每篇文章只能点10次
    setCookie("like_<%= id%>", parseInt(i)+1);
    var x = 0;
    var y = screen.width-20;
    var num = Math.floor(Math.random() * 3 + 1);
    var index = $('.article_content').children('.like-img').length;
    var rand = parseInt(Math.random() * (x - y + 1) + y);
    count++;
    $(this).val("赞（" + count + "）");
    $.ajax({ url: '<%=ResolveUrl("~/Handler/LikeCount.ashx?aid="+id)%>', async: true });
    $(".article_content").append(
           "<img class='like-img' src='/static/image/like_"+ num + ".png'>");
    $('.like-img:eq(' + index + ')').css(
        { 'top': this.offsetTop - 20 + 'px', 
            'left': this.offsetLeft + 30 + 'px' 
        });
    $('.like-img:eq(' + index + ')').animate({
      top: this.offsetTop-200+'px',
      opacity: "0",
      left: rand+'px'
    }, 3000);

  });
});
</script>