Подсчет количества кликов мыши на объект в jquery
всем Дорое время суток!
как можно подсчет количества кликов мыши на объект в jquery желательно с каким нибудь примером просто с jquery познакомился не давно |
Так что ли ?
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#myObj').click(function() {
$('#counter').html(+$('#counter').html()+1);
});
});
</script>
<style>
#myObj {
border: 1px;width: 100px;height: 100px;
}
</style>
</head>
<body>
<div id="myObj">Click Me</div>
<div id="counter">0</div>
</body>
</html>
|
Скажите, а можно результат нажатия отображать в независимом окне, например разбить фреймами и в одном будет ссылка, а во втором счетчик???
|
Цитата:
|
Цитата:
|
Цитата:
PS: спросил человека, который последнее сообщение оставил в 2011 году :haha: |
Просто нужно, чтобы на сайте в статьях была кнопка, "Мне нравится" с подсчетом нажатий и сохранением этих подсчетов на каждой странице, этот скрипт подходит, только не сохраняет подсчет, а как сделать не знаю, т.к. с jqwery не знаком.
Может кто знает как дописать? Помогите, пожалуйста! |
Polsaimon,
Чтобы сохранять для всех - необходимо отправлять данные - Аяксом или скрытой формой на сервер, который увеличивает счетчик, - Тогда удобнее итоговую цифру подсчета результатов выводить либо мелким фреймом с отдельной страницы сайта(либо JSON файлом) Куки и Storage - не спасают... поскольку они изолировано находятся на каждом пользователе |
juery в принципе не нужен
<button class="but">+</button>
<span id="span"></span>
<script>
window.onload = function () {
span = document.getElementById('span');
var count = 0; //сюда записываем текущее значение
span.innerHTML = count;
document.body.onclick = function (e) {
e = e || event;
var target = e.target || e.srcElement;
if (target.className == 'but') {
count++;
//здесь отсылаем новые данные на сервер, при удачном ответе обновляем содержимое span
span.innerHTML = count;
}
}
}
</script>
|
Получается также, при перезагрузке страницы, подсчет обнуляется, наверное запись должна либо в базу уходить, либо в файл, я так думаю
|
Цитата:
|
на сервер данные должны уйти (см. 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>
|
рони,
Спасибо большое Рони! |
Цитата:
|
Grasss,
Не лучше ли в localStorage сохранять? |
Суть как раз в том, чтобы данные хранились на сервере в файлике.
Каждый посетитель должен видеть общее число кликов. |
Можно пример кода?
|
:-? похоже на чат, только вывод общего количества сообщений.
|
Примерно так
|
const express = require('express');
const fs = require('fs');
const bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.text({ type: 'text/plain' }));
app.route('/').get((req, res) => {
res.send(`
<div id="myObj">Click Me</div>
<div id="counter">${fs.readFileSync('count.txt').toString() || '0'}</div>
<script>
myObj.onclick = e=> {
var req = new XMLHttpRequest();
req.onreadystatechange = e => {
if(req.readyState == 4 && req.status == 200){
counter.textContent = req.response;
}
};
req.open('POST', 'http://localhost:3000');
req.setRequestHeader('Content-Type', 'text/plain');
req.send('count++');
};
</script>
`);
}).post((req, res) => {
if (req.body === 'count++') {
var count = (Number(fs.readFileSync('count.txt')) + 1).toString();
fs.writeFileSync('count.txt', count);
res.send(count);
}
});
app.listen(3000);
хотя для такой задачи наверное больше socket подойдет |
| Часовой пояс GMT +3, время: 03:10. |