菜单

澳门太阳娱乐手机登录:PHP结合jQuery实现红蓝投票功能特效_jquery_脚本之家

2020年3月1日 - 澳门太阳娱乐手机登录

澳门太阳娱乐手机登录,那是四个分外实用的投票实例,应用在双方意见对抗投票场景。顾客可以筛选援救代表本人意见的一方进行投票,本文以红蓝双方投票为例,通过前后台人机联作,直参观展览示红蓝双方投票的数量和所占比例,应用非常分布。

正文是一篇综合知识应用类小说,需求你抱有PHP、jQuery、MySQL以致html和css方面的基本知识。本文在《PHP+MySql+jQuery完毕的“顶”和“踩”投票效用》一文根底上做了伏贴改正,共用了数据表,您能够先点击明白那篇小说。

HTML

咱俩要求在页面中呈现红蓝两方的见识,以至相应的投票的数量和比例,以至用于投票人机联作的手型图片,本例以#澳门太阳娱乐手机登录:PHP结合jQuery实现红蓝投票功能特效_jquery_脚本之家。red和#blue分别表示红蓝双方。.redhand和.bluehand用来做手型投票开关,.redbar和.bluebar显示红蓝双方比例调,#red_num和#blue_num呈现双方投票的数量。

  您对脚本之家提供的文章的看法? 非常实用完全看不懂                

CSS

利用CSS将页面美化,加载背景图片,鲜明相对地点等等,你能够直接复制以下代码,在团结的连串中稍作改正就可以。

 .vote{width:288px; height:220px; margin:60px auto 20px auto;position:relative} .votetitle{width:100%;height:62px; background:url no-repeat 0 30px; font-size:15px} .red{position:absolute; left:0; top:90px; height:80px;} .blue{position:absolute; right:0; top:90px; height:80px;} .votetxt{line-height:24px} .votetxt span{float:right} .redhand{position:absolute; left:0;width:36px; height:36px; background:url no-repeat -1px -38px;cursor:pointer} .bluehand{position:absolute; right:0;width:36px; height:36px; background:url no-repeat -41px -38px;cursor:pointer} .grayhand{width:34px; height:34px; background:url no-repeat -83px -38px;cursor:pointer} .redbar{position:absolute; left:42px; margin-top:8px;} .bluebar{position:absolute; right:42px; margin-top:8px; } .redbar span{display:block; height:6px; background:red; width:100%;border-radius:4px;} .bluebar span{display:block; height:6px; background:#09f; width:100%;border-radius:4px; position:absolute; right:0} .redbar p{line-height:20px; color:red;} .bluebar p{line-height:20px; color:#09f; text-align:right; margin-top:6px} 

jQuery

当点拍手型按键时,利用jQuery的$.getJSON(State of Qatar向后台php发送Ajax供给,借使乞请成功,将会拿走后台再次回到的json数据,jQuery再将json数据进行拍卖。以下函数:getdata,传递了五个参数,url是号召的后台php地址,sid表示近来投票核心ID,大家在该函数中,重临的json数据有红蓝双方的投票的数量,以至双边比例,依照比例计算比例条的幅度,异步交互作用映现投票效果。

 function getdata{ $.getJSON(url,{id:sid},function{ if{ var w = 208; //定义比例条的总宽度 //红方投票数 $.html.css("width",data.red_percent*100+"%"); var red_bar_w = w*data.red_percent-10; //红方比例条宽度 $.css; //蓝方投票数 $.html; $.css("width",data.blue_percent*100+"%"); var blue_bar_w = w*data.blue_percent; //蓝方比例条宽度 $.css; }else{ alert; } 

当页面初次加载时,即调用getdata(卡塔尔,然后点击给红方投票或给蓝方投票相似调用getdata(卡塔尔国,只是传递的参数不周边。注意本例中的参数sid大家设置为1,是依据数据表中的id设定的,开辟者能够依据实际项目读取准确的id。

 ${ //获取初始数据 getdata; //红方投票 $.click{ getdata("vote.php?action=red",1); }); //蓝方投票 $.click{ getdata("vote.php?action=blue",1); }); }); 

PHP

后面一个诉求了后台的vote.php,vote.php将依赖选用的参数,连接数据库,调用相关函数。

 include_once; $action = $_GET['action']; $id = intval; $ip = get_client_ip();//获取ip if{//红方投票 vote; }elseif{//蓝方投票 vote; }else{//默认返回初始数据 echo jsons; } 

函数vote用来做出投票动作,$type表示投票方,$id代表投票大旨的id,$ip代表客商眼下ip。首先依照客商眼下IP,查询投票记录表votes_ip中是不是早就存在当前ip记录,假如存在,则证实客商已投票,不然更新红方或蓝方的投票的数量,并将方今客户投票记录写入到votes_ip表中避防重复投票。

 function vote{ $ip_sql=mysql_query("select ip from votes_ip where vid='$id' and ip='$ip'"); $count=mysql_num_rows; if{//还没有投票 if{//红方 $sql = "update votes set likes=likes+1 where update votes set unlikes=unlikes+1 where insert into votes_ip  values "; mysql_query; if{ echo jsons; }else{ $arr['success'] = 0; $arr['msg'] = '操作失败,请重试'; echo json_encode; } }else{ $arr['success'] = 0; $arr['msg'] = '已经投票过了'; echo json_encode; } } 

函数jsons通过询问当前id的投票的数量,计算比例并赶回json数据格式供前端调用。

 function jsons{ $query = mysql_query("select * from votes where brush:sql;">CREATE TABLE IF NOT EXISTS `votes`  NOT NULL AUTO_INCREMENT, `likes` int NOT NULL DEFAULT '0', `unlikes` int NOT NULL DEFAULT '0', PRIMARY KEY  ENGINE=MyISAM DEFAULT CHARSET=utf8; INSERT INTO `votes` (`id`, `likes`, `unlikes`) VALUES ; CREATE TABLE IF NOT EXISTS `votes_ip`  NOT NULL, `vid` int NOT NULL, `ip` varchar ENGINE=MyISAM DEFAULT CHARSET=utf8; 

重新提醒,下载的demo假如运营不了,请先检查数据库连接配置是或不是正确。好了,少说两句,快来投票吧:

上述所述正是本文的全部内容了,希望大家能够心仪。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图