PHP 개발 빨간색과 파란색 투표 기능 튜토리얼 jQuery
손 버튼을 클릭하면 jQuery의 $.getJSON()을 사용하여 Ajax 요청을 백그라운드 PHP로 보냅니다. 요청이 성공하면 백그라운드에서 반환된 json 데이터를 가져오고 jQuery는 json 데이터를 처리합니다. . 다음 함수: getdata(url,sid)는 두 개의 매개변수를 전달합니다. URL은 요청의 백엔드 PHP 주소이고 sid는 현재 투표 주제 ID를 나타냅니다. 이 함수에서 반환된 json 데이터에는 두 빨간색 모두의 투표 수가 포함됩니다. 파란색 정당과 양 정당의 비율을 기준으로 비율 막대의 너비를 계산하고 비동기적으로 대화식으로 투표 효과를 표시합니다.
function getdata(url,sid){
$.getJSON(url,{id:sid},function(data){
if(data.success==1){
var w = 208; //정의 비율 막대의 전체 너비
using using using through 사용 through out through out through out through out through out through''s' ‐‐‐ ‐‐‐‐ 바의 전체 너비로 이어집니다
") ;
var red_bar_w = w*data.red_percent-10; //파란색 투표 수
("#blue_num").html(data.blue)
> ("#blue_num").html(data.blue);
}
})
}
지속적인 학습
$.getJSON(url,{id:sid},function(data){
if(data.success==1){
var w = 208; //정의 비율 막대의 전체 너비
using using using through 사용 through out through out through out through out through out through''s' ‐‐‐ ‐‐‐‐ 바의 전체 너비로 이어집니다
") ;
var red_bar_w = w*data.red_percent-10; //파란색 투표 수
("#blue_num").html(data.blue)
> ("#blue_num").html(data.blue);
}
})
}
페이지가 처음 로딩되면 getdata()를 호출한 후 클릭하여 레드팀에 투표하거나 블루팀에 투표하여 getdata()도 호출하는데 전달되는 매개변수가 다릅니다. 이 예시에서는 sid 매개변수가 1로 설정되어 있으며, 이는 데이터 테이블의 id를 기준으로 설정됩니다. 개발자는 실제 프로젝트를 기준으로 정확한 id를 읽을 수 있습니다.
$(함수(){
데이터 가져오기 ("vote.php?action=red",1);
});
getdata("vote.php?action=blue ",1)
})
데이터 가져오기 ("vote.php?action=red",1);
});
getdata("vote.php?action=blue ",1)
})
||
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>红蓝投票功能</title>
<style>
#main{
width: 600px;
margin: 0 auto;
border: 1px solid #050205;
}
.vote{
width:358px;
height:300px;
margin:40px auto;
position:relative
}
.votetitle{
width:100%;
height:62px;
background:url(https://img.php.cn/upload/course/000/000/006/58297eff1276a354.png) no-repeat 0 30px;
font-size:15px
}
.red{
position:absolute;
left:0; top:64px;
height:80px;
}
.blue{position:absolute;
right:0;
top:64px;
height:80px;
}
.red p,.blue p{
line-height:22px
}
.redhand{
position:absolute;
left:0;
width:36px;
height:36px;
background:url(https://img.php.cn/upload/course/000/000/006/58297eff1276a354.png) no-repeat -1px -38px;
cursor:pointer
}
.bluehand{
position:absolute;
right:0;
width:36px;
height:36px;
background:url(https://img.php.cn/upload/course/000/000/006/58297eff1276a354.png) no-repeat -41px -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: blue;
width:100%;
border-radius:4px;
position:absolute;
}
.redbar p{
line-height:20px;
color:red;
}
.bluebar p{
line-height:20px;
color:#09f;
text-align:right;
margin-top:23px
}
</style>
<script src="//cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
getdata("vote.php",1);
$(".redhand").click(function(){
getdata("vote.php?action=red",1);
});
$(".bluehand").click(function(){
getdata("vote.php?action=blue",1);
});
});
function getdata(url,sid){
$.getJSON(url,{id:sid},function(data){
if(data.success==1){
var w = 208;
$("#red_num").html(data.red);
$("#red").css("width",data.red_percent*100+"%");
var red_bar_w = w*data.red_percent-10;
$("#red_bar").css("width",red_bar_w);
$("#blue_num").html(data.blue);
$("#blue").css("width",data.blue_percent*100+"%");
var blue_bar_w = w*data.blue_percent;
$("#blue_bar").css("width",blue_bar_w);
}else{
alert(data.msg);
}
});
}
</script>
</head>
<body>
<div id="main">
<h2>PHP+jQuery+MySql实现红蓝投票功能</h2>
<hr/>
<div class="vote">
<div class="votetitle">您对PHP中文网提供的文章的看法？</div>
<div class="red" id="red">
<p id="hong">非常实用</p>
<div class="redhand"></div>
<div class="redbar" id="red_bar">
<span></span>
<p id="red_num"></p>
</div>
</div>
<div class="blue" id="blue">
<p id="bu">完全看不懂</p>
<div class="bluehand"></div>
<div class="bluebar" id="blue_bar">
<span></span>
<p id="blue_num"></p>
</div>
</div>
</div>
</div>
</body>
</html>
- 코스 추천
- 코스웨어 다운로드
-
초등학교Imperial CMS 기업 모방 웹사이트 튜토리얼
3048명이 시청하고 있습니다. -
초등학교WordPress에 기초가 전혀 없는 초보자는 개인 블로그와 기업 웹 사이트를 구축합니다.
6743명이 시청하고 있습니다. -
초등학교궁극의 CMS 제로 기반 웹사이트 구축 지침 영상
2724명이 시청하고 있습니다. -
![프론트엔드 프로젝트 - Shangyou [HTML/CSS/JS 기술 종합실습]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
초등학교프론트엔드 프로젝트 - Shangyou [HTML/CSS/JS 기술 종합실습]
3117명이 시청하고 있습니다. -
중급Vue3.0 from 0을 통해 범용 백엔드 관리 시스템 프로젝트 실습 구축
5351명이 시청하고 있습니다. -
![제로 기반 프론트엔드 과정 [Vue 고급 학습 및 실무 적용]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
초등학교제로 기반 프론트엔드 과정 [Vue 고급 학습 및 실무 적용]
2821명이 시청하고 있습니다. -
![웹 프론트엔드 튜토리얼 [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
초등학교웹 프론트엔드 튜토리얼 [HTML5+CSS3+JS]
3506명이 시청하고 있습니다. -
초등학교apipost에 대한 빠른 소개
2161명이 시청하고 있습니다. -
중급Vue3+TypeScript 실무 튜토리얼-엔터프라이즈 수준 프로젝트 실습
3208명이 시청하고 있습니다. -
초등학교PHP로 사업을 시작하는 방법에 대해 간단히 이야기해 보겠습니다.
17423명이 시청하고 있습니다. -
중급VUE 전자상거래 프로젝트(프론트엔드 & 백엔드 듀얼 프로젝트 실전)
3828명이 시청하고 있습니다. -
![Apipost 실무 응용 [api, 인터페이스, 자동화 테스트, 모의]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
초등학교Apipost 실무 응용 [api, 인터페이스, 자동화 테스트, 모의]
2265명이 시청하고 있습니다.
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~
이 강좌를 시청한 학생들도 학습하고 있습니다.
- PHP로 사업을 시작하는 방법에 대해 간단히 이야기해 보겠습니다.
- 웹 프론트 엔드 개발에 대한 빠른 소개
- 민망한 물건 백과사전 사이트를 모방한 Mini 버전 MVC 프레임워크의 대규모 실용 Tianlongbabu 개발
- PHP 실용 개발 시작하기: 빠른 PHP 생성 [중소기업 포럼]
- 로그인 인증 및 클래식 게시판
- 컴퓨터 네트워크 지식 수집
- 빠른 시작 Node.JS 정식 버전
- 당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본]
- 자신만의 PHP MVC 프레임워크 작성(깊이 있는 40개 장/자세한 내용/초보자가 발전하려면 읽어야 함)