当浏览新闻页面或者其它页面的时候会有阅读后的感受，比如给力、淡定、打酱油、加油、坑爹等等的表情。让读者打分，看看自己的感受是否与其他读者一样。很不错的交互！

立即下载：mood_jb51.rar

本文需要熟悉jquery、mysql、ajax相关的知识，不过用的不多。本文有三个文件：index.html、mood.php、sql.php

index.html，页面展示和请求创建交互式、快速动态网页应用的网页开发技术数据mood.php，后台文件处理得到请求来的数据，并返回数据sql.php，数据库文件，存数据库信息直接进入代码吧。

index.html

首先导入jquery

//cdn。布斯。com/jquery/1。7 .2/jquery。量滴射流研究…当文档载入完毕就请求(ajax-get)投票人数数据

$.ajax({ type: 'GET '，url: 'mood.php '，cache: false，data: 'id=1 '，dataType: 'json '，error: function(){ alert('出错了!');}，成功：函数(json){ if(json){ $ .每个(json，function(index，array){ var str=' lispan ' array[' mood _ val ']'/span div class= ' pile ' style= ' height : ' array[' height ']' px； '/div class= ' face ' rel= ' array[' mid ']' ' img src= ' images/' array[' mood _ pic ']' ' br/' array[' mood _ name ']'/div/Li '；$('#mood ul ').追加（字符串);});} }});返回就添加到网页里，然后就点击表情逻辑，也创建交互式、快速动态网页应用的网页开发技术到后台

$('.脸')。live('click '，function(){ var face=$(this)；var mid=face。attr(' rel ')；定义变量值=face.parent().查找(' span ').html()；var val=parseInt(值)1;$.post('mood.php？action=send '，{moodid:mid，id:1}，function(data){ if(data 0){ face。prev().css(“”高度，数据px’)；face.parent().查找(' span ').html(val)；face.find('img ').addClass(')选定');}else{ alert(数据);} });});这样整个前台就完成了工作

mood.php

首先要导入sql.php数据库文件

include _ once(' SQL。PHP’)；这个文件处理的是整个功能的核心，处理数据库饼干.

1.处理获取投票人数代码

$mname=explode('，'，$ mood name)；//心情说明$ num=count($ mname)；$mpic=explode('，'，$ mood pic)；//心情图标$ id=(int)$ _ GET[' id ']；$query=mysql_query('从心情中选择*其中id=$ id ')；$ RS=MySQL _ fetch _ array($ query)；if($ RS){ $ total=$ RS['情绪0 ']$ RS['情绪1 ']$ RS['情绪2 ']$ RS['情绪3 ']$ RS['情绪4 ']；对于($ I=0；$ i $ num$i ){ $field='mood ' .$ I；$ m _ val=int val($ RS[$ field])；$ height=0；//柱图高度if($ total $ m _ val){ $ height=round($ m _ val/$ total)* $ mood pic height)；//计算高度} $arr[]=array('mid'=$i，' mood_name'=$mname[$i]，' mood_pic'=$mpic[$i]，' mood_val'=$m_val，' height '=$ height)；} echo JSON _ encode($ arr)；} else { for($ I=0；$ I $ num $ I){ $ arr[]=array(' mid '=$ I，' mood_name'=$mname[$i]，' mood_pic'=$mpic[$i]，' mood_val'=0，' height '=0)；} echo JSON _ encode($ arr)；}2.处理投票功能

$ id=(int)$ _ POST[' id ']；$ mid=(int)$ _ POST['心情id ']；if($mid0 ||！$id){ echo '错误；退出；} $ have mood=chk _ mood($ id)；if($havemood==1){ echo '您已表达过了；退出；} $ field="mood ".$ mid//查询是否有这个id$result=mysql_query('从心情中选择1,其中id=' { $ id } ')；$ row=MySQL _ fetch _ array($ result)；if(is _ array($ row)){ $ query=MySQL _ query('更新情绪集').$field .='.$field .1,其中id=' .$ id)；if($query){ setcookie('mood ').身份证，中间$id，time()3600)；$query2=mysql_query('从心情中选择*其中id=$ id ')；$ RS=MySQL _ fetch _ array($ query 2)；$ total=$ RS['情绪0 ']$ RS['情绪1 ']$ RS['情绪2 ']$ RS['情绪3 ']$ RS['情绪4 ']；$ height=round($ RS[$ field]/$ total)* $ mood pic height)；echo $ height } else { echo-1；} } else { MySQL _ query(' INSERT INTO mood(id，mood0，mood1，mood2，mood3，mood4)VALUES ('{$id} '，' 0 '，' 0 '，' 0 '，' 0 '，' 0 ')')；$query=mysql_query('更新情绪集。$field .'='.$field .1,其中id=' .$ id)；setcookie('心情').身份证，中间$id，time()3600)；echo $ moodpicheight}这个文件很简单，基本都是在处理数据库，逻辑也不是很复杂。可以自己下来细心看。

sql.php

一个通用的数据库信息储存文件，数据库的知识产权、帐号、密码、数据库名等等

$ host=' localhost $ db _ user=' root '；$ db _ pass=$ db _ name=' demo$时区="亚洲/上海";$link=mysql_connect($host，$db_user，$ db _ pass)；mysql_select_db($db_name，$ link)；MySQL _ query(' SET name UTF8 ')；标题('内容-类型：文本/html；charset=utf-8 ')；到目前所有的核心代码都也贴出，大神就跳过，如果有需要就下载来看一看

对了，还有一个数据库，行吧数据定义语言也贴出来

创建表“心情”(“id”tinyint(5)不为空，“心情0”int(9)无符号不为空，“情绪1”整数(9)无符号不为空，“情绪2”整数(9)无符号不为空，“情绪4”整数(9)无符号不为空，主键(` id `))发动机=InnoDB DEFAULT CHARSET=utf8 mb4以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。