w3schoolsからこのajaxポーリングの幅をアニメートする方法

-2

*この投票のw3schoolsの例では、幅は、yesまたはnoを選択した直後に表示されます。私はアニメーションで別の例を探しましたが、この例ではまだアニメーションを適用できません。w3schoolsからこのajaxポーリングの幅をアニメートする方法

これを達成する最も良い方法は何ですか？ *

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
<script> 
 
function getVote(int) { 
 
    if (window.XMLHttpRequest) { 
 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
 
    xmlhttp=new XMLHttpRequest(); 
 
    } else { // code for IE6, IE5 
 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
 
    } 
 
    xmlhttp.onreadystatechange=function() { 
 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
 
     document.getElementById("poll").innerHTML=xmlhttp.responseText; 
 
    } 
 
    } 
 
    xmlhttp.open("GET","poll_vote.php?vote="+int,true); 
 
    xmlhttp.send(); 
 
} 
 
</script> 
 
</head> 
 
<body><div id="poll"> 
 
<h3>Do you like PHP and AJAX so far?</h3> 
 
<form> 
 
Yes: 
 
<input type="radio" name="vote" value="0" onclick="getVote(this.value)"> 
 
<br>No: 
 
<input type="radio" name="vote" value="1" onclick="getVote(this.value)"> 
 
</form> 
 
</div> 
 

 
</body> 
 
</html>

<?php 
 
$vote = $_REQUEST['vote']; 
 

 
//get content of textfile 
 
$filename = "poll_result.txt"; 
 
$content = file($filename); 
 

 
//put content in array 
 
$array = explode("||", $content[0]); 
 
$yes = $array[0]; 
 
$no = $array[1]; 
 

 
if ($vote == 0) { 
 
    $yes = $yes + 1; 
 
} 
 
if ($vote == 1) { 
 
    $no = $no + 1; 
 
} 
 
//insert votes to txt file 
 
$insertvote = $yes."||".$no; 
 
$fp = fopen($filename,"w"); 
 
fputs($fp,$insertvote); 
 
fclose($fp); 
 
?> 
 

 
<h2>Result:</h2> 
 
<table> 
 
<tr> 
 
<td>Yes:</td> 
 
<td> 
 
<div style="background-color: blue; width:<?php echo(100*round($yes/($no+$yes),2)); ?>px; height:20px "> 
 
<?php echo(100*round($yes/($no+$yes),2)); ?>% 
 
</div> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td>No:</td> 
 
<td> 
 
<div style="background-color: blue; width:<?php echo(100*round($no/($no+$yes),2)); ?>px; height:20px "> 
 
<?php echo(100*round($no/($no+$yes),2)); ?>% 
 
</div> 
 
</td> 
 
</tr> 
 
</table>

出典

2016-08-13 Ahmed El-Khateeb

第一：あなたはdivの「世論調査」の終了タグが欠落している： ''

– Jeff

第二： 'int'はJSの予約語なので、[値]'のようなものに 'int'の名前を変更しますか、 'vote' – Jeff

3番目：高さの後にスタイル定義で'; 'を閉じることができません。それはエラーを起こしてはいけませんが、それでもコードを正確に書くことを学ぶ方がいいです！ - '<？ PHPエコー.....; ？> ' – Jeff

私は、CSSアニメーションプロパティを使用する方法を発見し、ここでのコードを編集PHPページに

<?php 
 
$vote = $_GET['vote']; 
 

 
//get content of textfile 
 
$filename = "poll_result.txt"; 
 
$content = file($filename); 
 

 
//put content in array 
 
$array = explode("||", $content[0]); 
 
$yes = $array[0]; 
 
$no = $array[1]; 
 

 
if ($vote == 0) { 
 
    $yes = $yes + 1; 
 
} 
 
if ($vote == 1) { 
 
    $no = $no + 1; 
 
} 
 

 
//insert votes to txt file 
 
$insertvote = $yes."||".$no; 
 
$fp = fopen($filename,"w"); 
 
fputs($fp,$insertvote); 
 
fclose($fp); 
 
?> 
 
<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
<style type="text/css"> 
 
    .q1{ 
 
     width: <?php echo intval(100*round($yes/($no+$yes),2));?>px; 
 
     height: 20px; 
 
     background-color: red; 
 
     animation-name: first; 
 
     animation-duration: 1s; 
 
     animation-delay: 0s; 
 
     -webkit-animation-name: first; 
 
     -webkit-animation-duration: 1s; 
 
     -webkit-animation-delay: 0s; 
 
    } 
 

 
    @keyframes first { 
 
     0% {width: 0px;} 
 
     100% {width: <?php echo(100*round($yes/($no+$yes),2));?>;} 
 
    } 
 
    @-webkit-keyframes first { 
 
     0% {width: 0px;} 
 
     100% {width: <?php echo(100*round($yes/($no+$yes),2));?>;} 
 
    } 
 
    
 
    .q2{ 
 
     width: <?php echo intval(100*round($no/($no+$yes),2));?>px; 
 
     height: 20px; 
 
     background-color: red; 
 
     animation-name: second; 
 
     animation-duration: 1s; 
 
     animation-delay: 0s; 
 
     -webkit-animation-name: second; 
 
     -webkit-animation-duration: 1s; 
 
     -webkit-animation-delay: 0s; 
 
    } 
 

 
    @keyframes second { 
 
     0% {width: 0px;} 
 
     100% {width: <?php echo(100*round($no/($no+$yes),2));?>;} 
 
    } 
 
    @-webkit-keyframes second { 
 
     0% {width: 0px;} 
 
     100% {width: <?php echo(100*round($no/($no+$yes),2));?>;} 
 
    } 
 
</style> 
 
</head> 
 

 
<body> 
 
<h2>Result:</h2> 
 
<table> 
 
<tr> 
 
<td>Yes:</td> 
 
<td> 
 
<div class="q1"> 
 
<?php echo(100*round($yes/($no+$yes),2)); ?>% 
 
</div> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td>No:</td> 
 
<td> 
 
<div class="q2"> 
 
<?php echo(100*round($no/($no+$yes),2)); ?>% 
 
</div> 
 
</td> 
 
</tr> 
 
</table> 
 
<body> 
 
</html>

です

出典

2016-08-14 09:46:31

w3schoolsからこのajaxポーリングの幅をアニメートする方法

答えて

関連する問題