点赞效果代码(点赞功能代码html)
admin 发布:2022-12-19 19:32 148
本篇文章给大家谈谈点赞效果代码,以及点赞功能代码html对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
ASP网站实现点赞功能代码怎么写
说说原理,比如说你要给文章加一个点赞功能。
在文章表里增加一个字段用来存赞。
然后在文章页面加一个按钮,点赞,ASP处理给这个ID的文章赞字段加1就OK了。。。
简单实现
%'数据库接,读取出文章%
%=rs("文章内容等")%
a href="like.asp?id=%=rs("上面读取到的这篇文章ID")%"点赞/a
like.asp
%数据库接
id=request("id")
update table set 赞字段=赞字段+1 where id="id
判断成功/错误
如果需要无刷新的话,再配合JS AJAX来做就可以了。
关于写一个网页点赞代码
这个,就我知道的说一下,网页主要需要使用HTML,CSS,JavaScript,PHP以及其它。所以如果想写网页还是需要学这些吧。C语言应该是不能做网页。当然有了编程基础学这些也快吧。HTML和CSS可以控制网页上显示什么和显示的格式。JavaScript是客户端的脚本语言,PHP是用于写服务器端的。
比如举个例子
html xmins="" xml:lang="en"
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
title用户登录/title
link rel="stylesheet" type="text/css" href="styles.css" /
script language="javascript"
function InputCheck(form1)
{
if(form1.username.value=="")
{
alert('请输入您的账号');
form1.username.focus();
return(false);
}
if(form1.password.value=="")
{
alert('请输入您的密码');
form1.password.focus();
return(false);
}
}
/script
/head
title用户登录/title是HTML,作用是在浏览器的标签显示“用户登录”。link rel="stylesheet" type="text/css" href="styles.css" /也是HTML,作用是链接了一个CSS,就是styles.css,用于控制网页的格式。script language="javascript"开始的那一段代码是JavaScript,作用是在客户端检查用户输入的账号和密码是否为空,如果为空,就提示“请输入”。
PHP用于在服务器端和数据库交互,数据库可以是MySQL,SQLServer等。因为如果做网页,储存一些用户的信息等最好还是用数据库吧。
希望你能大体明白吧,当然如果制作一个网页的界面可以使用一些软件,如Dreamweaver等,应该能做出比较漂亮的界面。
红心点赞按钮怎么做
需要学习JavaScript语言和HTML语言
使用方法
HTML结构
该“点赞”红心按钮的HTML结构是将心形按钮放在一个超链接的后面或下面,它的HTML结果如下:
div class="feed" id="feed1"
pjQuery之家 a href="";/a/p
div class="heart" id="like3" rel="like"/div
div class="likeCount" id="likeCount3"24/div
/div
CSS样式
整个“点赞”烟花爆炸效果实际上是使用背景图片的连续播放来完成的,它使用一张很长的雪碧(Sprite)图片,然后在点击红心按钮是逐帧进行播放。下面是开始时显示第一帧的CSS样式:
.heart {
background: url(images/web_heart_animation.png);
background-position: left;
background-repeat: no-repeat;
height: 50px;
width: 50px;
cursor: pointer;
position: absolute;
left:-14px;
background-size:1450px; //实际背景图片尺寸2900px
}
.heart:hover{
background-position: right; //显示最后一个红心帧
}
.likeCount{
margin-top: 13px;
margin-left: 28px;
font-size: 16px;
color: #999999
}
下面的代码是逐帧播放红心背景图片,它使用CSS3 keyframe帧动画来完成。
@-webkit-keyframes heartBlast {
0% {background-position: left;}
100% {background-position: right;}
}
@keyframes heartBlast {
0% {background-position: left;}
100% {background-position: right;}
}
.heartAnimation {
-webkit-animation-name: heartBlast; //webkit内核浏览器
animation-name: heartBlast;
-webkit-animation-duration: .8s;
animation-duration: .8s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-timing-function: steps(28); //共28个背景图片帧
animation-timing-function: steps(28);
background-position: right;
}
JavaScript
在这个“点赞”红心动画特效中使用jQuery代码来使红心按钮在点击时与相应的总点赞数量进行联动。你可以通过ajax来进行数据库操作。当用户点赞时,总数量加1,取消点赞时,总数量减1。
script
$(document).ready(function(){
$('body').on("click",'.heart',function(){
var A=$(this).attr("id");
var B=A.split("like"); //splitting like1 to 1
var messageID=B[1];
$(this).css("background-position","")
var D=$(this).attr("rel");
$.ajax({
type: "POST",
url: "message_like_ajax.php",
data: dataString,
cache: false,
success: function(data){
$("#likeCount"+messageID).html(data);
if(D === 'like') {
$(this).addClass("heartAnimation").attr("rel","unlike"); //applying animation class
}
else{
$(this).removeClass("heartAnimation").attr("rel","like");
$(this).css("background-position","left");
}
}); //ajax end
});//heart click end
});
/script
Php点赞效果的制作代码+解析
数据库设计
先准备两张表,pic表保存的是图片信息,包括图片对应的名称、路径以及图片“赞”总数,pic_ip则记录用户点击赞后的IP数据。
CREATE TABLE IF NOT EXISTS `pic` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`pic_name` varchar(60) NOT NULL,
`pic_url` varchar(60) NOT NULL,
`love` int(11) NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
CREATE TABLE IF NOT EXISTS `pic_ip` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`pic_id` int(11) NOT NULL,
`ip` varchar(40) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8
index.php
在index.php中,我们通过PHP读取pic表中的图片信息并展示出来,结合CSS,提升页面展示效果。
?php
include_once("connect.php");
$sql = mysql_query("select * from pic");
while($row=mysql_fetch_array($sql)){
$pic_id = $row['id'];
$pic_name = $row['pic_name'];
$pic_url = $row['pic_url'];
$love = $row['love'];
?
liimg src="images/?php echo $pic_url;?" alt="?php echo $pic_name;?"pa href="#"
title="赞"class="img_on" rel="?php echo $pic_id;?"?php echo $love;?/a/p/li
?php }?
CSS中,我们将定义鼠标滑向和离开红心按钮的动态效果,并定位按钮的位置。
.list{width:760px; margin:20px auto}
.list li{float:left; width:360px; height:280px; margin:10px; position:relative}
.list li p{position:absolute; top:0; left:0; width:360px; height:24px; line-height:24px;
background:#000; opacity:.8;filter:alpha(opacity=80);}
.list li p a{padding-left:30px; height:24px; background:url(images/heart.png) no-repeat
4px -1px;color:#fff; font-weight:bold; font-size:14px}
.list li p a:hover{background-position:4px -25px;text-decoration:none}
jQuery代码
当用户点击自己喜欢的图片上的红心按钮时,向后台love.php发送ajax请求,请求响应成功后,更新原有的数值
$(function(){
$("p a").click(function(){
var love = $(this);
var id = love.attr("rel"); //对应id
love.fadeOut(300); //渐隐效果
$.ajax({
type:"POST",
url:"love.php",
data:"id="+id,
cache:false, //不缓存此页面
success:function(data){
love.html(data);
love.fadeIn(300); //渐显效果
}
});
return false;
});
});
love.php
后台love.php接收前端的ajax请求,根据提交的图片id值,查找IP表中是否已有该用户ip的点击记录,如果有则告诉用户已“赞过了”,反之,则进行一下操作:
1、更新图片表中对应的图片love字段值,将数值加1。
2、将该用户IP信息写入到pic_ip表中,用以防止用户重复点击。
3、获取更新后的赞值,即赞该图片的用户总数,并将该总数输出给前端页面。
include_once("connect.php"); //连接数据库
$ip = get_client_ip(); //获取用户IP
$id = $_POST['id'];
if(!isset($id) || empty($id)) exit;
$ip_sql=mysql_query("select ip from pic_ip where pic_id='$id' and ip='$ip'");
$count=mysql_num_rows($ip_sql);
if($count==0){ //如果没有记录
$sql = "update pic set love=love+1 where id='$id'"; //更新数据
mysql_query( $sql);
$sql_in = "insert into pic_ip (pic_id,ip) values ('$id','$ip')"; //写入数据
mysql_query( $sql_in);
$result = mysql_query("select love from pic where id='$id'");
$row = mysql_fetch_array($result);
$love = $row['love']; //获取赞数值
echo $love;
}else{
echo "赞过了..";
}
我上传的附件中 数据库SQL 你可以直接建立test 数据库UTF8编码的,然后把SQL文件导入进去。修改一下connect.php中数据库的连接信息即可。
点赞效果代码的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于点赞功能代码html、点赞效果代码的信息别忘了在本站进行查找喔。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
相关推荐
- 05-03安卓网页代码编辑软件(安卓平台代码编辑器)[20240503更新]
- 05-03垂直多级导航菜单代码(菜单导航栏的代码)[20240503更新]
- 05-03织梦首页下一页代码(织梦搜索框代码)[20240503更新]
- 05-03网页切换图片代码(网页图片切换怎么做)[20240503更新]
- 05-03jquery网站代码(jquery操作html代码)[20240503更新]
- 05-03matlab代码自动排版(matlab自动排版快捷键)[20240503更新]
- 05-03点击图片翻页代码(图片自动翻页)[20240503更新]
- 05-03matlab锐化代码(matlab自己编写锐化函数)[20240503更新]
- 05-03输入日期显示是否的代码(显示当前时间和日期的代码)[20240503更新]
- 05-03移动省份代码(移动归属省代码)[20240503更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接