Цитата:
|
на сервер данные должны уйти (см. ajax или отправка данных в скрытый фрейм), там сохраниться, оттуда на новую страницу выгрузиться, комментарии в коде я привёл
PS: http://javascript.ru/ajax начните с первого пункта, там как раз пример про голосование |
Polsaimon,
bes дал скрипт для клиента - а на сервере - думайте сами (возможно и тут в теме помогут |
Люди добрые помогите пожалуйста дописать код!!!
|
Пример моей реализации.
jquery
$('.btn-counter').click(function(){
var name = $(this).attr( "title" );
var like = $(this).attr( "data-count" );
$.ajax({
type: "POST",
url: "likes.php",
data: "id="+name+"&like="+like,
success: function(data){
('#result').text(data);
}
});
});
like.php
<?php
include_once("config.php");
$id = $_POST["id"];
$like = $_POST["like"];
$result = mysql_query(" UPDATE `citaty` SET `like` = '$like' WHERE `id` = '$id'; ");
if ($result){
echo "Все норм";
}
else {
echo "упс";
}
?>
Ну а что бы нельзя было лайкать дважды, нужно использовать куки |
Цитата:
А как сделать так, что бы когда счетчик доходил до определенного числа, то объект id="counter" меня фон , цвет текста или размер (свойства в общем!) |
walik,
А как сделать так, что бы когда счетчик доходил до определенного числа, то объект id="counter" меня фон , цвет текста или размер (свойства в общем!) |
puzjob,
накликать 5 :)
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#myObj {
border: 1px;width: 100px;height: 100px;
}
#counter:before{
content: attr(data-counter);
margin: 20px;
}
#counter[data-counter="5"]:before{
color: #FF0000;
-webkit-animation: up 5s ease-in-out infinite;
-moz-animation: up 5s ease-in-out infinite;
-o-animation: up 5s ease-in-out infinite;
animation: up 5s ease-in-out infinite;
}
@keyframes up {
50% {
-webkit-transform: scale(5);
-moz-transform: scale(5);
-o-transform: scale(5);
transform: scale(5);
}
}
@-webkit-keyframes up {
50% {
-webkit-transform: scale(5);
-moz-transform: scale(5);
-o-transform: scale(5);
transform: scale(5);
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('#myObj').click(function() {
var counter = $('#counter').attr("data-counter");
$('#counter').attr({"data-counter" : ++counter});
});
});
</script>
</head>
<body>
<div id="myObj">Click Me</div>
<div id="counter" data-counter="0" ></div>
</body>
</html>
|
рони,
Спасибо большое! А как сделать что бы число всегда оставалось красным если оно больше 5 ? |
puzjob,
Здравствуйте! Судя по вашему сообщению, вы ну совсем не знаете javascript. Освойте основы языка и вопрос отпадет сам, полностью или частично. А с чем не справитесь - поможем. На сайте javascript можно начать изучать с учебника, раздел Основы javascript. Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/ Задавайте конкретные вопросы по ходу дела.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#myObj {
border: 1px;width: 100px;height: 100px;
}
#counter:before{
content: attr(data-counter);
margin: 20px;
}
#counter.red:before{
color: #FF0000;
font-size: 48px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('#myObj').click(function() {
var counter = $('#counter').attr("data-counter");
$('#counter').attr({"data-counter" : ++counter});
if(counter > 4) $('#counter').addClass("red")
});
});
</script>
</head>
<body>
<div id="myObj">Click Me</div>
<div id="counter" data-counter="0" ></div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 05:22. |